시맨틱 태그란?
시맨틱 태그(semantic tag__semantic: 의미론적인)란 HTML에서 의미를 가지는 태그를 뜻한다. 이름만 의미를 가지고 있을 뿐, 성질은 div와 똑같다. 그럼 이러한 시맨틱 태그에는 어떤 것들이 있을까? 가장 대표적인 몇가지만 정리하겠다.
시맨틱 태그의 종류
section
개발을 하면서 자주 사용했던 태그이다. 말 그대로 섹션, 영역을 나누기 위한 태그이다. 여러가지 컨텐츠들을 주제별로 묶어주는 역할을 한다. 일반적으로 각 section 태그에는 제목을 나타내는 <h1> ~ <h6>을 포함한다.
header / footer
-
header : 웹 페이지의 상단에 배치하는 태그이다. 로고, 제목, 메뉴 등과 같은 도입 정보들이 포함된다.
-
footer : 웹 페이지의 하단에 배치하는 태그이다. 저작권 정보, 회사명과 같은 정보들이 포함된다.
main
메인 컨텐츠를 나타내는 태그이다. 해당 웹 페이지의 주제가 되는 컨텐츠이며, 한 번만 사용되어야 한다.
article
웹 페이지 상에서 의미가 있는 영역을 의미한다. 태그를 사용한 영역을 따로 떼어 독립적으로 배포가 가능한 컨텐츠라면, article 태그를 사용한다. 예를 들어 블로그 게시글, 댓글, 신문 기사, 제품 카드와 같은 것이 있다.
nav
네비게이션 바를 나타내는 태그이다. 네비게이션의 말 뜻 그대로 웹 사이트 안의 어떤 링크로 이동할 수 있는 메뉴들을 모아놓은 컨텐츠이다.
시맨틱 태그를 사용하면 뭐가 좋을까? 🧐
이러한 시맨틱 태그들은 이름만 의미를 가지고, div와 똑같은 역할을 하는데,, 왜 굳이 시맨틱 태그 사용을 지향하는 것일까?
1. 검색엔진최적화 (SEO, Search Engine Optimization)
SEO란 ‘검색엔진최적화’로, 어떤 것을 검색했을 때, 검색엔진 결과페이지에서 상위노출도를 높이는 작업이다. 구글이나 네이버 같은 검색엔진이 이해하기 쉬운 구조로 웹 페이지를 구성하는 방법이다. 이 때 검색엔진프로그램이 HTML 코드만 보고도 웹 페이지의 구조를 쉽게 파악할 수 있도록 하여 검색엔진최적화에 있어 우위를 선점(?)하는 것이다!
2. 웹 접근성 (A11y, Web Accessibility)
웹 페이지를 시각적으로 볼 수 없는 시각 장애인들의 경우, 스크린 리더를 통해 웹 서핑을 할 수 있다. 이 때 시맨틱 태그가 적용되어 있는 웹 페이지는 어디가 헤더인지, 어디가 메인 컨텐츠인지 보다 알기 쉽게 도와준다.
3. 개발자 관점
협업을 주로 하는 개발자의 경우 다른 사람이 짠 코드를 읽고, 수정해야하는 작업이 많다. 이 때 div로만 구축한 웹 사이트 보다는 시맨틱 태그를 적용한 웹 사이트의 코드를 읽는 편이 더 쉬울 것이다. 이렇게 개발자의 생산성을 높여준다.
나도 div로만 개발하는 습관이 들여져 있었는데, 시맨틱 태그 사용의 중요성과 각각의 의미와 쓸 때의 법칙을 알게 되었다. 시맨틱 태그를 애용하는 개발자가 되기로 하자!
정보 출처
https://velog.io/@syoung125/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://coding-factory.tistory.com/883
