시멘틱 태그

시멘틱 태그 (Semantic Tag)란?

Semantic: "의미의","의미론적인"

즉, Semantic Tag를 해석하면 "의미있는 태그"이다.
번역한대로 시멘틱 태그는 태그에 의미를 부여해준다. 다음 태그들을 살펴보자.

• 일반적인 태그 : div,span,p...
• 시멘틱 태그 : article,footer,form...

일반 태그와 비교하면 시멘틱 태그는 태그를 읽는 것만으로도 그 태그안에 어떤 내용이 들어갈지 유추가 가능하다.

"어차피 사용자 눈에는 태그라는게 보여지는것도 아니고, 왜 이렇게까지 의미를 부여해야해?!"
라고 생각할 수 있다. (내가 그랬음)

시멘틱 태그를 왜 사용하는지 살펴보자.

시멘틱 태그를 사용하는 이유

1. 검색 엔진 최적화 (SEO)

검색엔진은 태그를 보고 페이지 내에서 검색 키워드의 우선순위를 파악한다. h1은 제목태그, header는 헤더 이렇게 태그를 사용한다면 검색엔진이 페이지를 좀 더 정확하게 분석하게 도와준다.

2. 코드의 가독성 향상

태그의 내용을 유추하기 쉬워지기 때문에 여럿이서 프로젝트를 진행한다면 다른사람이 코드를 분석하기 더 편해진다.

시멘틱 태그의 종류

많이 사용되는 시멘틱 태그들을 살펴보자.

• header : 헤더 영역에서 사용되는 태그로 로고, 사이트 이름 등이 포함되어져 있다.
• nav : 네비게이션, 목차 등을 담는다.
• section : article 보다 큰 영역을 나타낼 때 사용된다. 논리적으로 관계있는 요소 또는 문서들을 묶어줄 때 쓰인다.
• article : 독립적인 내용을 담을 때 쓰인다. 여러 개의 article 들이 section안에 존재할 수 있다.
• aside : 사이드 영역에서 사용되는 태그이다. 간접적으로 문서와 관련된 내용을 담는다.
• footer : 푸터 영역에서 사용되어진다. 회사 정보 등이 들어있다.