y_flm's Blog

시맨틱 태그란 무엇일까?

시맨틱 태그란?

시맨틱(Semantic)의 사전적 의미는 "의미론적", "의미의" 라는 것을 뜻한다.
한마디로 시맨틱 태그(Semantic Tag)는 의미가 담겨있는 태그들을 의미한다.
웹 페이지 설계 시, 시맨틱 태그를 이용하여 각 영역의 역할을 전달하는 데 도움을 주기도 한다.

시맨틱 태그의 종류로는 뭐가 있을까?

시맨틱 태그의 종류

• <header> : 웹 페이지나 섹션의 소개 또는 탐색 콘텐츠를 나타내며, 제목, 탐색 메뉴, 검색 바, 로고와 같은 요소가 포함된다.
• <nav> 
  : 탐색 링크 블록을 정의한다. 사이트 전체 탐색(예: "홈", "회사 소개" 또는 "서비스"로의 링크) 또는
    페이지 내 특정 섹션으로 링크를 그룹화하는 데 사용한다(예: "기능", "가격" 또는 "목차").
• <main> : 웹 페이지의 주요 내용 또는 주요 섹션을 나타내며, 이 태그는 페이지당 한 번만 사용할 수 있다.
• <section> : 공통 주제나 목적을 공유하는 관련 콘텐츠를 그룹화한다. 예를 들어, 랜딩 페이지를 "기능", "이점" 또는 "사용 사례"와 같은 섹션으로 나눌 수 있다.
• <article> : 블로그 게시물, 제품 리뷰, 뉴스 기사처럼 별도로 재사용하거나 배포할 수 있는 독립적인 콘텐츠를 정의한다.
• <aside> : 주요 콘텐츠를 지원하거나 추가 컨텍스트를 제공하는 접선 또는 보충 콘텐츠를 나타낸다. 예시로 사이드바, 콜아웃 또는 관련 링크 블록이 있다. 
• <footer> : 일반적으로 탐색 링크, 연락처 정보 및 저작권 정보가 포함된 페이지 또는 섹션의 바닥글을 나타낸다.

그렇다면 시맨틱 태그를 사용하면 좋은 점은 무엇일까?

시맨틱 태그의 이점

1. 접근성 향상

: 사용자가 웹 페이지를 탐색하고 상호 작용할 수 있는 보조 기술이 문서의 구조를 더 잘 이해하고, 적절한 정보를 제공할 수 있다.
  이는 스크린 리더 사용자에게 큰 이점을 줄 수 있다.

​

2. 검색 엔진 최적화(SEO: Search Engine Optimization)

: 검색 엔진이 HTML 태그를 분석하게 되는데, 시맨틱 태그를 활용하면 구분이 쉬워지게 된다.

  이로 인해 관련 콘텐츠가 상단에 노출될 확률이 높아진다.

​

3. 코드의 가독성 및 유지 보수 향상

: 시맨틱 태그를 사용하면 태그 자체에 의미가 있기 때문에 개발자 본인뿐만 아니라,

  다른 개발자와 코드를 공유할 때에도 쉽게 코드를 파악할 수 있기 때문에 수정하는 데 시간을 절약할 수 있다.

주의할 점

시맨틱 태그에 너무 집착하면 오히려 복잡도가 증가하고 생산성이 떨어질 수 있다.

따라서, <div> 태그로 개발하고 필요할 때 시맨틱 태그로 바꿔 나가는 것이 효율적일 수 있다.

뭐든 적절하게 사용하는 것이 좋은 것 같다!