🏛️
EPISODE 06
header · nav · main · section · article · aside · footer
시맨틱 HTML
의미 있는 태그를 사용해 SEO와 접근성에 강한 HTML을 작성합니다. div의 무더기를 header/nav/main/section/article/aside/footer로 대체합니다.
HTML시맨틱SEO접근성
소요 시간
⏱ 60분
난이도
📊 초보
선수 조건
🎯 html-05
결과물
div 위주에서 의미 있는 태그로 재구성한 블로그 레이아웃
이 강의에서 배우는 것
- 1비시맨틱 div와 시맨틱 태그의 차이를 설명한다
- 2header/nav/main/section/article/aside/footer를 적절히 배치한다
- 3section vs article을 구분한다
- 4time/address/figure 같은 보조 시맨틱 태그를 활용한다
1. 시맨틱이란
div vs 시맨틱
html
<!-- 비시맨틱 (나쁜 예) -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<!-- 시맨틱 (좋은 예) -->
<header>...</header>
<nav>...</nav>
<main>...</main>두 코드는 브라우저에서 같아 보일 수 있지만, 시맨틱 방식은 코드의 의미가 훨씬 명확합니다.
2. 왜 시맨틱 HTML?
- SEO: 검색엔진이 페이지 내용을 더 잘 이해 → 검색 순위에 영향
- 접근성: 스크린리더가 페이지 구조를 안내 ("내비게이션 메뉴", "주요 콘텐츠 시작" 등)
- 가독성: 개발자가 코드의 역할을 바로 이해 → 유지보수·협업이 쉬워짐
3. 주요 시맨틱 태그
header
html
<header>
<h1>사이트 이름</h1>
<nav>...</nav>
</header>페이지 또는 섹션의 머리글. article 안에도 사용 가능.
nav
html
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>주요 내비게이션에만. 본문 중간 일반 링크에는 사용하지 않습니다.
main
페이지의 핵심 내용. 페이지에 하나만 사용.
section vs article
| 태그 | 독립성 | 사용 예 |
|---|---|---|
| <section> | 다른 섹션과 연관된 부분 구획 | 챕터, 탭 패널, 카테고리 묶음 |
| <article> | 독립적으로 의미가 완결되는 콘텐츠 | 블로그 글, 뉴스 기사, 댓글 |
aside
주요 콘텐츠와 간접적으로 관련된 부가 정보. 사이드바, 광고, 관련 글 등.
footer
html
<footer>
<p>© 2026 홍길동</p>
<address>이메일: hong@example.com</address>
</footer>4. 보조 시맨틱 태그
time
html
<time datetime="2026-05-10">2026년 5월 10일</time>
<time datetime="2026-05-10T14:30">오후 2시 30분</time>address
html
<address>
작성자: <a href="mailto:hong@example.com">홍길동</a><br>
서울특별시 강남구 테헤란로 123
</address>5. 전체 페이지 레이아웃 예시
html
<body>
<header>
<h1>나의 블로그</h1>
<nav>
<ul><li><a href="/">홈</a></li><li><a href="/html">HTML</a></li></ul>
</nav>
</header>
<main>
<section>
<h2>최신 글</h2>
<article>
<header>
<h3>HTML 기초 완전 정복</h3>
<time datetime="2026-05-10">2026-05-10</time>
</header>
<p>본문...</p>
<footer><p>태그: HTML, 기초</p></footer>
</article>
</section>
</main>
<aside>
<h2>카테고리</h2>
<ul><li><a href="/html">HTML (6편)</a></li></ul>
</aside>
<footer>
<p>© 2026 홍길동</p>
<address>hong@example.com</address>
</footer>
</body>6. div와 span은 언제?
시맨틱 태그로 대체할 수 없을 때 사용합니다 — 단순 스타일 적용용 묶음.
html
<div class="card-grid">
<article>...</article>
<article>...</article>
</div>
<p>가격: <span class="price">35,000원</span> (부가세 포함)</p>