HTML 시맨틱 태그 정리 – header, nav, section, footer의 차이

HTML 시맨틱 태그 정리 – header, nav, section, footer의 차이

지난 글에서는 폼과 input 태그를 이용해 로그인 화면을 만들어 보았습니다. 지금까지 HTML로 제목, 문단, 표, 입력창 등 다양한 요소를 만들 수 있게 되었는데, 이제는 이 요소들을 어떻게 구조적으로 배치할지 고민할 차례입니다. 처음 HTML을 배우면 모든 영역을 <div>로만 나누기 쉽지만, 요즘 웹 개발에서는 각 영역의 의미를 담은 시맨틱 태그를 사용하는 것이 기본입니다. 오늘은 시맨틱 태그가 무엇인지, 왜 써야 하는지, 그리고 header·nav·section·article·aside·footer를 각각 언제 사용하는지 예제와 함께 정리해 보겠습니다.

1. 시맨틱 태그란 무엇인가요?

‘시맨틱(Semantic)’은 우리말로 ‘의미의, 의미론적인’이라는 뜻입니다. 즉 시맨틱 태그는 이름만 보고도 그 안에 어떤 내용이 들어 있는지 알 수 있는 태그를 말합니다.

예를 들어 <div>는 단순히 영역을 묶는 상자일 뿐, 그 안에 메뉴가 있는지 본문이 있는지 알 수 없습니다. 반면 <nav>라고 쓰면 “여기는 메뉴 영역이다”, <footer>라고 쓰면 “여기는 페이지 하단 정보다”라는 의미가 태그 자체에 담깁니다. 화면에 보이는 모습은 div와 거의 같지만, 코드를 읽는 사람과 프로그램 모두가 구조를 쉽게 이해할 수 있게 됩니다.

책에 비유하면 div만 쓴 페이지는 목차도, 장 제목도 없이 글자만 빼곡한 책과 같습니다. 시맨틱 태그를 쓴 페이지는 표지, 목차, 본문, 부록이 명확히 구분된 잘 정리된 책이라고 할 수 있습니다.

2. 시맨틱 태그를 써야 하는 3가지 이유

① 검색 엔진 최적화(SEO)에 유리합니다
구글이나 네이버 같은 검색 엔진은 로봇이 웹페이지 코드를 읽어 내용을 파악합니다. 시맨틱 태그를 사용하면 어디가 핵심 본문이고 어디가 메뉴나 광고인지 로봇이 명확히 구분할 수 있어, 페이지 내용을 더 정확하게 이해하는 데 도움이 됩니다.

② 웹 접근성이 좋아집니다
시각장애인은 화면 낭독기(스크린 리더)라는 프로그램으로 웹페이지를 이용합니다. 시맨틱 태그가 있으면 화면 낭독기가 “탐색 메뉴”, “본문” 같은 영역을 안내해 주고, 사용자는 원하는 영역으로 바로 이동할 수 있습니다. 모든 사람이 불편 없이 웹을 이용할 수 있게 하는 것은 웹 개발자의 중요한 책임입니다.

③ 코드를 읽고 관리하기 쉬워집니다
div만 수십 개 겹쳐 있는 코드는 닫는 태그가 어느 영역의 끝인지 찾기조차 어렵습니다. 시맨틱 태그를 쓰면 몇 달 뒤에 다시 코드를 열어 보거나 다른 사람과 함께 작업할 때도 구조를 금방 파악할 수 있습니다.

3. 한눈에 보는 시맨틱 태그 레이아웃

일반적인 블로그나 뉴스 사이트를 시맨틱 태그로 나누면 아래와 같은 구조가 됩니다.

이 구조는 실제로 수많은 웹사이트에서 사용되는 전형적인 형태이므로, 그림으로 한 번 익혀 두면 이후 다른 사이트의 코드를 볼 때도 훨씬 쉽게 이해할 수 있습니다.

4. 주요 시맨틱 태그 하나씩 알아보기

