시맨틱 태그를 쓰면 좋은 점

---

 

sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다.

 

시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다.

기능은 <div>태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다.

 

그렇다면 이런 시맨틱 태그를 왜 써야 할까요?

---

시맨틱 태그의 종류

• <article> : 하나의 완성된, 독립적인 내용을 나타내는 영역
• <aside> : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스)
• <details> : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용
• <figcaption> : 이미지에 대한 캡션
• <figure> : 이미지 및 이미지 설명을 담고 있는 영역
• <footer> : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
• <header> : 영역 위쪽에서 로고나 제목, 메뉴 같은 것을 담고 있는 도입부
• <main> : 사이트의 본격적인 내용으로, 페이지에서 딱 한 번만 사용 가능
• <mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분
• <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획 (메뉴, 목차, 색인)
• <section> : 어떤 것의 일부분을 나타내는 영역
• <summary> : <details> 요소 안의 내용을 구성하는 데 주로 사용됨
• <time> : 시간의 특정 지점 또는 구간을 나타냄

 

시맨틱 태그를 잘 사용한다면 ... 

1. SEO 향상

 

SEO(Search Engine Optimization)는 검색엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업을 의미합니다. 

 

이러한 작업을 위해서 메타태그를 설정하거나 오픈그래프 태그를 설정할 수 있으며,

이 글의 주제인 시맨틱 태그를 통해서도 SEO를 향상시킬 수 있습니다.

 

검색 엔진 봇은 텍스트를 읽을 수는 있지만 컨텐츠의 구조를 이해하지는 못하기 때문에, 의미 없는 구조의 텍스트들에 시맨틱 태그를 이용하여 의미를 부여함으로써 검색엔진 봇에게 텍스트의 중요도 차이를 인식시킨다면, 검색 엔진에게 우리 웹 페이지에 대한 내용을 더 명확하게 전달할 수 있을 것입니다.

 

또한 웹사이트의 SEO가 잘 이루어졌는지 궁금하다면, 크롬 개발자 도구에 있는 Lighthouse 기능을 통해 확인해볼 수 있습니다.

 

2. 웹 접근성 향상

 

웹 접근성이란, '⌜지능정보화기본법⌟에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것'입니다. 이러한 웹 접근성을 보장하기 위해 웹 브라우징에 사용되는 보조 과학 기술 중에는 스크린 리더가 있으며, 이 스크린 리더 기술을 편리하게 사용할 수 있도록 하기 위한 방법 중 하나로 시맨틱 태그를 잘 사용하는 것이 있습니다.

 

3. 개발 생산성 향상

 

시맨틱 태그는 <div> 태그와 기능은 동일하기 때문에, 시맨틱 태그를 쓰지 않더라도 코드는 정상적으로 동작합니다. 

하지만 많은 내용을 담고 있는 코드의 경우, <div> 태그로만 구성되어 있다면 그 내용을 한 눈에 파악하기에는 어려울 것입니다. 

 

하지만 시맨틱 태그를 사용한다면, 태그 자체에서 의미를 드러내고 있기 때문에 굳이 코드 내용 전체를 읽어보지 않아도 태그 이름만 보고 코드의 내용을 유추할 수 있어 개발 생산성을 향상시키는 데 도움이 될 것입니다. 

 

---

참고 자료

 

1. 웹 접근성 높이기 w/ 기존 프로젝트 리팩터링 (Lighthouse)

2. Semantics

3. 검색엔진 최적화(SEO)란?

4. Lighthouse Chrome 확장 프로그램에서 검색엔진 최적화 감사 카테고리 출시

5. Sementic Tags for SEO (검색엔진 최적화) : html문서를 시맨틱하게 작성해야하는 이유

 

웹 접근성 높이기

3./.