HTML - 시맨틱 태그(Semantics)

기능

• div와 같은 기능을 한다.
• 영역을 나눌 때, 의미를 가지는 이름으로 나눌 수 있다.

장점

• SEO(Search Engine Optimization). 검색엔진 최적화로 검색사이트에서 상단에 자리잡을 수 있다.
• 웹 접근성이 좋다. 시각장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 도움이 된다.
• 의미없는 div들을 탐색하는 것 보다 시맨틱태그를 사용한 코드블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터의 유형을 제안한다.

종류

1. header

• 소개 및 탐색에 도움을 주는 컨텐츠.
• 제목, 로고, 검색폼, 작성자 이름 등의 요소도 포함될 수 있다.

2. footer

• 일반적으로 작성자, 저작권 정보, 관련문서 등의 내용을 담는다.
• 작성자 정보는 <address> 태그로 감싼 후 footer에 배치한다.

3. nav

• 메뉴, 목차, 색인에 사용된다.

4. main

• 문서의 핵심주제나 핵심기능에 직접적으로 연결됐거나 확장하는 컨텐츠로 이루어진다.
• 문서에 1개만 존재해야 한다.
• 사이드바, 탐색링크, 저장권정보, 사이트로고, 검색폼 등 여러 문서에걸쳐 반복되는 콘텐츠는 포함해서는 안된다.

5. article

• 독립적으로 구분해 배포하거나 재사용할 수 있는 영역에 사용한다.
• 블로그 글, 댓글, 매거진, 뉴스기사 등이 있다.

6. section

• 독립적인 영억을 나타내는데, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
• 보통 제목(h1-h6))을 포함한다.

7. figure

• 이미지와 설명이 함께 있는 경우 사용한다.
• 설명은 <figcaption>태그로 감싼 후 배치한다.

8. aside

• 문서의 주요내용과 간접적으로 연관된 부분을 나타낸다.
• 주로 사이드바, 콜아웃박스로 표현한다.

9. mark

• 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트 하는 부분.
• mark는 연관성을 가진 부분을, strong은 중요도를 가진 부분을 나타낼 때 사용합니다.

10. summary

• details 태그의 요약, 캡션, 범례. 
• summary요소는 클릭하면 상위 detail요소의 상태가 열리고 닫힌다.
• details택의 첫번째 자식으로만 사용할 수 있다.

11. time

• 시간, 날짜를 담는다.

 

참조:

https://developer.mozilla.org/ko/docs/Glossary/Semantics