들어가며

웹 개발을 하다 보면 이런 코드를 마주하게 됩니다:

html
<div class="header">
  <div class="nav">
    <div class="nav-item">홈</div>
    <div class="nav-item">소개</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">제목</div>
    <div class="content">내용...</div>
  </div>
</div>
<div class="footer">...</div>

겉으로 보기엔 문제없어 보이죠? 하지만 이 코드에는 심각한 문제가 숨어 있어요. 스크린 리더 사용자는 이 페이지의 구조를 전혀 파악할 수 없습니다. 검색 엔진도 마찬가지고요.

사실 제가 처음 개발 일을 시작하던 15년쯤 전에는 이런 일도 있었어요. 기존 웹사이트를 리뉴얼하라는 지시를 받고 코드를 열어봤는데, <table> 태그가 겹겹이 중첩되어 있더라고요. 진짜 초보 개발자 시절이라 울면서 작업하던 기억이 나네요 😂 예전에는 테이블로 레이아웃을 잡는 게 흔한 일이었거든요.

지금 생각하면 그때의 테이블 지옥이나, 요즘의 div 지옥이나… 본질은 같아요. 의미 없는 태그로 구조를 만들면 결국 누군가는 고생하게 됩니다.

모니터 화면에 표시된 HTML 코드 - 시맨틱 HTML은 코드에 의미를 부여합니다
모니터 화면에 표시된 HTML 코드 - 시맨틱 HTML은 코드에 의미를 부여합니다
사진: Pankaj Patel / Unsplash

이 글에서는 시맨틱 HTML이 무엇인지, 왜 중요한지, 그리고 어떻게 올바르게 사용하는지 실전 예제와 함께 알아보겠습니다.

시맨틱 HTML이란?

의미 있는 마크업

**시맨틱(Semantic)**은 “의미론적"이라는 뜻이에요. 시맨틱 HTML은 태그 자체가 콘텐츠의 의미를 설명하는 HTML을 말합니다.

html
<!-- 비시맨틱: 의미 없음 -->
<div class="header">사이트 제목</div>

<!-- 시맨틱: 의미 있음 -->
<header>사이트 제목</header>

둘 다 시각적으로는 똑같이 보일 수 있어요. 하지만 브라우저, 스크린 리더, 검색 엔진에게 전달하는 정보는 완전히 다릅니다.

  • <div>: “여기에 뭔가가 있어요” (의미 없음)
  • <header>: “여기는 머리글 영역이에요” (명확한 의미)

왜 시맨틱 HTML이 중요할까요?

다양한 사람들이 컴퓨터를 사용하는 모습 - 시맨틱 HTML은 모든 사용자를 위한 것입니다
다양한 사람들이 컴퓨터를 사용하는 모습 - 시맨틱 HTML은 모든 사용자를 위한 것입니다
사진: Vitaly Gariev / Unsplash

1. 접근성 (Accessibility)

스크린 리더는 시맨틱 태그를 통해 페이지 구조를 파악합니다:

  • <nav>: “여기는 네비게이션입니다”
  • <main>: “여기가 주요 콘텐츠입니다”
  • <aside>: “여기는 부가 정보입니다”

시각장애인 사용자는 이 정보를 바탕으로 원하는 콘텐츠로 바로 이동할 수 있어요.

2. SEO (검색 엔진 최적화)

구글, 네이버 같은 검색 엔진은 시맨틱 태그를 통해 콘텐츠의 중요도를 파악합니다:

  • <article> 안의 내용 → 핵심 콘텐츠
  • <aside> 안의 내용 → 부가 정보
  • <h1> → 페이지의 주제

3. 유지보수성

6개월 후 자신의 코드를 봤을 때:

html
<!-- 이게 뭐지? -->
<div class="wrapper">
  <div class="inner">
    <div class="content-area">...</div>
  </div>
</div>

<!-- 바로 이해됨 -->
<main>
  <article>
    <section>...</section>
  </article>
</main>

핵심 시맨틱 태그 완벽 정리

문서 구조 태그

<header> - 머리글 영역

페이지나 섹션의 도입부를 나타냅니다.

html
<!-- 페이지 헤더 -->
<header>
  <h1>Codeslog</h1>
  <nav>...</nav>
</header>

<!-- 아티클 헤더 -->
<article>
  <header>
    <h2>시맨틱 HTML 가이드</h2>
    <p>작성일: 2025-12-23</p>
  </header>
  <p>본문...</p>
</article>

주의: <header>는 페이지당 하나만 있어야 하는 게 아니에요! 각 <article>, <section> 안에도 넣을 수 있습니다.

