HTML5 시맨틱(Semantics)이란 HTML 페이지에 의미를 부여하는 시맨틱 태그를 말합니다. HTML5에서 태그는 크게 시맨틱(semantic)과 비시맨틱(non-semantic) 두 가지 범주로 나뉘며, HTML5는 기존 HTML에 여러 가지 새로운 시맨틱 태그를 도입했습니다.
시맨틱 태그를 사용해야 하는 이유
시맨틱 태그는 단순히 화면을 꾸미는 것을 넘어, 태그 자체가 콘텐츠의 역할과 구조를 설명해 줍니다. 이를 활용하면 다음과 같은 장점이 있습니다.
- 검색 엔진이 페이지 구조를 더 잘 이해하여 SEO(검색 엔진 최적화)에 유리합니다.
- 스크린 리더 등 보조 기술이 콘텐츠를 올바르게 해석하여 웹 접근성이 향상됩니다.
- 태그 이름만으로 용도를 파악할 수 있어 코드의 가독성과 유지보수성이 높아집니다.
주요 HTML5 시맨틱 태그
대표적인 HTML5 시맨틱 태그는 다음과 같습니다.
| 태그 | 설명 |
|---|---|
| <figure> | 다양한 형식의 이미지나 그림 등 독립적인 콘텐츠를 나타냅니다. |
| <article> | 그 자체로 독립적으로 배포·재사용 가능한 완결형 콘텐츠를 나타냅니다. |
| <nav> | 메뉴 등 내비게이션 링크들을 감싸는 컨테이너를 나타냅니다. |
| <aside> | 본문과 직접 관련 없는 부가 콘텐츠(예: 사이드바)를 나타냅니다. |
| <section> | 문서 내 주제별 구역(섹션)을 나타냅니다. |
| <details> | 사용자가 펼치거나 접을 수 있는 추가 정보 영역을 나타냅니다. |
| <header> | 섹션 또는 문서 전체의 머리글(헤더)을 나타냅니다. |
| <footer> | 섹션 또는 문서 전체의 바닥글(푸터)을 나타냅니다. |
| <figcaption> | HTML 문서에서 이미지에 대한 간단한 설명(캡션)을 나타냅니다. |
| <main> | 페이지의 핵심 콘텐츠를 나타내며, 문서 내 반드시 하나만 존재해야 합니다. |
| <summary> | <details> 요소의 제목(헤더) 역할을 하는 텍스트를 나타냅니다. |
| <mark> | 참고를 위해 강조 표시된 텍스트를 나타냅니다. |
HTML5 시맨틱 예제
이제 <header>, <nav>, <section>, <article>, <footer> 태그를 활용한 HTML5 시맨틱 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>출력 결과
위 코드를 실행하면 상단에 헤더, 좌측에 내비게이션 메뉴(<nav>), 우측에 본문 영역(<article>), 하단에 푸터가 배치된 전형적인 웹 페이지 레이아웃이 화면에 출력됩니다.
