시맨틱 태그(Semantic Tag)란 브라우저와 개발자에게 그 **의미(Semantic)**를 명확히 설명해 주는 태그를 말합니다.
단순히 구역을 나누는 <div>나 <span>은 그 안에 무엇이 들었는지 알 수 없지만, 시맨틱 태그를 사용하면 그 내용이 '헤더'인지 '푸터'인지 단번에 알 수 있습니다.
🏗️ 주요 시맨틱 태그의 종류
웹페이지의 구조를 짤 때 마치 건물의 각 방에 명찰을 붙이는 것과 같습니다.
- <header>: 페이지나 특정 섹션의 상단 부분으로, 보통 로고나 메뉴가 들어갑니다.
- <nav>: 내비게이션(Navigation)의 약자로, 다른 페이지로 이동하는 링크들의 집합입니다.
- <main>: 문서의 독소적인 핵심 콘텐츠를 담는 영역입니다. 페이지당 한 번만 사용합니다.
- <section>: 문서 내에서 논리적으로 연관된 내용을 묶는 독립적인 구역입니다.
- <article>: 블로그 포스트나 뉴스 기사처럼 그 자체로 독립적으로 떼어내어 배포할 수 있는 완전한 글을 의미합니다.
- <aside>: 주요 내용과는 직접적인 관련이 적은 사이드바나 광고 같은 보조 내용을 담습니다.
- <footer>: 페이지 하단에 위치하며 저작권 정보, 연락처 등을 나타냅니다.
🌟 시맨틱 태그를 써야 하는 이유
단순히 보기에 좋은 코드를 넘어, 시맨틱 태그는 웹의 품질을 결정짓는 중요한 역할을 합니다.
- 검색 엔진 최적화(SEO): 구글 같은 검색 엔진 로봇이 웹사이트를 분석할 때, 어느 부분이 제목이고 어느 부분이 핵심 내용인지 더 정확하게 파악하여 검색 결과에 잘 노출해 줍니다.
- 웹 접근성 향상: 시각 장애인이 사용하는 스크린 리더 프로그램이 각 영역의 의미를 사용자에게 명확히 읽어줄 수 있습니다.
- 코드의 가독성: 개발자가 코드를 볼 때 <div>만 가득한 것보다 태그 이름만으로도 구조를 한눈에 파악할 수 있어 협업과 유지보수가 훨씬 쉬워집니다.
💡 실무자의 시선
실무에서는 모든 곳에 시맨틱 태그를 쓰려고 강박을 가질 필요는 없지만, 큰 뼈대만큼은 반드시 시맨틱하게 구성하는 것을 원칙으로 합니다.
- 의미가 없는 구역: 단순히 디자인을 위해 공간을 띄우거나 요소를 감싸야 할 때는 여전히 <div>를 쓰는 것이 정석입니다.
- Section vs Article: 이 둘을 구분하는 것이 처음엔 어렵지만, "이 부분만 떼어내서 다른 사이트에 붙여도 말이 되는가?"를 생각해보면 쉽습니다. 말이 된다면 article, 연관된 묶음일 뿐이라면 section입니다.
- 제목의 포함: 보통 하나의 시맨틱 구역(section, article 등) 안에는 해당 구역의 제목을 나타내는 <h1>~<h6> 태그가 하나씩 들어가는 것이 구조적으로 완벽합니다.
웹의 구조에 의미를 부여하는 시맨틱 태그에 대해 알아보았습니다.
Example
시맨틱 태그를 활용하여 웹사이트의 전체적인 **뼈대(Layout)**를 잡는 실전 예제 코드를 준비했습니다.
이 구조를 그대로 복사해서 VS Code의 index.html에 붙여넣고 확인해 보세요.
🏗️ 시맨틱 레이아웃 예제 코드
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 웹사이트 예제</title>
<style>
/* 구조를 한눈에 보기 위한 간단한 스타일 */
header, nav, main, section, aside, footer {
border: 1px solid #ccc;
padding: 20px;
margin: 10px 0;
}
.container { display: flex; gap: 20px; }
main { flex: 3; }
aside { flex: 1; }
</style>
</head>
<body>
<header>
<h1>나의 첫 시맨틱 페이지</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">블로그</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<section>
<h2>최신 기사</h2>
<article>
<h3>시맨틱 태그의 매력</h3>
<p>시맨틱 태그를 사용하면 웹의 구조가 명확해집니다...</p>
</article>
<article>
<h3>SEO와 접근성</h3>
<p>검색 엔진은 의미 있는 태그를 더 좋아합니다...</p>
</article>
</section>
</main>
<aside>
<h3>인기 카테고리</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</aside>
</div>
<footer>
<p>© 2026 나의 웹 프로젝트. All rights reserved.</p>
</footer>
</body>
</html>
📝 코드 포인트 리스트
이 예제에서 주목해야 할 부분들을 정리해 드립니다.
- <header> 안에 <nav>: 사이트 전체의 머리 부분 안에 주요 이동 링크들을 배치하는 가장 전형적인 패턴입니다.
- <main> 내의 <section>과 <article>: 큰 주제별로 구역(section)을 나누고, 그 안에 독립적인 내용물(article)을 담았습니다.
- <aside>의 위치: 메인 내용과는 별개로 옆에 붙는 광고나 카테고리 목록에 사용했습니다.
- <div>의 사용: 레이아웃을 위해 container라는 클래스로 감싸는 역할은 시맨틱한 의미가 없으므로 일반적인 <div>를 사용했습니다.
💡 실무자의 시선
실무에서 이 구조를 짤 때 주의할 점이 하나 있습니다.
- main 태그의 유일성: 한 페이지에 main 태그는 반드시 하나만 존재해야 합니다. 만약 페이지를 이동한다면 그 페이지의 주인공인 main 영역만 바뀌게 되는 것이죠.
- 제목 태그의 위계: section이나 article이 시작될 때는 가급적 <h2>나 <h3> 같은 제목 태그를 포함하여 이 구역이 무엇을 설명하는지 명시하는 것이 좋습니다.
이제 웹사이트의 뼈대를 잡는 방법까지 완벽하게 마스터하셨습니다!
'HTML' 카테고리의 다른 글
| HTML structure and comment (0) | 2026.02.19 |
|---|---|
| Hyper link tag and property (0) | 2026.02.18 |
| Multimedia tag and property (0) | 2026.02.18 |
| PNG JPG SVG WebP GIF characteristic, pros and cons (0) | 2026.02.18 |
| Img tag and property (0) | 2026.02.18 |