시멘틱 태그(Semantic Tag) 란?
: 의미를 담고 있는 HTML 태그. 브라우저와 개발자에게 해당 영역이 어떤 의미, 역할인지 명확하게 알려주기 위해 사용된다.
먼저 시멘틱 태그를 공부하게 된 이유...
이전에 참여한 프로젝트들에서는 거의 대부분의 영역에 <div> 태그를 사용하여 작업하였었는데, 최근 프로젝트에서 받은 PR Review에서 시멘틱 태그를 사용하는 습관을 들이는게 좋다는 조언을 듣게 되었다. 그때까지만 해도 시멘틱 태그라는게 뭔지도 잘 모르는 상태였기 때문에 이참에 제대로 공부하고 배운 뒤 앞으로 개발할 때 제대로 잘 사용해보고자 공부해보게 되었다.
시멘틱 태그를 써야 하는 이유
1. 코드의 가독성 향상, 유지보수에 도움
: 코드가 <div>로만 가득하다면 코드의 구조가 한 눈에 들어오지 않고 각 영역이 어떤 역할을 담당하는지 알기 힘들다.
이때 각 영역마다 적절한 시멘틱 태그를 사용해주면 다른 개발자도 코드의 내용을 이해하기 쉽고 추후 유지보수에도 도움이 된다.
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>코드의 구조를 한 번에 파악하기 힘들다.
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>훨씬 직관적이고, 코드의 전체적인 구조를 한 번에 파악하기도 더 쉽다.
2. 접근성, SEO(검색 엔진 최적화)에 유리
: 스크린 리더가 코드의 시멘틱 태그를 읽으면 페이지의 구조를 더 쉽게 이해하고 이동할 수 있게 된다.
검색엔진 측면에서도 문서의 의미와 구조를 보다 명확하게 전달할 수 있다.
시멘틱 태그의 종류
레이아웃에 관련된 시멘틱 태그들을 위주로 정리한다.
1. <header>
: 페이지 또는 섹션의 머리말 영역에 사용된다. 이름 그대로 헤더 영역에 사용
페이지 전체에 한 번만 쓰이는 것은 아님. 여러 영역 내에서 <header>가 사용될 수 있다.
자주 함께 쓰이는 태그: <nav>, <h1> ~ <h6>, <p>, <form>
<...>
<header class="site-header">
<h1>My Blog</h1>
<nav>...</nav>
</header>
<...>
2. <nav>
: 주요 네비게이션 영역을 묶는 데에 사용된다.
자주 함께 쓰이는 태그: <ul>, <li>, <a>
<...>
<nav aria-label="주 메뉴">
<ul class="menu">
<li><a href="/">홈</a></li>
<li><a href="/my">마이페이지</a></li>
</ul>
</nav>
<...>
3. <main>
: 페이지의 핵심이 되는 본문 영역에 사용된다.
페이지의 주제 그 자체가 들어가는 영역이기 때문에 한 페이지 안에 한 번만 사용되어야 함
자주 함께 쓰이는 태그: <section>, <article>, <aside>, <h1> ~ <h6>
<...>
<main class="page-content">
<section>...</section>
<section>...</section>
</main>
<...>
4. <section>
: 페이지 안의 주제별 영역에 사용된다.
한 <section> 안의 내용은 한 가지의 주제 단위여야 하며, 제목(<h1> ~ <h6>)을 함께 써 주면 좋다.
자주 함께 쓰이는 태그: <h2> ~<h6>, <p>, <article>, <header>
<...>
<section>
<h2>공지사항</h2>
...
</section>
<...>
5. <article>
: 독립적으로 의미를 가지는 하나의 콘텐츠에 사용된다. (ex: 게시글, 댓글, 뉴스 기사 등)
<section>과의 관계: 주로 하나의 <section> 안에 여러개의 <article>이 나열되는 식으로 사용된다.
자주 함께 쓰이는 태그: <header>, <footer>, <h2> ~ <h6>, <p>, <section>
<...>
<article class="post-card">
<header>
<h2>게시글 제목</h2>
</header>
<p>게시글 요약</p>
<footer>작성자 / 날짜</footer>
</article>
<...>
6. <aside>
: 현재 페이지의 주된 내용과 간접적으로 관련된 보조 영역에 사용된다. (ex: 본문 옆 사이드바, 관련 글 목록, 광고 영역 등)
자주 함께 쓰이는 태그: <nav>, <section>, <h2> ~ <h6>, <ul>, <li>
<...>
<main>
<section>
...
</section>
<aside class="sidebar">
<h2>관련 글</h2>
<ul>
<li>...</li>
</ul>
</aside>
</main>
<...>
7. <footer>
: 페이지나 섹션의 바닥글/마무리 정보를 담는 영역에 사용된다.
주로 저작권 정보, 연락처, 작성일, 태그, 작성자 정보 ... 등의 내용이 들어간다.
<main> 안에 들어가지 않고, 그 바깥의 공통 레이아웃 부분에 위치하게 됨
자주 함께 쓰이는 태그: <p>, <nav>, <address>, <small>
<...>
<header></header>
<nav></nav>
<main>
...
</main>
<footer class="site-footer">
<small>© 2026 My Company</small>
</footer>
<...>
8. <address>
: 페이지 또는 가장 가까운 <article>의 연락처 정보를 나타내는 영역에 사용된다.
주로 이메일, 전화번호, 작성자/조직의 연락처 ... 등의 내용이 들어간다.
- 기본 CSS
: italic(기울임) 적용 => 제거방법: not-italic
자주 함께 쓰이는 태그: <a>, <p>, <br>
<...>
<footer>
<p></p>
<address className="not-italic">
<a href="mailto:contact@myservice.com" className="hover:underline">
contact@myservice.com
</a>
</address>
</footer>
<...>
9. <figure>/<figcaption>
: 이미지/코드 조각, 도표, 예시와 같은 독립적인 첨부 콘텐츠를 묶을 때 사용된다.
- 기본 CSS
: margin 적용 => 제거방법: m-0
<...>
<figure className="p-0">
<img src="..." alt="서비스 대시보드 화면" />
<figcaption>대시보드 메인 화면</figcaption>
</figure>
<...>
10. <ul>/<li>
: <ul>은 unordered list. 순서가 중요하지 않은 목록, <li>은 list item. 목록의 각 항목이다.
하나의 <ul> 안에 여러 개의 <li>가 나열되는 식으로 사용된다.
- 기본 CSS
: <ul>은 margin & padding 적용 / <li>는 불릿(●) 적용
=> 제거방법 : <ul className="m-0 list-none p-0">
ul에서 한 번에 제거함!!
<...>
<main>
<section>
<ul className="m-0 list-none p-0">
<li>...</li>
...
<li>...</li>
</ul>
</section>
</main>
<...>
11. <form>
: 사용자 입력 폼 영역에 사용된다.
자주 함께 쓰이는 태그: <label>, <input>, <button>
<...>
<form>
<label />
<input />
<button />
</form>
<...>
12. aria-label/aria-labelledby
: 특정 영역의 이름을 텍스트로 직접 붙여줘야 할 때 사용된다 (ex: 영역 내에 이름이 될 만한 텍스트가 없을 때)
aria-label은 새로운 이름을 붙이는 데 사용되고 aria-labelledby는 영역 내의 이름을 재사용할 때 사용된다.
<button>에는 aria-label이 거의 필수적으로 들어가야 한다!
<...>
<section aria-label="추천 게시글">
...
</section>
<section aria-labelledby="recommended-title">
<h2 id="recommended-title">추천 게시글</h2>
</section>
<...>