시맨틱 태그의 장점을 알아보자!

시맨틱 태그란?

---

<div>와 기능은 동일하지만, 콘텐츠의 특정 의미가 담겨있는 태그를 의미하는데요.

div는 어디든 사용해도 무방하지만, 시맨틱 태그는 해당 태그에 의미를 담고 있는데요.

이 엘리먼트의 역할이 무엇인지 보다 명확하게 드러내주는 것이라고 볼 수 있을 듯 해요. 

 

예를들어, header에는 페이지의 머릿글로 제목이나 로고 등등을 포함하고 있고, 

nav는 내비게이션이나 목차, section은 본문에 포함된 다양한 내용들을 나눈것, 

footer에는 하단 바닥글로 저작권이나 회사 정보 등등이 담겨있어요. 

 

 

그럼, 이런 시맨틱 태그를 사용하게 되는 장점을 알아봅시다 :)

 

시맨틱 태그의 장점

---

 

검색엔진 최적화

의미 있는 태그를 통해 검색시 정확한 구조 분석에 도움을 주어 사이트 검색 시 노출 순위를 높일 수 있습니다. 

 

웹 접근성 향상

시각장애가 있는 사용자가 화면 판독기를 통해서 접근하게 되면, 마크업을 푯말로 사용해서 접근이 쉬워지겠죠?

또한 소스코드가 구조화 되어 원하는 위치를 빠르게 찾을 수도 있겠네요. 

 

코드 가독성을 높여 유지보수 용이

해당 부분이 화면상 어디에 위치하는지 빠른 판단이 가능해져서 유지보수를 하게 될 때 빠르게 이해할 수 있습니다.