시맨틱태그

1. 시맨틱 태그란?

코드 조각의 의미를 나타낸다. 다시 말해 포함된 콘텐츠(코드)의 특정 의미를 정의하고 목적을 갖게하는 태그이다. div와 마찬가지로 블럭레벨요소이고 웹사이트의 구조를 설계하기 위해 사용한다.
HTML5 이전에는 span, div만 사용했는데 이는 콘텐츠의 유형이나 사이트에서의 역할은 표현할 수 없었다.

<h1> 엄청나게 중요한 제목! </h1>

위와 같은 것에서 h1을 시맨틱 태그라고 말할 수 있다. 왜냐하면 엄청나게 중요한 제목임을 강조해서 나타내는 '의미'가 있기 때문이다

Image inspired by semrush

2. 시맨틱 태그의 이점

1. 검색엔진(SEO)은 의미론적 마크업(제목)을 검색순위에서 중요한 단서로 간주함.
   • 관련 키워드와 문구에 대해 웹페이지를 최적화
   • 검색결과 상 웹 사이트 노출 순위를 높임
   • 웹페이지의 성능과 속도를 향상시켜 이탈률 감소, 전환률 증가
2. 시각장애인에게 화면판독기로 페이지를 탐색할 때 시맨틴 태그는 좋은 안내판이 됨.
3. 컨테이너와 같은 역할을 함. 수없이 흩어져있는 div를 다 찾아보는 것보다 의미 있는 코드블록을 찾게 해 가독성을 높여줌.

즉 시맨틱 태그는 의미없이 나열된 정보들에게 각각 중요도와 의미를 부여해 우리가 알아보기 쉽게 하는 데에 아주 유용하다. 사실 필수라고 봐도 무방한 것 같다.

3. 시맨틱 태그의 종류

	의미
article	독립컨텐츠
aside	별도컨텐츠
details	추가정보
figcaption	figure자막
figure	설명붙는 독립컨텐츠
footer	맺음말
header	머릿말
main	주 컨텐츠
nav	네비게이션 링크
section	콘텐츠의 한 절(섹션)
summary	detail의 헤더
time	강조할 시간

해보니 내가 자주 쓰게되는건 header,main,footer 정도였다.
더 복합적인 코딩을 할 때는 꼭 필요할 것 같다.
특히나 코드를 구성할 때 큰 부분을 나누어 그 안에 세부적인 것들을 하는게 헷갈리지도 않고 아주 유용하다.

4. 시맨틱 태그의 사용