시맨틱 태그를 쓰는 이유

시맨틱 이란 ‘의미론적인’ ‘의미가 통하는’ 이라는 뜻이 있습니다. html 태그 에서도 비슷한 의미로 통합니다. 어느 곳에서 어떤 시맨틱 태그가 쓰였냐에 따라 그 태그가 그 곳에서 어떤 역할을 할지, 어떤 것들을 보여줄 목적인지를 대략적으로 예상 할 수 있습니다.

다음은 이러한 시맨틱 태그가 가진 장점들 입니다.

1. 검색 엔진 최적화 (Search Engine Optimization)

   만약 시맨틱 태그의 맞게 페이지를 잘 작성 하였다면, 본문에서 무언가를 검색할때 <nav>나 <aside> 같은 태그를 거치지 않고 바로 <article> 같은 태그로 접근합니다. 더욱 빠르고 정확하게 정보를 검색할 수 있게 되는거죠.

2. 웹 접근성 (Web Accessibility) A11y

   어떤 장애가 있어서 웹 사이트를 사용하는데 불편함이 있어선 안된다는 웹 접근성 시각에서 보았을 때도 시맨틱 태그는 중요합니다. 시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 사용하는데 이때 시맨틱 태그가 어느 부분이 제목이고 본문인지를 구별해주기에 본문의 흐름 파악에 많은 도움을 줄 수 있습니다.

3. 코드 직관성

   또한 개발자의 관점에서도 시맨틱 태그는 코드의 직관성 확보에 유용합니다. 용도에 맞게 잘 작성되어 있다는 가정 하에서만 말이죠. 물론, 잘못된 방식으로 시맨틱 태그를 사용하면 <div> 태그 로만 작성한 것보다 못한 혼란을 줄 수도 있습니다. 그렇기에 각 영역에 의미를 구체적으로 두고자 할때 올바로 사용해야 하며, 엄격한 규칙 보단 사용하는 사람의 의도가 중요합니다.