시맨틱 마크업

HTML 요소를 사용할 때 시각적 표현이 아닌 콘텐츠의 의미와 구조를 기반으로 적절한 태그를 선택하여 마크업하는 방식입니다.

비시맨틱 vs 시맨틱 마크업

<!-- X 비시맨틱 마크업 — 의미 없는 div로만 구성 -->
<div id="header">
    <div class="nav">
        <div class="nav-item">홈</div>
        <div class="nav-item">소개</div>
    </div>
</div>
<div id="main">
    <div class="article">
        <div class="title">제목</div>
        <div class="content">본문 내용</div>
    </div>
    <div id="sidebar">관련 링크</div>
</div>
<div id="footer">Copyright 2026</div>

<!-- O 시맨틱 마크업 — 태그 자체가 의미를 전달 -->
<header>
    <nav>
        <a href="/">홈</a>
        <a href="/about">소개</a>
    </nav>
</header>
<main>
    <article>
        <h1>제목</h1>
        <p>본문 내용</p>
    </article>
    <aside>관련 링크</aside>
</main>
<footer>Copyright 2026</footer>

주요 시맨틱 태그

구조 태그

태그의미용도
<header>머리말페이지/섹션의 상단 영역 (로고, 네비게이션)
<nav>내비게이션주요 링크 모음
<main>핵심 콘텐츠페이지의 주요 콘텐츠 (페이지당 1개)
<article>독립 콘텐츠블로그 글, 뉴스 기사 등 독립적으로 배포 가능한 콘텐츠
<section>주제별 그룹관련 콘텐츠를 주제별로 묶음
<aside>부가 콘텐츠사이드바, 관련 링크, 광고
<footer>바닥글저작권, 연락처, 사이트맵

텍스트 태그

태그의미비시맨틱 대안
<h1>~<h6>제목 계층<div class="title">
<p>문단<div class="text">
<strong>중요한 텍스트 (강조)<b> (단순 굵게)
<em>강조 (뉘앙스 변경)<i> (단순 기울임)
<time>날짜/시간<span>2026-02-25</span>
<mark>하이라이트<span class="highlight">
<figure>멀티미디어 + 캡션 그룹<div class="image-wrapper">
<figcaption>figure의 설명<div class="caption">
<address>연락처 정보<div class="contact">
 
페이지 구조 시각화:

┌─────────────────────────────────┐
│            <header>             │
│   ┌─────────────────────────┐   │
│   │          <nav>          │   │
│   └─────────────────────────┘   │
└─────────────────────────────────┘
┌─────────────────────────┬───────┐
│         <main>          │       │
│  ┌───────────────────┐  │<aside>│
│  │     <article>     │  │       │
│  │  ┌─────────────┐  │  │       │
│  │  │  <section>  │  │  │       │
│  │  └─────────────┘  │  │       │
│  │  ┌─────────────┐  │  │       │
│  │  │  <section>  │  │  │       │
│  │  └─────────────┘  │  │       │
│  └───────────────────┘  │       │
└─────────────────────────┴───────┘
┌─────────────────────────────────┐
│            <footer>             │
└─────────────────────────────────┘

왜 시맨틱 마크업을 사용하는가?

이유설명
접근성 (Accessibility)스크린 리더가 태그의 의미를 파악하여 시각장애인에게 구조를 전달
SEO (검색 엔진 최적화)검색 엔진이 콘텐츠의 중요도와 구조를 정확히 파악
코드 가독성개발자가 HTML만 보고도 페이지 구조를 이해 가능
유지보수성의미 있는 태그로 역할이 명확하여 수정이 용이
표준 준수W3C HTML5 표준에 부합
 
[스크린 리더가 읽는 방식]

비시맨틱: <div class="nav"> → "그룹" (의미 없음)
시맨틱:   <nav>              → "내비게이션 영역" (역할 명확)

비시맨틱: <div class="title"> → "텍스트"
시맨틱:   <h1>                → "제목 레벨 1" (문서 구조 파악 가능)

[검색 엔진이 파악하는 방식]

비시맨틱: <div>블로그 글 내용</div>
  → 검색 엔진: "이건 뭔지 모르겠음"

시맨틱: <article><h1>제목</h1><p>내용</p></article>
  → 검색 엔진: "독립적인 글이고, 제목은 이거고, 본문은 이거구나"
  → 검색 결과 상위 노출 가능성 ↑

자주 하는 실수

X 잘못된 사용O 올바른 사용이유
<div> 남발적절한 시맨틱 태그 사용div는 의미 없는 컨테이너
<b>굵게</b><strong>중요</strong>b는 시각적, strong은 의미적 강조
<i>기울임</i><em>강조</em>i는 시각적, em은 의미적 강조
<br>로 간격 조정CSS margin/paddingbr은 줄바꿈 의미
<h1>을 크기 목적으로 사용CSS font-size로 크기 조절h1~h6은 제목 계층 의미
<table>로 레이아웃 구성CSS Grid/Flexboxtable은 표 데이터 전용
 
<!-- X h 태그를 크기 목적으로 사용 -->
<h1>페이지 제목</h1>
<h3>바로 소제목</h3>      <!-- h2를 건너뜀 → 구조 깨짐 -->
<h6>작은 글씨가 필요해서</h6> <!-- 크기 목적 → 잘못된 사용 -->

<!-- O 계층 순서를 지킴 -->
<h1>페이지 제목</h1>
<h2>소제목</h2>
<h3>세부 제목</h3>
<p style="font-size: 12px;">작은 글씨는 CSS로</p>

article vs section

태그의미판단 기준
<article>독립적으로 배포 가능한 콘텐츠RSS 피드로 뽑아내도 의미가 통하는가?
<section>주제별로 묶인 관련 콘텐츠 그룹문서의 개요에서 하나의 항목이 되는가?
 
<!-- article: 독립적인 블로그 글 -->
<article>
    <h2>TypeScript 입문 가이드</h2>
    <p>TypeScript는 JavaScript의 상위 집합입니다...</p>
    <time datetime="2026-02-25">2026년 2월 25일</time>
</article>

<!-- section: 한 페이지 내의 주제별 구분 -->
<section>
    <h2>경력 사항</h2>
    <p>2020~2023 A 회사 백엔드 개발자</p>
</section>
<section>
    <h2>기술 스택</h2>
    <p>Java, Spring, TypeScript</p>
</section>

CSLOG에서 보기