<aside> 💡 목차

</aside>

시맨틱 태그란?

• 시맨틱 (Semantic)의 사전적 정의는 ‘의미론적’, ‘의미의’ 이다.
• 따라서 시맨틱 태그는 의미를 담은 태그라는 뜻을 가진다.

시맨틱 태그의 등장 배경

• HTML 4에서는 HTML 태그가 문서 내용들을 화면에 보여주는 역할만 했기 때문에 화면을 구성하는 역할은 대부분 <div> 태그가 맡았고, 수많은 <div> 태그들은 다시 id 속성으로 구분했다.
• 이때 <div> 태그의 이름은 디자이너나 개발자 개인의 생각에 따라 지정되었는데, 이런 방법은 제작자 자신이 나중에 보더라도 이해하기 어려웠을 뿐만 아니라 담당자가 바뀌면 문서 구조를 이해하는 데 많은 시간이 걸리곤 했다.
• 또한 개발자는 물론이고 시각 장애인 용 화면 낭독기나 검색 엔진에서 소스 코드를 읽을 때도 어느 부분이 메뉴이고 어느 부분이 본문인지 구별할 수가 없었다.
• 따라서 헤더나 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속하여 사용하면 훨씬 이해하기 쉬운 코드가 되기 때문에 HTML5 표준 안에서 문서 구조를 만드는 시맨틱 태그가 등장하게 되었다.

시맨틱 태그의 장점

• 검색 엔진은 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주한다. 따라서 검색 엔진 최적화에 유리하다.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 안내판으로 사용할 수 있다. 즉 웹 접근성 측면에서 이점이 있다.
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 유지 보수가 편리하다.

시맨틱 태그의 종류

• 시맨틱 태그의 종류는 거의 100여 가지가 있지만 자주 쓰이는 것들 위주로 나열하면 아래와 같다.

https://yozm.wishket.com/magazine/detail/2495/

<header>