들어가며

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

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 지옥

실무에서 정말 흔히 보이는 형태부터 볼게요. 구조에 대한 설명이 전부 class 이름에만 들어 있습니다. 사람은 클래스명을 읽고 짐작할 수 있지만, 브라우저와 스크린 리더에게 클래스명은 아무 의미 없는 문자열이에요.

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 남용

카드 컴포넌트처럼 같은 모양이 반복되는 UI에서 특히 자주 나옵니다. 두 코드는 CSS만 붙이면 화면상 구별이 안 되지만, 스크린 리더에게 전달되는 정보는 완전히 다릅니다.

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. 스타일 목적으로 시맨틱 태그 사용

반대 방향의 실수도 있어요. 의미가 아니라 모양 때문에 시맨틱 태그를 고르는 경우입니다. blockquote가 기본적으로 들여쓰기를 주다 보니 인용이 아닌 곳에 쓰이곤 하는데, 스크린 리더는 그걸 그대로 “인용문"이라고 읽습니다.

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

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

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

포스트 목록처럼 같은 형태가 여러 개 나열되는 페이지에서 자주 헷갈립니다. 판단 기준은 앞에서 본 그 질문 하나예요. 따로 떼어내 RSS에 실어도 말이 되는 콘텐츠인가.

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>를 쓰려고 할 때, 잠깐 멈추고 생각해보세요:

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

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

질문으로 다시 보기

div와 section의 차이는 무엇인가요?
div는 의미 없는 범용 컨테이너로 CSS 스타일링이나 JavaScript 훅 용도로만 사용합니다. section은 관련 콘텐츠를 주제별로 묶는 시맨틱 요소로, 보통 제목(h2~h6)과 함께 사용합니다. section은 해당 콘텐츠가 문서의 독립적인 주제 묶음일 때 적합합니다.
article과 section의 차이는?
article은 단독으로 배포·공유해도 의미가 있는 독립적인 콘텐츠(블로그 포스트, 뉴스 기사, 댓글 등)에 사용합니다. section은 페이지 내에서 관련 콘텐츠를 주제별로 묶을 때 사용하며, article 안에 여러 section이 들어갈 수도 있습니다.
시맨틱 HTML이 SEO에 어떤 영향을 미치나요?
시맨틱 HTML은 검색 엔진이 콘텐츠 구조와 중요도를 파악하는 데 도움을 줍니다. header, main, article, section 등을 사용하면 Google이 핵심 콘텐츠와 각 섹션의 역할을 더 잘 이해합니다. 논리적인 제목 계층(h1~h6)과 함께 사용하면 크롤링 효율과 검색 순위에 긍정적인 영향을 줍니다.

참고 자료