시맨틱 태그(Semantic Tag) 정의, 사용해야 하는 이유, 종류, 예시

정의

 

시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다.

이런 시맨틱 태그는 HTML5에서는 처음 등장했습니다. 예를 들자면 <header>나 <footer> 같은 태그들을 말합니다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알겠죠. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다.

 

 

사용해야 하는 이유

 

1) 가독성과 유지보수

만약 모든 태그들을 div로 만들었다고 가정해봅시다. HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어지겠죠. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워집니다.

 

2) 웹 접근성 상승

예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있습니다.

 

3) 검색엔진 최적화

예를 들자면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식합니다. 반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식합니다. 

 

 

종류

 

시맨틱 태그로 구조화한 웹 페이지 예

 

 

출처

https://coding-factory.tistory.com/883