① <header> – 머리말 영역
페이지나 특정 구역의 도입부를 나타냅니다. 보통 사이트 로고, 사이트 제목, 검색창 등이 들어갑니다. 많은 분이 “페이지 맨 위에 한 번만 쓰는 태그”로 알고 있지만, 사실 article이나 section 안에서도 그 구역의 제목 부분을 감싸는 용도로 여러 번 사용할 수 있습니다.

② <nav> – 내비게이션(메뉴) 영역
사이트의 주요 이동 링크를 모아 둔 곳입니다. 상단 메뉴바, 사이드 메뉴, 목차 등에 사용합니다. 단, 페이지 안의 모든 링크를 nav로 감쌀 필요는 없고, 사이트를 탐색하는 핵심 메뉴에만 사용하는 것이 원칙입니다.

③ <main> – 핵심 본문 영역
페이지의 가장 중요한 고유 내용을 담습니다. 헤더, 메뉴, 푸터처럼 여러 페이지에 반복되는 부분은 제외하고, 그 페이지만의 내용을 넣습니다. main은 한 페이지에 하나만 보이도록 사용해야 합니다.

④ <section> – 주제별 구역
관련된 내용을 주제별로 묶는 태그입니다. 예를 들어 회사 소개 페이지라면 “회사 연혁”, “사업 분야”, “오시는 길”을 각각 section으로 나눌 수 있습니다. section 안에는 보통 h2나 h3 같은 제목이 함께 들어갑니다.

⑤ <article> – 독립적인 콘텐츠
그 부분만 따로 떼어내도 하나의 완결된 내용이 되는 콘텐츠를 감쌉니다. 블로그 글 한 편, 뉴스 기사 하나, 댓글 하나, 상품 카드 하나 등이 대표적입니다.

⑥ <aside> – 부가 정보
본문과 관련은 있지만 없어도 본문 이해에 지장이 없는 보조 내용입니다. 사이드바의 인기 글 목록, 광고, 관련 링크, 본문 옆의 참고 박스 등에 사용합니다.

⑦ <footer> – 꼬리말 영역
페이지나 구역의 마무리 정보를 담습니다. 저작권 표시, 회사 주소, 연락처, 개인정보처리방침 링크 등이 들어갑니다. header와 마찬가지로 article 안에서 작성자 정보나 작성일을 표시하는 용도로도 쓸 수 있습니다.

5. 헷갈리는 태그 비교: section vs article vs div

시맨틱 태그를 처음 배울 때 가장 많이 헷갈리는 것이 section, article, div의 구분입니다. 다음 기준표로 정리하면 쉽게 판단할 수 있습니다.

정리하면, 먼저 “독립적인 콘텐츠인가?”를 묻고 그렇다면 article, 아니라면 “주제로 묶이는가?”를 물어 section, 둘 다 아니고 단지 디자인을 위한 묶음이라면 div를 사용하면 됩니다. div가 나쁜 태그라는 뜻은 아니며, 의미가 필요 없는 곳에서는 여전히 div를 쓰는 것이 올바릅니다.

6. div로 만든 코드 vs 시맨틱 태그로 만든 코드

같은 페이지를 두 가지 방식으로 작성해 비교해 보겠습니다. 먼저 div만 사용한 코드입니다.

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

다음은 같은 구조를 시맨틱 태그로 바꾼 코드입니다.

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>

두 코드는 브라우저에서 보이는 모습이 거의 같지만, 두 번째 코드는 클래스 이름을 일일이 붙이지 않아도 각 영역의 역할이 바로 드러납니다. 코드도 더 짧고 깔끔해졌습니다.

7. 실습: 시맨틱 태그로 블로그 페이지 만들기