<nav> - 네비게이션

주요 탐색 링크를 그룹화합니다.

html
<nav aria-label="주요 메뉴">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/posts">포스트</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>

팁: 페이지에 여러 <nav>가 있다면 aria-label로 구분해주세요.

html
<nav aria-label="주요 메뉴">...</nav>
<nav aria-label="푸터 링크">...</nav>

<main> - 주요 콘텐츠

페이지의 핵심 콘텐츠를 감쌉니다. 페이지당 하나만 사용해야 해요.

html
<body>
  <header>...</header>
  <nav>...</nav>

  <main>
    <!-- 이 페이지의 핵심 내용 -->
    <article>...</article>
  </main>

  <footer>...</footer>
</body>

<footer> - 바닥글 영역

페이지나 섹션의 마무리 정보를 담습니다.

html
<footer>
  <p>© 2025 Codeslog. All rights reserved.</p>
  <nav aria-label="푸터 링크">
    <a href="/privacy">개인정보처리방침</a>
    <a href="/terms">이용약관</a>
  </nav>
</footer>

콘텐츠 구조 태그

웹사이트 레이아웃 와이어프레임 - 시맨틱 태그로 구조화된 페이지 모습
웹사이트 레이아웃 와이어프레임 - 시맨틱 태그로 구조화된 페이지 모습
사진: Hal Gatewood / Unsplash

<article> - 독립적인 콘텐츠

그 자체로 완결된 콘텐츠를 나타냅니다. 블로그 포스트, 뉴스 기사, 댓글 등이 해당돼요.

html
<article>
  <header>
    <h2>React Hooks 입문</h2>
    <time datetime="2025-12-23">2025년 12월 23일</time>
  </header>

  <p>React Hooks는 함수형 컴포넌트에서...</p>

  <footer>
    <p>작성자: Isaac</p>
  </footer>
</article>

핵심 기준: “이 콘텐츠만 따로 떼어내서 RSS 피드나 다른 곳에 배포할 수 있는가?”

<section> - 주제별 그룹

주제가 있는 콘텐츠 그룹을 나타냅니다. 보통 제목(<h2> 등)을 포함해요.

html
<article>
  <h1>시맨틱 HTML 가이드</h1>

  <section>
    <h2>시맨틱 HTML이란?</h2>
    <p>...</p>
  </section>

  <section>
    <h2>핵심 태그 정리</h2>
    <p>...</p>
  </section>
</article>

<aside> - 부가 콘텐츠

본문과 관련 있지만 분리해도 되는 콘텐츠입니다.

html
<main>
  <article>
    <h1>JavaScript 비동기 처리</h1>
    <p>Promise와 async/await를...</p>

    <aside>
      <h3>💡 알고 계셨나요?</h3>
      <p>Promise는 ES6에서 도입되었습니다.</p>
    </aside>
  </article>

  <aside>
    <h2>관련 포스트</h2>
    <ul>...</ul>
  </aside>
</main>

article vs section vs div

이 세 가지를 언제 써야 할지 헷갈리시죠? 간단한 기준이 있어요:

상황사용할 태그
독립적으로 배포 가능한 콘텐츠<article>
주제가 있는 콘텐츠 그룹 (제목 있음)<section>
스타일링만을 위한 그룹<div>
html
<!-- 블로그 포스트 목록 페이지 -->
<main>
  <h1>최근 포스트</h1>

  <!-- 각 포스트는 독립적 → article -->
  <article>
    <h2>포스트 제목 1</h2>
    <p>요약...</p>
  </article>

  <article>
    <h2>포스트 제목 2</h2>
    <p>요약...</p>
  </article>
</main>

<!-- 포스트 상세 페이지 -->
<article>
  <h1>포스트 제목</h1>

  <!-- 주제별 구분 → section -->
  <section>
    <h2>소개</h2>
    <p>...</p>
  </section>

  <section>
    <h2>본론</h2>
    <p>...</p>
  </section>
</article>

텍스트 레벨 시맨틱

제목 태그 <h1> ~ <h6>

계층 구조를 지켜야 합니다!

html
<!-- ❌ 잘못된 예: 레벨 건너뛰기 -->
<h1>제목</h1>
<h3>소제목</h3>  <!-- h2를 건너뜀 -->

<!-- ✅ 올바른 예 -->
<h1>제목</h1>
<h2>소제목</h2>
<h3>세부 제목</h3>
책의 목차처럼 정리된 구조 - 제목 태그도 계층적으로 사용해야 합니다
책의 목차처럼 정리된 구조 - 제목 태그도 계층적으로 사용해야 합니다
사진: Maarten van den Heuvel / Unsplash

