11. 의미 있게 짓기: 시맨틱 HTML과 접근성의 첫걸음

웹페이지를 처음 만들 때는 화면에만 잘 보이면 다 된 것처럼 느껴집니다. 하지만 HTML은 단순히 모양을 만드는 도구가 아닙니다. 이 부분이 메뉴인지, 본문인지, 보조 정보인지처럼 콘텐츠의 의미를 함께 알려주는 언어입니다. 이렇게 의미를 담아 구조를 만드는 방식을 시맨틱 HTML이라고 합니다.¹²

예전에는 많은 영역을 <div>로만 나누곤 했습니다. 물론 화면은 만들 수 있습니다. 하지만 코드만 봤을 때 어디가 헤더인지, 어디가 본문인지, 어디가 푸터인지 바로 알아보기 어렵습니다. 반면 <header>, <nav>, <main> 같은 태그를 쓰면 코드가 스스로 설명을 시작합니다. 사람도 이해하기 쉽고, 브라우저와 검색 엔진, 스크린 리더도 문서를 더 잘 이해할 수 있습니다.¹³

이번 장에서는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>를 이용해 의미 있는 구조를 만드는 방법을 배웁니다. 핵심은 하나입니다. 좋은 HTML은 그냥 보이는 코드가 아니라, 사람과 브라우저 모두가 이해하기 쉬운 코드다.

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

같은 화면이라도 구조를 어떻게 쓰느냐에 따라 코드의 친절함이 달라집니다.

<div class="top">사이트 제목</div>
<div class="menu">
  <a href="#">홈</a>
  <a href="#">소개</a>
  <a href="#">문의</a>
</div>
<div class="content">본문</div>
<div class="bottom">푸터</div>

이 코드는 화면은 만들 수 있지만, 의미는 거의 드러나지 않습니다. 반대로 아래 코드는 역할이 바로 보입니다.

<header>사이트 제목</header>
<nav>
  <a href="#">홈</a>
  <a href="#">소개</a>
  <a href="#">문의</a>
</nav>
<main>본문</main>
<footer>푸터</footer>

시맨틱 HTML이 중요한 이유는 크게 세 가지입니다.

• 코드를 읽고 고치기 쉬워집니다.

• 검색 엔진이 문서 구조를 이해하는 데 도움이 됩니다.

• 보조 기술이 페이지를 더 잘 안내할 수 있습니다.²³

특히 접근성에서 차이가 큽니다. 화면을 보는 사용자는 배치만 봐도 어디가 메뉴인지 짐작할 수 있지만, 스크린 리더 사용자는 HTML 구조를 바탕으로 페이지를 탐색합니다. 그래서 시맨틱 태그는 눈에 보이지 않는 안내판 역할을 합니다.⁴

랜드마크: 페이지의 표지판

접근성 문맥에서 <header>, <nav>, <main>, <aside>, <footer> 같은 요소는 랜드마크로 자주 설명됩니다. 랜드마크는 페이지의 중요한 구역을 알려 주는 표지판입니다.⁴⁵

예를 들어 스크린 리더 사용자는 랜드마크를 기준으로 "메뉴로 이동", "본문으로 이동", "푸터로 이동"처럼 큰 구역을 빠르게 건너뛸 수 있습니다. 긴 페이지에서 링크를 하나하나 지나가지 않아도 되니 훨씬 편합니다.⁴

쉽게 말해 시맨틱 태그는 페이지에 길 안내 표지판을 세우는 일입니다.

<header>: 시작을 알리는 머리말

<header>는 페이지나 섹션의 소개 부분입니다. 제목, 로고, 간단한 설명, 메뉴 같은 내용이 자주 들어갑니다.¹

<header>
  <h1>민지의 영화 노트</h1>
  <p>영화를 쉽고 재미있게 기록하는 공간</p>
</header>

<header>는 페이지 맨 위에만 쓰는 태그가 아닙니다. 글 하나의 머리말에도 쓸 수 있습니다.

<article>
  <header>
    <h2>인터스텔라 감상 후기</h2>
    <p>작성일: 2026-04-13</p>
  </header>
  <p>시간이 훌쩍 사라지는 영화였다.</p>
</article>

즉, 전체 페이지의 헤더일 수도 있고, 특정 구역의 헤더일 수도 있습니다.

<nav>: 길을 안내하는 메뉴

<nav>는 주요 이동 링크를 담는 태그입니다. 사이트의 주 메뉴, 문서 목차, 큰 이동 블록에 어울립니다.¹

<nav>
  <a href="index.html">홈</a>
  <a href="about.html">소개</a>
  <a href="contact.html">문의</a>
</nav>

여기서 중요한 점은 모든 링크를 nav에 넣는 것은 아니라는 것입니다. 본문 안의 참고 링크 하나까지 모두 nav로 감싸면 오히려 의미가 흐려집니다. nav는 어디까지나 주요 내비게이션 블록일 때 사용합니다.¹

