시맨틱 태그(Semantic Elements)란?
In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
MDN Web Docs
시맨틱 태그란 의미 요소이다. 시맨틱 태그를 올바르게 활용하여 HTML 코드를 작성하는 것을 Semantic HTML 또는 Semantic Markup이라고도 한다.
아무것도 모른채 글을 읽는다면 그래서 그게 뭔데? 소리가 절로 나오는 설명이다.
<div class="header">
<h1 class="logo"></h1>
<div class="nav"></div>
</div>
<div class="main">
<div class="section"></div>
</div><header>
<h1 class="logo"></h1>
<nav></nav>
</header>
<main>
<section></section>
</main>두 개의 HTML 코드는 동일한 내용을 담고 있다. 화면상으로 출력되는 모습도 (각 위치에 부여된 CSS가 동일하다면) 똑같다. 사실 우리에게 더 익숙한 코드의 모습은 어쩌면 전자일지도 모른다. (장미가족의 태그교실 시절에는 저런게 없었거든요)
즉, 시맨틱 태그를 굳이 쓰지 않아도 외관과 구조는 동일하게 구현할 수 있다. 그렇다면 우리는 왜 시맨틱 태그를 사용해야 할까?
의미론적 Semantic
앞서 말한 바 있듯이 시맨틱 태그는 의미 요소이다. 태그는 태그이지만 태그 자체에 의미를 가지고 있다. 일반 <div> 태그는 단순히 영역을 나눠줄 뿐이지만, <header> 태그는 그 자체로 영역 위쪽의 로고, 제목, 메뉴 등을 담고 있는 도입부 영역임을 나타낸다.
우리가 <div> 태그의 역할을 구분하기 위해선 클래스 이름을 살펴보거나, 내부에 담긴 컨텐츠 내용을 확인해보거나, 실제로 구현된 페이지를 확인해야 한다. 예시에서는 이해를 돕기 위해 클래스 이름을 각각 명확하게 붙여주었지만, 클래스 이름도 정해진 규칙(암묵적으로 알아보기 쉽게 이렇게 쓴다 하는 규칙은 있을지언정)이 있는 것이 아니라 그저 각 개인이 갖다 붙이는 이름일 뿐이다.
하지만 <header>, <nav>와 같은 시맨틱 태그는 태그 이름을 보기만 해도 어떤 역할을 하는지 바로 알 수 있다. 여기까지 봐도 시맨틱 태그를 굳이 꼭 써야할까? 하는 생각이 들 수도 있다.
시맨틱 태그의 이점
시맨틱 태그를 사용하는 것에는 다양한 이점이 있는데, 아래와 같다.
- SEO(Search Engine Optimization, 검색엔진 최적화)에 도움을 준다.
- 웹 접근성(Web accessibility, A11y)이 향상된다.
- 코드 가독성이 좋아진다.
SEO
시맨틱 마크업을 준수하면 검색 엔진이 웹 페이지의 구조와 콘텐츠를 더 잘 파악할 수 있다. 무엇을 색인화해야 하는지, 어떤 키워드와 우선 순위가 있는지, 어떤 데이터가 있는지를 태그 이름으로 구분할 수 있게 하고, 이는 검색 결과에서 웹 사이트의 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있게 한다.
웹 접근성
화면을 보지 못하는 사용자의 경우 스크린 리더를 통해 사이트를 이용하게 되는데, 이 경우 <div>태그로만 이루어진 페이지를 탐색할 경우 큰 어려움을 겪게될 수 있다. 시맨틱 태그로 마크업을 한다면 메뉴, 본문, 중요한 내용 등을 명확하게 구분할 수 있고, 스크린 리더로 웹 사이트를 탐색하는 것에 도움을 줄 수 있다.
코드 가독성
실제 화면을 확인하지 않고 코드만 봤을 때도 바로 어떤 태그가 무슨 역할을 하는지 이해할 수 있고 문서 구조를 파악하기 쉬우므로 코드 가독성이 좋아집니다. 무한 <div>에서 벗어날 수 있습니다.
<div>
<div>
<div>
<div>
<div>
<div>
<!-- 유언비어 -->
착하게 살지 않은 개발자는
옆으로 쌓는 div 피라미드 분류 지옥에 가게된다고 한다...
</div>
</div>
</div>
</div>
</div>
</div>대표적 시맨틱 태그
<header>: 영역 상단에서 로고, 제목, 검색 폼 등 소개 및 탐색에 도움을 주는 콘텐츠를 담고 있는 도입부.
<nav>: 현재 페이지 내, 또는 다른 페이지로의 링크. 메뉴, 목차, 색인 등.
<main>: 문서 <body>의 주요 콘텐츠(본문). 한 페이지에 하나 이상이 존재하면 안 됨.
<footer>: 영역 하단에서 연락처와 저작권 등 페이지에 관련된 여러 정보를 담은 영역.
<article>: 하나의 완전하고 독립적인 내용을 담고 있는 영역. 기사 하나, 글 하나, 댓글 하나 등.
<section>: HTML 문서의 독립적인 구획. 모든 <div>를 대체하는 요소가 아님에 주의할 것. 단순히 스타일을 위해서라면 <div> 사용을 권장하고 있다.
<figure>: 이미지, 다이어그램, 코드 목록, 인용문 등의 독립적인 콘텐츠를 담고 있는 영역.
<figcaption>: 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 예.
<aside>: 문서 주요 내용과 간접적으로 연관된 부분. 사이드바 혹은 콜아웃 박스.
<h1>~<h6>: 구획 제목. 문서의 위계 설정.
<time>: 시간의 특정 지점 또는 구간.(시간, 날짜, 시간 범위)
<details>와 <summary>: <details> 코드 안에 <summary> 코드를 삽입하며, 사용자가 클릭하여 상세보기를 열 수 있는 태그. <summary>는 <details>의 요약된 내용.
<mark>: 현재 맥락에 관련이 깊거나 중요해 하이라이트한 텍스트.
<strong>, <em>: 강조된 텍스트. 각각 <b>와 <i>를 대체할 수 있음.
<blockquote>: 긴 인용글
주요하게 시맨틱 태그로서 알려진 것들은 아마 <h1> 같은 제목 태그 까지겠지만, 이외의 다른 HTML 태그들도 시맨틱 마크업을 위해서 신중하게 사용할 필요가 있다.
