HTML - 시멘틱 태그(Semantic tag)에 대해 알아보자

Semantic tag

웹 페이지 레이아웃을 잡을때 div만을 사용해서 사용할 수도 있지만, 시멘틱 태그를 사용하므로서 웹 사이트의 각 구조에 대한 내용을 명확하게 전달할 수 있다. 머리글은 header 바닥글은 footer와 같은 태그를 사용하고 문서의 내용은 section을 사용할 수도 있다.

div태그만으로 레이아웃을 잡을 수 있는데, 시멘틱 태그를 사용하는 이유는 뭘까?

1. 일단 SEO(검색엔진 최적화)에 유리해진다.
   검색 엔진이 태그의 목적에 맡도록 설계된 사이트는 효율적으로 정보를검색하여 검색 노출이 유리해진다.
2. 웹 접근성에 효율적이다.
   웹 접근성이 필요로 하는 시각장애인인이나 스크린리더같은 환경에서 용이하다.
3. 유지보수성의 장점
   div만 남발하는 경우 class나 내부의 설계된 내용을 확인해야 하지만, 시멘틱 태그를 확인하므로서 해당 태그의 기능이 어떤걸 뜻하는지 확인이 용이해진다.

아래에서 시멘틱 태그별 내용을 정리하고자 한다.

⭐header

웹 사이트의 상단 부분을 맡거나 머리글의 요소이다.
로고나 제목 등이 위치하며 보통은 바디부분의 최상단이지만 불가피한 경우 레이아웃 구조상 메인의 상단으로 작성되는 경우도 있다.

• 일반적으로 header에 포함된 내용이다.
  • 하나 이상의 제목 요소(h1 ~ h6)
  • 로고 또는 아이콘
  • 배포 정보

⭐nav

네이게이션의 줄임말로 목차나 리스트와 같은 항목이 들어가는 요소이다.
다른 페이지로 이동시키는 링크의 덩어리가 위치하다보니 메뉴로 구성되는 경우가 많다.
모든 링크관련 요소가 nav에 있어야 하는것은 아니다.
일반적으로 ul, li, a태그의 조합으로 구성한다.

⭐main

웹 사이트의 주요 내용이 담기는 요소이다.
사이드바, 저작권 정보, 사이트 로고, 검색 양식과 같은 반복되는 컨텐츠를 포함시키지 않는다.

⭐section

주제, 카테고리, 영역 별로 그룹을 구분하는 용도로 사용하는 요소이다.

⭐article

문서내에서 독립적인 컨텐츠를 지정하는 요소이다.
article의 내용 자체로 독립적인 내용이어야 한다.

• 포럼 게시물
• 블로그 게시글
• 뉴스

⭐aside

좌측이나 우측의 사이드에 붙는 요소이다.
컨텐츠와 별개의 일부 컨텐츠를 작성할 때 사용된다. 주변 컨텐츠와 간접적인 내용이 들어가거나 본문과 부수적인 내용이 들어간다.
구글 광고와 같은 부수적인 내용이 대부분이 aside에 들어간다.

⭐footer

페이지 내 바닥글을 정의하는 요소이다.

• footer에 포함되는 내용은 아래와 같다.
  • 저작권 정보
  • 발행 정보
  • 연락처
  • 사이트맵
  • 상단으로 이동시키는 링크
  • 관련 문서 정보