시맨틱 태그
<div>로만 구성된 페이지와 <header>, <nav>, <main>, <footer>로 구성된 페이지는 브라우저에서 똑같이 보일 수 있다. 하지만 코드의 의미는 완전히 다르다.
시맨틱 태그란
태그 이름 자체가 콘텐츠의 의미를 담고 있는 태그다. <div>나 <span>은 아무 의미 없는 컨테이너지만, <header>는 "이곳이 헤더다", <nav>는 "이곳이 내비게이션이다"라는 의미를 명시적으로 전달한다.
검색 엔진은 시맨틱 태그를 보고 페이지 구조를 파악한다. 스크린 리더는 <nav>를 만나면 "탐색 메뉴"라고 사용자에게 알려준다. 개발자는 코드를 보고 어느 부분이 어떤 역할인지 쉽게 파악할 수 있다.
주요 시맨틱 태그
header
페이지 또는 섹션의 머리말 영역이다. 로고, 사이트 제목, 상단 내비게이션이 보통 여기에 들어간다.
<header>
<h1>My Blog</h1>
<nav>...</nav>
</header>nav
사이트 내 주요 탐색 링크 모음이다. 메뉴, 목차, 페이지네이션이 여기에 해당한다.
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/about">소개</a></li>
<li><a href="/posts">글목록</a></li>
</ul>
</nav>main
페이지의 핵심 콘텐츠 영역이다. 한 페이지에 하나만 써야 하고, <header>, <footer>, <nav> 안에 들어가지 않는다.
<main>
<h2>오늘의 글</h2>
<p>본문 내용...</p>
</main>article
독립적으로 배포하거나 재사용할 수 있는 콘텐츠 단위다. 블로그 포스트, 뉴스 기사, 댓글 하나하나가 <article>에 해당한다.
<article>
<h2>Observer 패턴이란</h2>
<p>게시일: 2024-05-01</p>
<p>본문 내용...</p>
</article>section
주제별로 콘텐츠를 묶는 구역이다. <article>과 달리 독립적이지 않아도 된다. 보통 제목(<h2> 등)을 포함한다.
<section>
<h2>생성 패턴</h2>
<p>Singleton, Factory Method, Builder...</p>
</section>aside
본문과 간접적으로 관련된 보조 콘텐츠다. 사이드바, 광고, 관련 글 목록 등이 해당한다.
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="#">Singleton 패턴</a></li>
<li><a href="#">Factory Method 패턴</a></li>
</ul>
</aside>footer
페이지 또는 섹션의 바닥글이다. 저작권 정보, 연락처, 사이트맵 링크 등이 들어간다.
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
<a href="/privacy">개인정보처리방침</a>
</footer>article vs section
헷갈리기 쉬운 두 태그다.
| 구분 | article | section |
|---|---|---|
| 독립성 | 단독으로 떼어내도 의미 있음 | 페이지 맥락이 필요 |
| 예시 | 블로그 포스트, 댓글 | 탭 패널, 장(章) 구분 |
| 제목 | 있어도 없어도 됨 | 보통 제목 포함 |
구분이 애매하면 "이 내용을 RSS 피드로 뽑아냈을 때 의미가 있는가?"를 기준으로 삼으면 된다. 의미 있으면 <article>, 아니면 <section>.
div와 span은 언제 쓰는가
시맨틱 태그가 맞는 것이 없을 때 <div>(블록)와 <span>(인라인)을 쓴다. CSS 스타일링을 위한 묶음 용도로는 여전히 자주 쓰인다.
<div class="card">
<span class="badge">NEW</span>
<p>새로 나온 상품입니다.</p>
</div>시맨틱 태그는 "보이기 위한" 태그가 아니라 "의미를 전달하기 위한" 태그다. 처음엔 <div>로 다 만들어도 동작하지만, 구조에 맞는 태그를 쓰는 습관이 결국 검색 최적화와 유지보수 모두에서 차이를 만든다.
