div만 쓰면 안 되나요?#
지금까지 배운 내용만으로도 웹페이지를 만들 수는 있습니다. 하지만 많은 초보자들이 모든 것을 <div> 로만 감싸는 실수를 합니다.
<!-- 나쁜 예: 의미 없는 div만 사용 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div><div> 는 아무 의미 없이 그냥 영역을 나누는 상자입니다. 그래서 코드만 봐서는 각 부분이 무슨 역할인지 알 수가 없죠.
HTML5에서는 이런 문제를 해결하기 위해 의미 있는(semantic) 태그들을 추가했습니다.
시맨틱(Semantic)이란?#
Semantic은 "의미론적인"이라는 뜻입니다.
시맨틱 태그는 <div> 처럼 그냥 영역을 나누는 게 아니라 "이 부분이 무슨 역할을 하는지" 를 태그 이름으로 표현합니다.
<!-- 좋은 예: 시맨틱 태그 사용 -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>코드를 처음 보는 사람도 각 부분의 역할을 바로 알 수 있습니다.
시맨틱 태그가 왜 중요한가?#
1. 검색 엔진 최적화(SEO) 구글, 네이버 같은 검색 엔진은 페이지 구조를 읽고 중요한 내용을 파악합니다. 시맨틱 태그를 쓰면 "이 부분이 본문입니다, 이 부분이 제목입니다"라고 명확하게 알려줄 수 있습니다.
2. 접근성 시각 장애인이 쓰는 스크린 리더가 "지금 네비게이션 영역입니다", "지금 본문 내용입니다" 라고 사용자에게 알려줄 수 있습니다.
3. 코드 가독성 나중에 코드를 수정할 때, 또는 팀원이 내 코드를 볼 때 구조를 쉽게 파악할 수 있습니다.
주요 시맨틱 태그#
<header> — 페이지 또는 섹션의 머리#
사이트 로고, 제목, 상단 네비게이션이 들어가는 영역입니다. 페이지 전체의 헤더뿐만 아니라 <article> 이나 <section> 안에서도 쓸 수 있습니다.
<header>
<h1>파란여우 블로그</h1>
<p>개발·IT를 이야기합니다</p>
</header><nav> — 네비게이션 메뉴#
다른 페이지로 이동하는 링크 모음입니다. 상단 메뉴, 사이드 메뉴, 페이지 내 목차 등에 씁니다.
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/blog">블로그</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav><main> — 페이지의 핵심 내용#
한 페이지에 하나만 써야 합니다. 헤더, 푸터, 사이드바를 제외한 실제 본문 내용이 들어갑니다.
<main>
<h2>오늘의 포스트</h2>
<p>...</p>
</main><section> — 주제별 구역#
관련 내용을 주제별로 묶을 때 씁니다. 일반적으로 제목(<h2>, <h3>)과 함께 씁니다.
<section>
<h2>최신 글</h2>
<!-- 글 목록 -->
</section>
<section>
<h2>인기 글</h2>
<!-- 글 목록 -->
</section><article> — 독립적인 콘텐츠#
그 자체로 완결된 독립적인 내용입니다. 블로그 포스트 하나, 뉴스 기사 하나, 댓글 하나처럼 다른 곳에 재배포해도 의미가 통하는 내용에 씁니다.
<article>
<h2>HTML이란 무엇인가?</h2>
<p>게시일: 2026-04-21</p>
<p>HTML은 웹페이지를 만드는 언어입니다...</p>
</article><aside> — 부가 정보#
메인 내용과 간접적으로 관련된 보조 내용입니다. 사이드바, 광고, 관련 링크 등에 씁니다.
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="#">CSS 기초</a></li>
<li><a href="#">JavaScript 시작하기</a></li>
</ul>
</aside><footer> — 페이지 또는 섹션의 꼬리#
저작권 정보, 연락처, 하단 링크 등이 들어갑니다.
<footer>
<p>© 2026 파란여우. 모든 권리 보유.</p>
<a href="/about">소개</a> |
<a href="/contact">연락처</a>
</footer>전체 페이지 구조 예시#
이 모든 태그를 조합하면 이런 구조가 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 블로그</title>
</head>
<body>
<header>
<h1>나의 블로그</h1>
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/blog">글 목록</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>최신 글</h2>
<article>
<h3>HTML 첫걸음</h3>
<p>오늘 처음 HTML을 배웠습니다...</p>
<a href="#">더 읽기</a>
</article>
<article>
<h3>CSS가 재미있다</h3>
<p>색깔을 바꾸는 게 신기합니다...</p>
<a href="#">더 읽기</a>
</article>
</section>
<aside>
<h3>카테고리</h3>
<ul>
<li>HTML (5)</li>
<li>CSS (3)</li>
<li>JavaScript (2)</li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 홍길동의 블로그</p>
</footer>
</body>
</html>div와 span은 언제 쓰나?#
시맨틱 태그를 배웠다고 해서 <div> 와 <span> 을 쓰면 안 되는 건 아닙니다.
<div>: 단순히 스타일을 적용하거나 레이아웃을 잡을 목적으로 영역을 나눌 때 (의미 없는 그룹)<span>: 텍스트 안의 일부분에 스타일을 적용할 때 (인라인 버전의 div)
<!-- div: 카드 레이아웃용 -->
<div class="card">
<article>...</article>
</div>
<!-- span: 텍스트 일부분에 색상 적용용 -->
<p>오늘 날씨는 <span style="color: blue;">맑음</span>입니다.</p>직접 해보기 ✏️#
아래 와이어프레임처럼 시맨틱 태그로 페이지 구조를 잡아보세요.
┌─────────────────────────────────┐
│ <header> 로고 + 메뉴 │
├─────────────────────────────────┤
│ <main> │
│ ┌────────────────┐ ┌─────────┐│
│ │ <section> │ │<aside> ││
│ │ <article> ×3 │ │ 사이드 ││
│ └────────────────┘ └─────────┘│
├─────────────────────────────────┤
│ <footer> 저작권 + 링크 │
└─────────────────────────────────┘
실제 내용을 채우지 않아도 괜찮습니다. 구조만 올바르게 잡고 Lorem ipsum이나 아무 텍스트나 넣어 보세요.
정리#
| 태그 | 용도 |
|---|---|
<header> | 페이지/섹션 상단 영역 |
<nav> | 네비게이션 메뉴 |
<main> | 핵심 본문 (페이지에 하나만) |
<section> | 주제별 구역 |
<article> | 독립적인 콘텐츠 |
<aside> | 부가·보조 정보 |
<footer> | 페이지/섹션 하단 영역 |
다음 편에서는 메타 태그와 파비콘(탭 아이콘)을 설정하는 방법을 배웁니다.
