HTML에서는 웹페이지의 구조를 더 의미 있게 만들기 위해 시맨틱 태그를 사용할 수 있습니다.
시맨틱 태그는 단순히 화면을 나누는 태그가 아니라, 각 영역이 어떤 역할을 하는지 알려주는 태그입니다.
이 글에서는 웹페이지 구조를 잡을 때 자주 사용하는 시맨틱 태그를 정리합니다.
이 글에서 다루는 내용
headernavmainsectionarticleasidefooter- 시맨틱 태그를 쓰는 이유
시맨틱 태그란?
시맨틱 태그는 의미가 있는 HTML 태그입니다.
여기서 시맨틱은 “의미가 있는”이라는 뜻입니다.
예를 들어 div는 단순히 영역을 나누는 태그입니다.
<div>사이트 제목</div>
<div>메뉴</div>
<div>본문</div>
<div>하단 정보</div>
이렇게 작성해도 화면은 만들 수 있습니다.
하지만 코드만 봤을 때 각 영역이 어떤 역할을 하는지 바로 알기 어렵습니다.
반면 시맨틱 태그를 사용하면 구조가 더 명확해집니다.
<header>사이트 제목</header>
<nav>메뉴</nav>
<main>본문</main>
<footer>하단 정보</footer>
코드를 보는 사람도, 브라우저도, 검색 엔진도 페이지 구조를 더 쉽게 이해할 수 있습니다.
header 태그
header 태그는 페이지나 특정 영역의 머리말 역할을 합니다.
보통 사이트 로고, 제목, 소개 문구, 메뉴로 이어지는 영역에 사용합니다.
<header>
<h1>나의 개발 블로그</h1>
<p>HTML과 웹 개발을 공부하며 기록하는 공간입니다.</p>
</header>
header는 꼭 페이지 맨 위에서만 사용할 수 있는 것은 아닙니다.
article이나 section 안에서도 해당 영역의 제목 부분으로 사용할 수 있습니다.
하지만 처음에는 웹페이지 상단 영역이라고 이해해도 충분합니다.
nav 태그
nav 태그는 내비게이션 영역을 나타냅니다.
내비게이션은 사용자가 다른 페이지나 주요 영역으로 이동할 수 있게 도와주는 메뉴입니다.
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/posts">글 목록</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>
nav에는 보통 링크 목록이 들어갑니다.
사이트 상단 메뉴, 사이드 메뉴, 목차 메뉴 등에 사용할 수 있습니다.
단, 페이지 안의 모든 링크를 무조건 nav로 감쌀 필요는 없습니다.
주요 이동 메뉴에 사용하는 것이 좋습니다.
main 태그
main 태그는 페이지의 핵심 본문 영역을 나타냅니다.
한 페이지에서 가장 중요한 내용이 들어가는 곳입니다.
<main>
<h2>HTML 시맨틱 태그 정리</h2>
<p>이 글에서는 HTML 구조를 의미 있게 나누는 방법을 정리합니다.</p>
</main>
main은 보통 한 문서에 하나만 사용하는 것이 좋습니다.
사이트 로고, 메뉴, 푸터처럼 반복되는 공통 영역이 아니라, 해당 페이지에서만 중요한 본문 내용을 담습니다.
예를 들어 블로그 글 페이지라면 글 내용이 main 안에 들어갑니다.
section 태그
section 태그는 문서 안에서 하나의 주제별 영역을 나타냅니다.
하나의 페이지 안에서 내용을 여러 주제로 나눌 때 사용할 수 있습니다.
<section>
<h2>HTML이란?</h2>
<p>HTML은 웹페이지의 구조를 만드는 언어입니다.</p>
</section>
<section>
<h2>CSS란?</h2>
<p>CSS는 웹페이지의 디자인을 담당합니다.</p>
</section>
section은 보통 제목과 함께 사용하는 것이 자연스럽습니다.
제목 없이 단순히 묶기만 하는 용도라면 div가 더 적절할 수 있습니다.
즉, section은 “이 부분은 하나의 주제입니다”라고 말할 수 있을 때 사용하는 것이 좋습니다.
article 태그
article 태그는 독립적으로 읽을 수 있는 콘텐츠를 나타냅니다.
예를 들어 블로그 글, 뉴스 기사, 게시글, 댓글 같은 콘텐츠에 사용할 수 있습니다.
<article>
<h2>HTML table 태그로 표 만들기</h2>
<p>HTML에서 표를 만드는 방법을 정리한 글입니다.</p>
</article>
article은 그 부분만 따로 떼어내도 하나의 콘텐츠로 이해될 수 있을 때 사용합니다.
블로그 목록에서 각 글 카드도 article로 표현할 수 있습니다.
<article>
<h2>HTML 폼 태그 기초 정리하기</h2>
<p>사용자 입력을 받을 때 사용하는 폼 태그를 정리합니다.</p>
</article>
aside 태그
aside 태그는 본문과 직접적인 핵심 내용은 아니지만, 관련된 보조 정보를 나타냅니다.
예를 들어 사이드바, 추천 글, 광고, 관련 링크, 부가 설명 등에 사용할 수 있습니다.
<aside>
<h2>관련 글</h2>
<ul>
<li><a href="/posts/html-form-tags-basics">HTML 폼 태그 기초 정리하기</a></li>
<li><a href="/posts/html-table-tags-basics">HTML table 태그로 표 만들기</a></li>
</ul>
</aside>
aside는 메인 콘텐츠를 보조하는 영역이라고 생각하면 됩니다.
본문을 읽는 데 꼭 필요하지는 않지만, 함께 보면 도움이 되는 정보를 담습니다.
footer 태그
footer 태그는 페이지나 특정 영역의 하단 정보를 나타냅니다.
보통 저작권 정보, 연락처, 사이트 정보, 관련 링크 등이 들어갑니다.
<footer>
<p>© 2026 나의 개발 블로그. All rights reserved.</p>
</footer>
footer도 header처럼 페이지 전체에만 사용할 수 있는 것은 아닙니다.
article 안에서 글 작성자 정보나 작성일 같은 하단 정보를 나타낼 때도 사용할 수 있습니다.
하지만 처음에는 웹페이지 하단 영역이라고 이해하면 됩니다.
시맨틱 태그로 만든 기본 구조
아래는 시맨틱 태그를 사용해 만든 간단한 웹페이지 구조입니다.
<header>
<h1>나의 개발 블로그</h1>
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/posts">글 목록</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>최근 글</h2>
<article>
<h3>HTML 폼 태그 기초 정리하기</h3>
<p>사용자 입력을 받을 때 사용하는 폼 태그를 정리합니다.</p>
</article>
<article>
<h3>HTML table 태그로 표 만들기</h3>
<p>HTML에서 표를 만드는 방법을 정리합니다.</p>
</article>
</section>
<aside>
<h2>추천 글</h2>
<p>HTML 기본 구조부터 차근차근 학습해보세요.</p>
</aside>
</main>
<footer>
<p>© 2026 나의 개발 블로그</p>
</footer>
이 구조를 보면 각 영역의 역할이 비교적 분명합니다.
header: 사이트 상단nav: 이동 메뉴main: 핵심 본문section: 주제별 영역article: 독립적인 글 콘텐츠aside: 보조 정보footer: 하단 정보
div만 사용한 구조와 비교하기
시맨틱 태그를 사용하지 않고 div만 사용하면 다음처럼 작성할 수도 있습니다.
<div class="header">상단</div>
<div class="nav">메뉴</div>
<div class="main">본문</div>
<div class="footer">하단</div>
이 방식도 CSS를 적용하면 화면은 만들 수 있습니다.
하지만 HTML 태그 자체에는 의미가 없습니다.
반면 시맨틱 태그를 사용하면 class 이름을 자세히 보지 않아도 구조를 이해하기 쉽습니다.
<header>상단</header>
<nav>메뉴</nav>
<main>본문</main>
<footer>하단</footer>
코드의 의도가 더 분명해집니다.
시맨틱 태그를 쓰는 이유
시맨틱 태그를 사용하는 이유는 단순히 코드가 보기 좋아서만은 아닙니다.
1. 코드 구조를 이해하기 쉽다
div만 많이 사용하면 코드가 길어졌을 때 어떤 영역인지 파악하기 어렵습니다.
하지만 header, main, footer처럼 의미 있는 태그를 사용하면 구조를 빠르게 이해할 수 있습니다.
2. 검색 엔진이 문서를 이해하는 데 도움이 된다
검색 엔진은 HTML 구조를 참고해서 페이지 내용을 이해합니다.
main, article, section 같은 태그를 적절히 사용하면 문서의 중요한 영역을 더 명확하게 전달할 수 있습니다.
3. 접근성에 도움이 된다
스크린 리더 같은 보조 기술은 페이지 구조를 사용자에게 전달할 수 있습니다.
시맨틱 태그를 잘 사용하면 사용자가 페이지의 상단, 본문, 메뉴, 하단 영역을 더 쉽게 파악할 수 있습니다.
4. 유지보수하기 좋다
개발자가 나중에 코드를 다시 볼 때도 구조가 명확하면 수정하기 쉽습니다.
협업할 때도 “여기가 본문이고, 여기가 사이드 영역이다”라는 의도를 빠르게 공유할 수 있습니다.
section과 article 차이
section과 article은 처음 배울 때 가장 헷갈리기 쉽습니다.
간단히 정리하면 다음과 같습니다.
| 태그 | 의미 | 예시 |
|---|---|---|
section | 하나의 주제 영역 | 소개 섹션, 기능 설명 섹션 |
article | 독립적인 콘텐츠 | 블로그 글, 뉴스 기사, 게시글 |
section은 페이지 안에서 주제를 나누는 느낌입니다.
article은 그 부분만 따로 떼어도 하나의 글이나 콘텐츠로 볼 수 있는 느낌입니다.
예를 들어 블로그 메인 페이지에서 “최근 글” 영역은 section으로 감쌀 수 있습니다.
그 안에 들어가는 각각의 글 카드는 article로 표현할 수 있습니다.
<section>
<h2>최근 글</h2>
<article>
<h3>HTML 폼 태그 기초 정리하기</h3>
<p>폼 태그의 기본 사용법을 정리한 글입니다.</p>
</article>
<article>
<h3>HTML table 태그로 표 만들기</h3>
<p>표를 만드는 기본 태그를 정리한 글입니다.</p>
</article>
</section>
main을 사용할 때 주의할 점
main은 페이지의 핵심 내용을 담는 태그입니다.
그래서 한 문서 안에서 여러 번 사용하는 것은 피하는 것이 좋습니다.
<!-- 좋지 않은 예시 -->
<main>첫 번째 본문</main>
<main>두 번째 본문</main>
일반적으로는 아래처럼 하나의 main 안에 여러 섹션을 넣습니다.
<main>
<section>
<h2>소개</h2>
<p>서비스를 소개하는 영역입니다.</p>
</section>
<section>
<h2>기능</h2>
<p>주요 기능을 설명하는 영역입니다.</p>
</section>
</main>
시맨틱 태그를 무조건 써야 할까?
시맨틱 태그가 좋다고 해서 모든 영역을 억지로 시맨틱 태그로 바꿀 필요는 없습니다.
단순히 디자인을 위해 묶는 영역이라면 div를 사용해도 됩니다.
예를 들어 카드 안에서 스타일을 맞추기 위한 박스라면 div가 자연스럽습니다.
<article>
<div class="card-content">
<h2>게시글 제목</h2>
<p>게시글 요약입니다.</p>
</div>
</article>
즉, 의미가 있는 영역에는 시맨틱 태그를 사용하고, 단순한 스타일 묶음에는 div를 사용하면 됩니다.
정리
시맨틱 태그는 의미가 있는 HTML 태그입니다.
header는 상단 영역을 나타냅니다.
nav는 주요 이동 메뉴를 나타냅니다.
main은 페이지의 핵심 본문을 나타냅니다.
section은 하나의 주제별 영역을 나타냅니다.
article은 독립적으로 읽을 수 있는 콘텐츠를 나타냅니다.
aside는 본문을 보조하는 관련 정보를 나타냅니다.
footer는 하단 정보를 나타냅니다.
시맨틱 태그를 사용하면 코드 구조가 더 명확해지고, 검색 엔진과 보조 기술이 페이지를 이해하는 데도 도움이 됩니다.
중요한 기준은 간단합니다.
의미가 있는 영역에는 시맨틱 태그를 사용하고, 단순히 디자인을 위해 묶는 영역에는 div를 사용하면 됩니다.