[Html] Semantic Tags 와 헷갈리는 tags 에 대해 알아보자

이 글은 드림코딩 엘리님의 "HTML 태그들, 헷갈리는거 정리해 보았다 🥳"  영상을 바탕으로 정리한 내용입니다.

Intro 

• Html은 다른 프로그래밍 언어에 비해서 진입장벽이 훨씬 낮은 마크업 언어이지만, 만만하게 공부하면 어디에서 어떤 태그를 사용해야 하는지 매우 헷갈립니다. 필수로 알아야 하는 시멘트 태그들과 헷갈리는 태그들에 대해 알아보도록 합시다. 

Semantic Tags (Semantic Markup)?

• semantic이란 "의미의, 의미가 있는"을 뜻합니다. 
• html에서 div 태그만 이용해서 모든 웹사이트를 만들 수도 있지만, 브라우저도 개발자도 의미있게 이애할 수 있기 위해서는 semantic tags 를 적절하게 잘 사용하는 게 중요합니다. 

<h1>Top level heading</h1>

<span class="big">Top level heading</span> // 컵이 있는대도 후라이팬에 물을 부어 마시는 느낌..

Semantic Tags 가 중요한 이유 3가지

1. SEO : 검색 엔진에 좋습니다. 
2. Accessibility : 웹 접근성 / 웹을 시각적인게 아니라 음성 혹은 키보드만으로 웹사이트를 이용하는 경우 적절한 semantic tags로 만들어졌을 경우 문제없이 작동합니다. 
3. For us, Maintainability : 개발자들을 위해서 입니다. 한눈에 구조를 볼 수 있고, 유지보수성을 높여 개발할 수 있습니다. 

웹 사이트 구조를 이루는 태그들 (박스 태그)

• header : 웹 사이트의 브랜드를 나타낼 수 있는 로그나, 중요한 메뉴 아이템이 들어있으면 header 를 사용하는 것이 좋습니다.
• nav : header안에 여러 메뉴가 모여져 있다면 div보다 nav를 사용하는 게 좋습니다.
• footer : 필수적인 요소는 아니지만, 부가적인 정보들이나 링크들이 들어있으면 footer를 사용하는 게 좋습니다.
• main : 웹사이트 페이지에서 중요한 컨텐츠를 가지고 있는 부분에서 사용합니다. 
• aside : main 안에서도 페이지 컨텐츠와 상관없는 부가적인 내용을 담아야 할 필요가 있을 때 사용합니다. (ex. 광고)
• article or section : main 안에서도 div로 그룹지어 내용을 그룹짓는 것보다는 상황에 따라 article or section을 사용하는 게 좋습니다. 

<article> VS <section>

• article : 블로그 포스트에서 포스트 하나, 신문 기사에서 기사 하나,하나 그 자체를 묶어줄 때 사용됩니다. 이 자체만으로 독립적으로 다른 페이지에 보여주었을 때 전혀 문제가 없을 때, 사용할 수 있습니다. main 안에 있는 다른 내용들과 전혀 상관없이 고유한 정보들을 나타낼 때 사용됩니다. 
• section : article 안에 많은 내용이 들어있는데, 그 안에서도 연관있는 내용들을 하나로 묶어줘야 할 때 section을 사용할 수 있습

<i> VS <em>

• i : 시각적으로만 이탤릭체
• em :  강조하는 이탤릭체

<b> VS <strong>

• b : 시각적으로만 볼드체
• strong : 정말 중요한 볼드체! 

<ol>, <ul>, <dl>

• ol : 순서가 중요한 목록을 나타낼 때 사용합니다. 
• ul : 순서가 없고, 단순한 목록을 나타낼 때 사용합니다. 
• dl (description list) :  어떤 단어에 대해서 설명이 묶여져 있을 때, 그 목록을 나타낼 때 사용합니다. 
  • dt (description terms) :  그에 해당하는 단어 
  • dd (description detail) : 그에 해당하는 설명 

<img> VS CSS background

• img : 이미지가 웹페이지 안에서 하나의 중요한 요소로 자리잡고 있을 때 사용합니다.
• CSS background : 이미지 태그가 문서의 내용과 별개로 스타일링 목적일 경우, css background image를 이용해서 표기하는 게 중요합니다.

<button> VS <a>

• button : 사용자의 특정한 액션을 위해서 버튼 클릭 시 특정한 행동이 발생할 경우 
• a :  사용자가 클릭을 했을 때 다른 페이지로 이동하는 경우 (어디론가 이동할 때)

<table> VS CSS

• table : 행 + 열 데이터 / 단순히 item을 그리드 형식으로 표현할 때는 좋지 않습니다.
• css : Flex, Grid 
• 문서 안에서 자체적으로 의미있는 태그가 필요한 것인지, 아니면 css로 스타일링을 위해서 태그를 사용하는 것인지 확인해봐야 합니다. 

정리하며

• Semantic Tags는 따로 정답이 존재하지 않기 때문에 내가 나타내고자 하는 컨텐츠를 조금 더 의미있는 태그를 사용할 수는 없는지 챙겨보고 확인해보면 됩니다. 

 

---

https://www.youtube.com/watch?v=T7h8O7dpJIg