같은 페이지에 nav가 여러 개 있다면 이름을 붙이는 것이 좋습니다.

<nav aria-label="주 메뉴">
  ...
</nav>

<nav aria-label="글 목차">
  ...
</nav>

이렇게 하면 보조 기술이 각 메뉴를 더 잘 구분할 수 있습니다.⁴

<main>: 페이지의 핵심 내용

<main>은 현재 페이지에서 가장 중요한 중심 내용을 담습니다. 다른 페이지에도 반복되는 공통 헤더, 공통 메뉴, 공통 푸터와는 구분되는 영역입니다.²³

<main>
  <h2>이번 주 추천 영화</h2>
  <p>우주를 배경으로 한 영화를 소개합니다.</p>
</main>

<main>은 보통 한 페이지에 하나만 사용합니다. 그래서 페이지의 주인공 같은 존재라고 생각하면 이해가 쉽습니다.³

<section>: 주제별로 나누는 구역

<section>은 관련 있는 내용을 하나의 주제로 묶는 태그입니다. 보통 제목과 함께 쓰는 경우가 많습니다.¹²

<section>
  <h2>개봉 예정작</h2>
  <p>다음 달에 기대되는 영화들을 소개합니다.</p>
</section>

한 페이지 안에 "소개", "공지", "추천작", "자주 묻는 질문"처럼 큰 주제 덩어리가 있다면 각각을 section으로 나누면 자연스럽습니다. 반대로 단순히 스타일을 적용하려고 묶는 것이라면 div가 더 어울릴 수 있습니다. section은 주제가 있을 때 쓰는 태그입니다.²

<article>: 혼자서도 말이 되는 콘텐츠

<article>은 독립적인 콘텐츠 단위입니다. 블로그 글, 뉴스 기사, 게시글, 댓글, 상품 카드처럼 따로 떼어 놓아도 어느 정도 의미가 통하는 내용에 사용합니다.¹

<article>
  <h2>듄 파트 2 리뷰</h2>
  <p>압도적인 화면과 음악이 인상적인 작품이다.</p>
</article>

판별 기준은 간단합니다. "이 부분만 따로 복사해서 보여줘도 하나의 콘텐츠처럼 읽힐까?" 그렇다면 article일 가능성이 큽니다.

<aside>: 옆에서 도와주는 보조 정보

<aside>는 본문과 관련은 있지만 중심은 아닌 내용을 담습니다. 관련 글, 사이드바, 작은 팁, 광고, 용어 설명 등에 잘 어울립니다.¹⁴

<aside>
  <h3>함께 보면 좋은 글</h3>
  <ul>
    <li><a href="#">SF 영화 추천 10선</a></li>
    <li><a href="#">우주 영화 음악 모음</a></li>
  </ul>
</aside>

핵심은 "있으면 좋지만, 없어도 본문 자체는 읽힌다"는 점입니다. 주인공은 아니지만 장면을 더 풍성하게 만드는 조연 같은 태그입니다.

<footer>: 마무리를 맡는 꼬리표

<footer>는 페이지나 섹션의 끝부분에 오는 정보입니다. 저작권, 작성자 정보, 연락처, 관련 링크 같은 내용이 자주 들어갑니다.¹

<footer>
  <p>© 2026 민지의 영화 노트</p>
  <p>문의: [email protected]</p>
</footer>

footer도 페이지 전체에 한 번만 쓰는 것이 아닙니다. 글 하나의 마무리 정보에도 사용할 수 있습니다.

<article>
  <h2>영화 리뷰</h2>
  <p>내용...</p>
  <footer>
    <p>작성자: 민지</p>
  </footer>
</article>

<section>과 <article>의 차이

이 둘은 가장 많이 헷갈리는 조합입니다. 아주 간단히 정리하면 이렇습니다.

• section은 주제별 구역입니다.

• article은 독립 콘텐츠입니다.

예를 들어 블로그 메인 페이지에서 "최신 리뷰"라는 큰 묶음은 section이 될 수 있고, 그 안에 들어 있는 각각의 리뷰 글은 article이 될 수 있습니다.

<section>
  <h2>최신 리뷰</h2>

  <article>
    <h3>인터스텔라 리뷰</h3>
    <p>과학과 감정이 함께 달리는 영화다.</p>
  </article>

  <article>
    <h3>마션 리뷰</h3>
    <p>감자도 살리고 긴장감도 살린다.</p>
  </article>
</section>

즉, section은 큰 주제 묶음이고 article은 그 안의 독립된 조각이라고 생각하면 편합니다. 물론 상황에 따라 article 안에 여러 section이 들어갈 수도 있습니다.¹

실전 예제: 의미 있는 페이지 골격 만들기

