Sementic Tag

포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 Sementic Tag라 한다.

시맨틱 태그에는 header, nav, section, article, main, footer 등 이 있다.

시맨틱 태그 요소

메인 내용을 담는 태그. 웹사이트의 텍스트 본문이나 콘텐츠를 나타내며, 해당 태그는 문서에서 유일해야한다. 후술할 header, nav, section, article 등의 모든 페이지 태그 앞에 온다.

문서나 섹션의 머릿글을 지정하는 태그. 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의한다.

웹사이트의 메뉴, 탭, 탐색 경로 등 탐색 링크가 포함된 페이지 부분을 정의하는 태그.

사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그. 사용자와 상호작용이 가능하다는 점이 특징이고, 사용자는 버튼을 통해 열고 닫을 수 있다.

문서 또는 섹션의 바닥글을 지정하며, 문서의 아래 쪽에 위치하는 태그. 일반적으로 연락처 정보, 사이트맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함된다.

웹페이지를 시각 뿐만 아니라 음성으로 읽어주는 스크린 리더만을 이용할 때에도 문제 없이 동작하며, 해당 사용자에게 큰 이점을 준다.

시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는데 도움이 되며, 이를 통해 웹 사이트 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있다.

사람들이 콘텐츠를 더 쉽고 빠르게 이해하고, 소비할 수 있다.

또한 가독성 측면에서 불필요하거나 중복되는 코드를 피할 수 있어, 웹페이지를 더 빠르고 효율적으로 만들 수 있다.