이제 배운 태그를 모두 활용해 간단한 블로그 페이지를 만들어 보겠습니다. 아래 코드를 blog.html로 저장해 브라우저에서 열어보세요. 영역 구분이 잘 보이도록 최소한의 CSS를 넣었습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>코딩 공부 블로그</title>
  <style>
    body { font-family: sans-serif; margin: 0; }
    header, nav, main, aside, footer { padding: 16px; }
    header { background: #ffd8cc; }
    nav { background: #ffe9c7; }
    nav a { margin-right: 12px; }
    .wrap { display: flex; }
    main { flex: 3; }
    aside { flex: 1; background: #e3f6e3; }
    article { border-bottom: 1px solid #ddd; padding-bottom: 12px; }
    footer { background: #e8e8e8; text-align: center; }
  </style>
</head>
<body>
  <header>
    <h1>코딩 공부 블로그</h1>
  </header>

  <nav>
    <a href="#">홈</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">문의</a>
  </nav>

  <div class="wrap">
    <main>
      <article>
        <header>
          <h2>HTML 시맨틱 태그 정리</h2>
          <p>작성일: 2026년 10월</p>
        </header>
        <section>
          <h3>시맨틱 태그란?</h3>
          <p>의미를 가진 태그를 말합니다.</p>
        </section>
        <section>
          <h3>왜 써야 할까?</h3>
          <p>검색 엔진과 웹 접근성에 유리합니다.</p>
        </section>
      </article>
    </main>

    <aside>
      <h3>인기 글</h3>
      <ul>
        <li>HTML 기초 정리</li>
        <li>HTML 표 만들기</li>
      </ul>
    </aside>
  </div>

  <footer>
    <p>© 2026 코딩 공부 블로그. All rights reserved.</p>
  </footer>
</body>
</html>

코드를 살펴보면 article 안에 다시 header가 들어가 글 제목과 작성일을 감싸고, 본문은 주제별로 section으로 나뉘어 있습니다. 이처럼 시맨틱 태그는 서로 겹쳐서 사용할 수 있으며, 의미에 맞게 계층을 만들어 주는 것이 핵심입니다. 중간의 <div class="wrap">은 main과 aside를 가로로 나란히 배치하기 위한 디자인용 묶음이므로 div를 사용한 것이 올바른 선택입니다.

8. 시맨틱 태그를 쓸 때 자주 하는 실수

• main을 여러 개 사용 : main은 페이지의 핵심 본문이므로 한 페이지에 하나만 보여야 합니다.
• 모든 링크 묶음을 nav로 작성 : 푸터의 약관 링크 몇 개까지 nav로 감쌀 필요는 없습니다. 주요 탐색 메뉴에만 사용하세요.
• 디자인 목적으로 section 남용 : 단순히 배경색을 주거나 정렬하려고 묶는 것이라면 section이 아니라 div가 맞습니다.
• 제목 없는 section : section은 주제를 가진 구역이므로 h2~h6 같은 제목을 함께 넣는 것이 권장됩니다. 제목을 붙이기 어렵다면 div가 더 적절한지 다시 생각해 보세요.
• header를 페이지에 한 번만 써야 한다고 오해 : header와 footer는 article이나 section 안에서도 해당 구역의 머리말·꼬리말로 여러 번 사용할 수 있습니다.

마무리하며

오늘은 의미를 담은 HTML 태그인 시맨틱 태그에 대해 알아보았습니다. header는 머리말, nav는 메뉴, main은 핵심 본문, section은 주제별 구역, article은 독립적인 콘텐츠, aside는 부가 정보, footer는 꼬리말이라는 역할만 기억해도 웹페이지 구조를 훨씬 체계적으로 설계할 수 있습니다. 화면에 보이는 결과는 div와 큰 차이가 없어 보여도, 검색 엔진과 화면 낭독기, 그리고 미래의 나에게는 큰 차이를 만들어 냅니다. 이번 주에는 자주 방문하는 웹사이트에서 마우스 오른쪽 버튼을 눌러 ‘페이지 소스 보기’로 어떤 시맨틱 태그가 쓰였는지 찾아보는 것도 좋은 공부가 됩니다. 다음 글에서는 HTML 이미지·동영상 넣는 방법과 alt 속성이 중요한 이유를 다뤄보겠습니다. 궁금한 점은 댓글로 남겨 주세요!