[2주차 위클리 페이퍼] 시맨틱 태그

 

시맨틱(semantic) 태그를 사용하면 좋은 점

 

header, nav, main, footer, section, article 등등..

 

HTML에는 이러한 태그들이 있다. 그리고 이 태그들은 각 태그명에 해당하는 특정 영역에서 사용하며 영역을 의미있게 나눠주는 역할을 한다. 성질은 div 태그와 같은데, 이 태그들을 사용하면 개발자가 이 부분이 어떤 영역일지 짐작을 하게 해준다.

 

이렇게 의미를 가지는 위 태그들을 시맨틱 태그라고 하며, semantic이라는 단어 자체가 '의미의, 의미론적인'을 뜻하는 것처럼, 작성하는 사람의 의도를 분명히 하는 역할을 한다. 그렇기 때문에 시맨틱 태그는 HTML의 구조를 설계하는데 있어서 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와준다.

 

시맨틱 태그에는 다음과 같은 태그들이 있다.

header	main	figure	details	article	section
nav	footer	figcaption	summary	aside	time

 

각 태그들에 대해서는 따로 포스팅해볼 예정이다.

시맨틱 태그를 사용하면 좋은 점

1. 접근성의 향상

시맨틱 태그를 사용하면 웹페이지 탐색 및 상호작용에 도움이 되는 스크린 리더기, 음성 명령 등의 보조 기술을 사용하는 사용자에게도 도움이 될 수 있다. 예를 들어 nav 태그를 사용하면 콘텐츠에 탐색 링크가 있다는 것을 나타낼 수 있으며, 키보드 탐색을 지원하기에 마우스 사용이 불편한 사용자도 웹사이트를 효과적으로 탐색할 수 있다.

 

figure나 figcaption 태그를 사용하면 이미지와 설명 텍스트의 관계를 명확히 나타낼 수 있어서 시각장애인 사용자가 이미지의 의미를 더 잘 파악할 수 있도록 도와준다.

 

2. SEO (검색엔진 최적화) 향상

SEO(Search Engine Optimization)는 웹사이트의 가시성과 순위를 높여서 구글같은 검색엔진에서 웹사이트 더 많이 노출하여 웹사이트로 더 많은 트래픽을 유도하는 것을 목표로 하는 디지털 마케팅이다. 

 

시맨틱 태그를 사용하면 의미가 부여되어 사용자에게뿐만 아니라 컴퓨터에게도 이해하기 쉬운 구조를 전달하게 되므로 검색엔진이 이러한 시맨틱 태그가 적절히 잘 사용된 웹페이지를 더 높게 평가하게 되면서 검색 결과에서 더 좋은 순위를 차지할 수 있게 된다.

 

또, 시맨틱 태그는 모바일 최적화를 지원하기 때문에 시맨틱 태그를 사용한 웹페이지를 모바일 친화적인 웹페이지로 인식하여 검색 순위 향상에 도움을 줄 수 있다.

 

3. 가독성 향상

시맨틱 태그를 사용하면 개발자뿐만 아니라 사용자도 더 쉽고 빠르게 이해할 수 있는데 도움을 주기 때문에 가독성이 향상되는 결과를 가져온다. 이는 콘텐츠를 명확하고 일관된 구조로 만드는데 도움이 된다.

 

특히, 개발할 때 무조건적으로 div 태그만 사용하는 것보다 문서의 구조를 파악하기 쉬운 header, main, footer 등의 태그를 사용하기 때문에 코드 유지보수를 진행할 때에도 더 쉬운 작업을 할 수 있다.