<time> - 날짜/시간

기계가 읽을 수 있는 형식으로 날짜를 표시합니다.

html
<time datetime="2025-12-23">2025년 12월 23일</time>
<time datetime="2025-12-23T14:30:00+09:00">오후 2시 30분</time>

<figure>와 <figcaption> - 그림과 설명

이미지, 다이어그램, 코드 블록 등에 설명을 붙일 때 사용합니다.

html
<figure>
  <img src="chart.png" alt="2024년 매출 추이 그래프">
  <figcaption>그림 1. 2024년 분기별 매출 추이</figcaption>
</figure>

기타 유용한 태그들

html
<!-- 강조 (의미적) -->
<strong>매우 중요한 내용</strong>  <!-- 강한 강조 -->
<em>강조하고 싶은 내용</em>        <!-- 약한 강조 -->

<!-- 스타일링만 (비시맨틱) -->
<b>굵게</b>    <!-- strong 대신 쓰지 마세요 -->
<i>기울임</i>  <!-- em 대신 쓰지 마세요 -->

<!-- 인용 -->
<blockquote cite="https://example.com">
  인용문입니다.
</blockquote>

<!-- 약어 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 코드 -->
<code>const x = 1;</code>

<!-- 키보드 입력 -->
<kbd>Ctrl</kbd> + <kbd>C</kbd>

실전 예제: 블로그 페이지 구조화

이론은 충분히 배웠어요. 이제 실제 블로그 페이지를 시맨틱하게 구조화해볼게요.

Before: div 지옥

html
<div class="wrapper">
  <div class="header">
    <div class="logo">Codeslog</div>
    <div class="nav">
      <div class="nav-item"><a href="/">홈</a></div>
      <div class="nav-item"><a href="/posts">포스트</a></div>
    </div>
  </div>

  <div class="content">
    <div class="post">
      <div class="post-title">시맨틱 HTML 가이드</div>
      <div class="post-date">2025-12-23</div>
      <div class="post-body">
        <div class="section">
          <div class="section-title">소개</div>
          <div class="text">...</div>
        </div>
      </div>
    </div>

    <div class="sidebar">
      <div class="widget">
        <div class="widget-title">최근 포스트</div>
        <div class="widget-list">...</div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="copyright">© 2025 Codeslog</div>
  </div>
</div>

After: 시맨틱 HTML

html
<body>
  <header>
    <a href="/" class="logo">Codeslog</a>
    <nav aria-label="주요 메뉴">
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/posts">포스트</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>시맨틱 HTML 가이드</h1>
        <time datetime="2025-12-23">2025년 12월 23일</time>
      </header>

      <section>
        <h2>소개</h2>
        <p>...</p>
      </section>

      <section>
        <h2>핵심 태그</h2>
        <p>...</p>
      </section>

      <footer>
        <p>작성자: Isaac</p>
      </footer>
    </article>

    <aside>
      <section>
        <h2>최근 포스트</h2>
        <ul>...</ul>
      </section>
    </aside>
  </main>

  <footer>
    <p>© 2025 Codeslog. All rights reserved.</p>
  </footer>
</body>

개선된 점:

  • ✅ 스크린 리더가 구조를 파악할 수 있음
  • ✅ 검색 엔진이 주요 콘텐츠를 식별 가능
  • ✅ 코드만 봐도 페이지 구조가 명확함
  • ✅ CSS 클래스 의존도 감소

시맨틱 HTML과 접근성

노트북으로 작업하는 모습 - 시맨틱 HTML은 모든 사용자의 웹 경험을 향상시킵니다
노트북으로 작업하는 모습 - 시맨틱 HTML은 모든 사용자의 웹 경험을 향상시킵니다
사진: Muhammad Asim / Unsplash

랜드마크(Landmark) 역할

시맨틱 태그는 자동으로 ARIA 랜드마크 역할을 가집니다:

HTML 태그ARIA 역할
<header>banner (최상위일 때)
<nav>navigation
<main>main
<aside>complementary
<footer>contentinfo (최상위일 때)
<section>region (제목이 있을 때)
<article>article

스크린 리더 사용자는 이 랜드마크로 빠르게 이동할 수 있어요:

“네비게이션으로 이동” → <nav>로 점프 “메인 콘텐츠로 이동” → <main>으로 점프

ARIA와의 관계

시맨틱 HTML을 사용하면 ARIA 속성이 거의 필요 없어요:

