[HTML5] 시맨틱 태그

---

알고있으면 좋은 HTML5 Tip✨

---

시맨틱 태그란?

• 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다.

 

(1) 시맨틱 태그를 사용하는 이유

• 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
• 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

 

(2) 시멘틱 태그 종류

• header
  1. 페이지의 제목과 같은 소개 내용을 포함한다.
  2. 일반적으로 heading 태그나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함한다.
• nav
  1. 메뉴, 목차 등에 사용된다.
• aside
  1. 간접적으로 문서와 관련된 내용을 나타낸다.
• main
  1. 지배적인 콘텐츠 영역을 나타내는 태그이다.
• section
  1. 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
• article
  1. 독립적으로 배포 또는 재사용되도록 의도 된 문서이다.
• footer
  1. 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함한다.