TIL #6 : [HTML] Semantic Elements

💎 시멘틱 태그?

HTML은 채워질 데이터를 나타내도록 코딩해야 하며, 의미 있는 코드 블록으로 채워야 한다. 그러나 기존 div 태그로는 이런 데이터를 작성하기 부족했고 더더욱 의미적 가치(semantic value)가 포함된 태그를 쓰기 위해 시멘틱 태그가 등장했다. 더 이상 id와 class명을 가진 div태그가 아닌, 하나의 데이터를 표현하는 태그로 HTML 코드를 쓸 수 있게 됐다.

💎 대표적인 HTML 시멘틱 태그

1. header :
   사이트의 소개 및 탐색 기능을 돕는 컨텐츠를 나타내며 보통 사이트의 상단에 위치해 있다. 제목, 로고, 검색 폼, 작성자 이름 등이 일반적으로 header에 포함된다.

2. footer :
   사이트 작성자의 정보, 저작권 정보, 관련 문서 등을 나타낼 때 사용되며 보통 사이트의 하단에 위치해 있다.

3. nav :
   네비게이션 바와 관련된 컨텐츠를 나타날 때 사용된다.

4. section :
   HTML 문서의 독립적인 구획이다. section은 비슷한 내용/테마를 묶는 태그라고 보면 편하다.

5. article :
   문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. section과 가장 다른 점도 바로 재사용 및 배포할 수 있다는 특징이다.

6. main :
   body의 주요 컨텐츠를 나타내며 한 페이지 당 하나만 써야한다.

7. aside :
   사이트 또는 문서의 주요 컨텐츠와 간접적으로 연결된 부분을 말한다. 메인 컨텐츠의 사이드바라고 생각하면 된다.

Reference
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://www.freecodecamp.org/news/semantic-html5-elements/
https://www.zerocho.com/category/HTML&DOM/post/5821b15f577d375e5c73bbc5