지금까지 배운 태그를 한 번에 모아 보면 이런 구조가 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>우주 영화 탐험대</title>
</head>
<body>
  <header>
    <h1>우주 영화 탐험대</h1>
    <p>우주를 배경으로 한 영화를 쉽게 소개합니다.</p>
  </header>

  <nav aria-label="주 메뉴">
    <ul>
      <li><a href="#intro">소개</a></li>
      <li><a href="#reviews">리뷰</a></li>
      <li><a href="#tips">감상 팁</a></li>
    </ul>
  </nav>

  <main>
    <section id="intro">
      <h2>사이트 소개</h2>
      <p>이곳은 SF 영화 초보도 부담 없이 읽을 수 있는 소개 공간입니다.</p>
    </section>

    <section id="reviews">
      <h2>최신 리뷰</h2>

      <article>
        <header>
          <h3>인터스텔라</h3>
        </header>
        <p>장대한 우주 이야기 속에 가족에 대한 감정을 깊게 담아낸 작품입니다.</p>
        <footer>
          <p>작성자: 민지</p>
        </footer>
      </article>

      <article>
        <header>
          <h3>마션</h3>
        </header>
        <p>절망적인 상황에서도 유쾌함과 생존 본능이 살아 있는 영화입니다.</p>
        <footer>
          <p>작성자: 민지</p>
        </footer>
      </article>
    </section>

    <aside>
      <h2>함께 보면 좋은 글</h2>
      <ul>
        <li><a href="#">우주 배경 영화 추천</a></li>
        <li><a href="#">초보자를 위한 SF 용어</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 우주 영화 탐험대</p>
  </footer>
</body>
</html>

이 코드는 화려하진 않지만 아주 중요한 힘이 있습니다. 페이지의 역할이 구조 안에 드러난다는 점입니다. CSS를 입히면 더 멋있어지겠지만, 그전에도 이미 문서로서 꽤 잘 서 있습니다.

초보자가 자주 하는 실수

시맨틱 태그를 배우면 처음에는 신나서 여기저기 다 쓰고 싶어집니다. 그런데 너무 많이 쓰거나, 아무 데나 쓰면 오히려 구조가 흐려질 수 있습니다.

첫째, section을 스타일용 상자처럼 남용하는 경우가 많습니다. 제목도 없고 주제도 없는데 무조건 section으로 감싸면 의미가 약해집니다.

둘째, 모든 링크를 nav에 넣는 실수가 있습니다. nav는 중요한 이동 블록일 때만 사용하세요.

셋째, main을 여러 번 쓰는 실수가 있습니다. 보통 하나의 페이지에는 하나의 main이면 충분합니다.³

넷째, 시맨틱 태그를 썼는데 제목 구조가 뒤죽박죽인 경우가 있습니다. h1, h2, h3처럼 제목 단계도 함께 논리적으로 잡아야 구조가 더 또렷해집니다.²

접근성을 위한 아주 작은 습관

시맨틱 HTML은 접근성의 출발점입니다. 거창한 기술보다 먼저, 기본 태그를 알맞게 쓰는 습관이 중요합니다.²⁴

• 주요 메뉴는 nav로 묶기

• 핵심 본문은 main에 넣기

• 관련 없는 장식용 상자에 의미 있는 태그 남발하지 않기

• 여러 개의 nav가 있으면 aria-label로 구분하기

• 구역에는 가능한 한 적절한 제목 붙이기

이 정도만 지켜도 페이지는 훨씬 이해하기 쉬워집니다. 마치 정리 안 된 방에 서랍 이름표를 붙이는 것과 비슷합니다. 같은 물건이 있어도 찾기 쉬워지죠.

마무리

시맨틱 HTML은 어려운 마법이 아닙니다. "이 부분은 무슨 역할일까?"를 한 번 더 생각하고, 그 역할에 맞는 태그를 고르는 습관입니다.

<header>는 시작을 알리고, <nav>는 길을 안내하고, <main>은 중심 내용을 담고, <section>은 주제를 나누고, <article>은 독립 콘텐츠를 만들고, <aside>는 옆에서 돕고, <footer>는 마무리합니다.

화면이 똑같아 보여도, 의미 있게 쓴 HTML은 속이 다릅니다. 그리고 그 속이 탄탄할수록 더 읽기 쉽고, 더 고치기 쉽고, 더 많은 사람이 이용하기 쉬운 웹페이지가 됩니다.

다음 장에서는 지금까지 배운 구조를 바탕으로, 실제로 한 페이지를 완성하는 미니 프로젝트를 만들어 볼 것입니다. 이제 HTML은 단순한 태그 모음이 아니라, 잘 설계된 한 편의 문서처럼 보이기 시작할 겁니다.

참고

¹HTML Semantic Elements

²2. Semantic HTML

³Structuring documents - Learn web development | MDN

⁴Accessibility Landmarks

⁵Using HTML landmark roles to improve accessibility