html
<!-- 불필요한 ARIA -->
<div role="navigation">...</div>

<!-- 시맨틱 HTML로 충분 -->
<nav>...</nav>

<!-- 불필요한 ARIA -->
<div role="main">...</div>

<!-- 시맨틱 HTML로 충분 -->
<main>...</main>

ARIA 첫 번째 규칙: 시맨틱 HTML로 해결할 수 있다면, ARIA를 사용하지 마세요!

흔한 실수와 해결법

1. div 남용

html
<!-- ❌ -->
<div class="card">
  <div class="card-header">제목</div>
  <div class="card-body">내용</div>
</div>

<!-- ✅ -->
<article class="card">
  <header class="card-header">
    <h3>제목</h3>
  </header>
  <p class="card-body">내용</p>
</article>

2. 제목 레벨 건너뛰기

html
<!-- ❌ h2 없이 h3 사용 -->
<h1>페이지 제목</h1>
<h3>소제목</h3>

<!-- ✅ 순서대로 사용 -->
<h1>페이지 제목</h1>
<h2>소제목</h2>

3. 스타일 목적으로 시맨틱 태그 사용

html
<!-- ❌ 들여쓰기만을 위해 blockquote 사용 -->
<blockquote>
  이건 인용이 아니라 그냥 들여쓰기가 필요해서요
</blockquote>

<!-- ✅ CSS로 스타일링 -->
<p class="indented">
  이건 인용이 아니라 그냥 들여쓰기가 필요해서요
</p>

4. 하나의 main에 여러 article 대신 여러 section

html
<!-- ❌ 독립적인 콘텐츠인데 section 사용 -->
<main>
  <section>
    <h2>포스트 1</h2>
    <p>...</p>
  </section>
  <section>
    <h2>포스트 2</h2>
    <p>...</p>
  </section>
</main>

<!-- ✅ 독립적인 콘텐츠는 article -->
<main>
  <article>
    <h2>포스트 1</h2>
    <p>...</p>
  </article>
  <article>
    <h2>포스트 2</h2>
    <p>...</p>
  </article>
</main>

시맨틱 HTML 체크리스트

포스트를 작성하거나 코드 리뷰할 때 이 체크리스트를 확인해보세요:

문서 구조

  • <header>로 페이지/섹션 머리글 감싸기
  • <nav>로 주요 네비게이션 감싸기
  • <main>으로 핵심 콘텐츠 감싸기 (페이지당 1개)
  • <footer>로 바닥글 감싸기
  • <aside>로 부가 콘텐츠 분리

콘텐츠 구조

  • 독립적인 콘텐츠에 <article> 사용
  • 주제별 그룹에 <section> 사용
  • 스타일링만 필요한 곳에 <div> 사용

제목

  • <h1> 페이지당 하나만
  • 제목 레벨 순서 지키기 (h1 → h2 → h3)
  • 모든 섹션에 적절한 제목 포함

텍스트

  • 중요한 내용은 <strong>
  • 강조는 <em>
  • 날짜/시간은 <time datetime="...">
  • 약어는 <abbr title="...">

이미지

  • 모든 <img>에 의미있는 alt 속성
  • 설명이 필요한 이미지는 <figure> + <figcaption>

마치며

깔끔하게 정리된 코드 화면 - 시맨틱 HTML로 더 나은 웹을 만들어가요
깔끔하게 정리된 코드 화면 - 시맨틱 HTML로 더 나은 웹을 만들어가요
사진: Arnold Francisca / Unsplash

시맨틱 HTML은 어렵지 않아요. 핵심은 간단합니다:

“이 콘텐츠가 무엇인지 태그로 설명하자”

처음에는 어떤 태그를 써야 할지 고민될 수 있어요. 하지만 몇 번 연습하다 보면 자연스럽게 습관이 됩니다.

시맨틱 HTML을 사용하면:

  1. 접근성 향상: 스크린 리더 사용자가 페이지를 이해할 수 있어요
  2. SEO 개선: 검색 엔진이 콘텐츠를 더 잘 파악해요
  3. 유지보수성: 코드가 자기 문서화(self-documenting)됩니다
  4. 미래 대비: 웹 표준을 따르면 브라우저 호환성이 좋아져요

다음에 <div>를 쓰려고 할 때, 잠깐 멈추고 생각해보세요:

“이 콘텐츠를 더 잘 설명하는 태그가 있을까?”

우리가 작성하는 코드 한 줄이 누군가에게는 세상을 여는 문이 될 수 있어요. 더 나은 웹을 함께 만들어가요! 🚀

참고 자료