02_2 웹 문서 구조를 만드는 시맨틱 태그

HTML 문서의 구조를 잡아 주는 시맨틱 태그

HTML 문서를 작성할 때 모든 영역을 <div> 요소만으로 구성할 수도 있다. 그러나 이렇게 작성하면 각 영역이 어떤 의미와 역할을 가지는지 코드를 보고 바로 이해하기 어렵다.

예를 들어 다음과 같은 코드를 살펴보자.

<div>
    <div>로고와 메뉴</div>
    <div>
        <div>주요 콘텐츠</div>
        <div>관련 정보</div>
    </div>
    <div>저작권 정보</div>
</div>

브라우저는 이 코드를 화면에 표시할 수 있지만, 각 <div>가 머리글인지, 본문인지, 메뉴인지, 부가 정보 영역인지 명확하게 알 수 없다.

HTML5에서는 이러한 문제를 해결하기 위하여 시맨틱 태그(Semantic Tag)를 제공한다.

---

1. 시맨틱 태그란?

시맨틱(Semantic)은 ‘의미가 있는’이라는 뜻이다.

따라서 시맨틱 태그(Semantic Tag)란 태그 이름만으로도 해당 영역이 어떤 의미와 역할을 가지는지 알 수 있도록 만든 HTML 태그를 의미한다. 대표적인 시맨틱 태그는 다음과 같다.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

예를 들어 다음과 같이 작성하면 문서 구조를 쉽게 이해할 수 있다.

<header>
    로고와 사이트 제목
</header>

<nav>
    주요 메뉴
</nav>

<main>
    주요 콘텐츠
</main>

<footer>
    저작권 정보
</footer>

코드만 보더라도 각 영역의 역할을 비교적 쉽게 파악할 수 있다.

---

2. 시맨틱 태그를 사용하는 이유

시맨틱 태그는 단순히 <div>를 다른 이름으로 바꾸는 것이 아니다. 웹 문서의 구조와 콘텐츠의 의미를 명확하게 표현하는 데 목적이 있다. 시맨틱 태그를 사용하면 다음과 같은 장점이 있다.

① 코드의 구조를 쉽게 이해할 수 있다

 

<div class="header"></div>
<div class="navigation"></div>
<div class="content"></div>
<div class="footer"></div>

시맨틱 태그를 사용하면 다음과 같이 표현할 수 있다.

<header></header>
<nav></nav>
<main></main>
<footer></footer>

두 번째 코드가 각 영역의 의미를 더 명확하게 전달한다.

② 웹 접근성에 도움이 된다

스크린 리더와 같은 보조 기술은 HTML 문서의 구조를 이용하여 사용자가 페이지를 탐색할 수 있도록 지원한다. 예를 들어 <nav>는 탐색 메뉴 영역이고, <main>은 페이지의 주요 콘텐츠임을 나타낸다. 따라서 시맨틱 태그를 적절하게 사용하면 웹 문서의 구조를 보다 명확하게 전달할 수 있다.

③ 검색엔진이 콘텐츠 구조를 이해하는 데 도움이 된다

검색엔진은 HTML 문서를 분석하여 페이지의 내용을 파악한다.

<article>, <section>, <header>, <main>과 같은 의미 있는 요소를 사용하면 문서의 구조와 각 콘텐츠의 역할을 명확하게 표현할 수 있다. 이를 검색엔진 최적화(SEO, Search Engine Optimization) 측면에서도 활용할 수 있다.

다만 시맨틱 태그를 사용한다고 검색 순위가 자동으로 상승한다고 단정할 수는 없다. 시맨틱 구조는 검색엔진이 문서를 이해하는 데 도움이 되는 요소 중 하나로 보는 것이 적절하다.

④ 유지보수와 협업이 쉬워진다

다음 코드가 있다고 가정하자.

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

개발자가 코드를 다시 확인할 때 각 영역의 역할을 파악하기 어렵다.

반면 다음 구조는 역할이 분명하다.

<header></header>
<main></main>
<footer></footer>

따라서 여러 개발자가 함께 작업하거나 시간이 지난 후 코드를 수정할 때에도 구조를 쉽게 이해할 수 있다.

---

3. 주요 시맨틱 태그

3.1 <header> — 머리글 영역

<header>는 웹 페이지나 특정 콘텐츠 영역의 머리글(Header)을 나타낸다.

일반적으로 다음과 같은 콘텐츠가 포함된다.

• 로고
• 사이트 제목
• 페이지 제목
• 소개 문구
• 검색 영역
• 주요 메뉴

예를 들어 다음과 같이 작성할 수 있다.

<header>
    <h1>My Portfolio</h1>
    <p>Front-end Developer</p>
</header>

웹사이트 상단 영역에서 사용할 수도 있다.

┌──────────────────────────────┐
│          HEADER              │
│    Logo     Site Title       │
└──────────────────────────────┘

<header>는 문서 전체에 한 번만 사용할 수 있는 태그가 아니다. <article>이나 <section> 내부에도 각각의 머리글이 필요한 경우 사용할 수 있다.

3.2 <nav> — 내비게이션 영역

<nav>는 사용자가 웹사이트의 주요 영역으로 이동할 수 있도록 제공하는 탐색 메뉴 영역이다.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#project">Project</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

웹사이트의 주요 메뉴, 목차, 페이지 탐색 링크 등에 사용할 수 있다.

┌──────────────────────────────┐
│            NAV               │
│ Home | About | Project       │
└──────────────────────────────┘

페이지에 존재하는 모든 링크를 반드시 <nav> 안에 넣는 것은 아니다. 주요 탐색 기능을 담당하는 링크 그룹에 사용하는 것이 적절하다.

---

3.3 <main> — 주요 콘텐츠 영역

<main>은 현재 페이지의 핵심 콘텐츠를 나타낸다.

<main>
    <h2>웹 프로그래밍</h2>
    <p>HTML과 CSS를 이용하여 웹 페이지를 제작한다.</p>
</main>

예를 들어 포트폴리오 웹사이트라면 프로젝트 소개, 자기소개, 작업물 등이 <main> 영역에 포함될 수 있다.

┌──────────────────────────────┐
│            MAIN              │
│                              │
│       주요 콘텐츠            │
│                              │
└──────────────────────────────┘

<main>은 일반적으로 하나의 페이지에서 핵심 콘텐츠 영역을 나타내므로 중복하여 여러 개의 주요 영역으로 사용하는 것은 피하는 것이 좋다.

---

3.4 <section> — 주제별 콘텐츠 영역

<section>은 서로 관련된 콘텐츠를 하나의 주제 단위로 묶을 때 사용한다.

예를 들어 포트폴리오 페이지를 다음과 같이 나눌 수 있다.

<main>

    <section>
        <h2>About Me</h2>
        <p>자기소개 내용</p>
    </section>

    <section>
        <h2>Projects</h2>
        <p>프로젝트 소개</p>
    </section>

    <section>
        <h2>Contact</h2>
        <p>연락처 정보</p>
    </section>

</main>

구조적으로 표현하면 다음과 같다.

main
├── section : About Me
├── section : Projects
└── section : Contact

<section>은 단순히 CSS 디자인을 위하여 영역을 나누는 용도로 사용하기보다는 하나의 주제나 의미 단위가 존재할 때 사용하는 것이 적절하다.

대부분의 경우 <section>에는 해당 영역을 설명하는 제목(<h2>, <h3> 등)이 함께 존재하는 것이 자연스럽다.

---

3.5 <article> — 독립적인 콘텐츠 영역

<article>은 하나의 콘텐츠만 따로 떼어내어도 의미가 있는 독립적인 콘텐츠를 나타낸다.

대표적인 예는 다음과 같다.

• 뉴스 기사
• 블로그 글
• 게시판 글
• 상품 정보
• 사용자 리뷰
• 카드형 콘텐츠

예를 들어 블로그 글은 다음과 같이 작성할 수 있다.

<article>

    <h2>HTML5란 무엇인가?</h2>

    <p>
        HTML5는 현대적인 웹 문서를 구성하기 위한
        HTML 표준이다.
    </p>

</article>

여러 개의 독립적인 콘텐츠를 반복하여 배치할 수도 있다.

<section>

    <h2>Latest Posts</h2>

    <article>
        <h3>HTML 기본 구조</h3>
        <p>HTML 문서의 기본 구조를 알아본다.</p>
    </article>

    <article>
        <h3>CSS 선택자</h3>
        <p>CSS 선택자의 기본 개념을 알아본다.</p>
    </article>

</section>

---

3.6 <aside> — 부가 콘텐츠 영역

<aside>는 주요 콘텐츠와 관련은 있지만 핵심 내용은 아닌 부가적인 정보를 나타낸다.

대표적인 예는 다음과 같다.

• 사이드바
• 관련 링크
• 추천 콘텐츠
• 광고 영역
• 추가 정보
• 작성자 프로필

<aside>
    <h2>관련 자료</h2>

    <ul>
        <li><a href="#">HTML Reference</a></li>
        <li><a href="#">CSS Reference</a></li>
    </ul>
</aside>

페이지의 오른쪽 또는 왼쪽에 배치되는 사이드바로 자주 사용되지만, <aside>라는 이름이 반드시 화면의 옆쪽에 배치되어야 한다는 의미는 아니다.

CSS를 이용하면 어느 위치에든 배치할 수 있다.

---

3.7 <footer> — 바닥글 영역

<footer>는 웹 페이지 또는 콘텐츠 영역의 바닥글(Footer)을 나타낸다.

주로 다음과 같은 정보가 포함된다.

• 저작권 정보
• 회사 정보
• 연락처
• 이용약관
• 개인정보처리방침
• 관련 링크

<footer>
    <p>Copyright © 2026 JS BAE. All Rights Reserved.</p>
</footer>

일반적인 웹사이트에서는 화면 하단에 위치한다.

┌──────────────────────────────┐
│            FOOTER            │
│ Copyright / Contact / Policy │
└──────────────────────────────┘

---

4. 시맨틱 태그를 이용한 기본 웹 문서 구조

일반적인 웹 페이지는 다음과 같은 구조로 작성할 수 있다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Semantic HTML</title>
</head>

<body>

    <header>
        <h1>My Portfolio</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#project">Project</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <main>

        <section id="about">
            <h2>About Me</h2>
            <p>자기소개 영역이다.</p>
        </section>

        <section id="project">
            <h2>Projects</h2>

            <article>
                <h3>Project 01</h3>
                <p>프로젝트 설명이다.</p>
            </article>

            <article>
                <h3>Project 02</h3>
                <p>프로젝트 설명이다.</p>
            </article>
        </section>

        <aside>
            <h2>Related Links</h2>
            <p>관련 자료를 제공한다.</p>
        </aside>

    </main>

    <footer>
        <p>Copyright © 2026</p>
    </footer>

</body>

</html>

이를 계층 구조로 표현하면 다음과 같다.

body
│
├── header
│   └── h1
│
├── nav
│   └── ul
│       └── li
│           └── a
│
├── main
│   │
│   ├── section
│   │   ├── h2
│   │   └── p
│   │
│   ├── section
│   │   ├── h2
│   │   ├── article
│   │   └── article
│   │
│   └── aside
│
└── footer

즉 시맨틱 태그는 HTML 문서의 뼈대와 의미 구조를 함께 표현하는 역할을 한다.

---

5. <div>와 시맨틱 태그의 차이

<div>는 특별한 의미를 가지지 않는 일반적인 컨테이너(Container) 요소이다.

<div>
    콘텐츠
</div>

반면 시맨틱 태그는 각 영역의 의미를 명확하게 표현한다. 예를 들어 다음 코드가 있다.

<div class="header"></div>
<div class="menu"></div>
<div class="main"></div>
<div class="footer"></div>

이를 시맨틱 태그로 변경하면 다음과 같다.

<header></header>

<nav></nav>

<main></main>

<footer></footer>

시맨틱 태그를 사용할 수 있는 경우에는 의미에 맞는 태그를 사용하는 것이 좋다. 그러나 모든 <div>를 시맨틱 태그로 바꾸어야 하는 것은 아니다. 레이아웃을 구성하거나 CSS 스타일을 적용하기 위한 의미 없는 그룹이 필요하다면 <div>를 사용할 수 있다.

예를 들어 다음과 같다.

<section>
    <div class="container">
        <h2>Projects</h2>
    </div>
</section>

여기에서 <section>은 콘텐츠의 의미적 영역을 나타내고, <div class="container">는 레이아웃을 위한 그룹 역할을 한다.

---

6. <section>과 <article>의 차이

초보자가 가장 혼동하기 쉬운 요소가 <section>과 <article>이다.

<section>

하나의 주제를 중심으로 콘텐츠를 묶는 영역이다.

<section>
    <h2>Projects</h2>
</section>

<article>

다른 영역과 분리하여도 독립적으로 의미가 있는 콘텐츠이다.

<article>
    <h3>웹사이트 리디자인 프로젝트</h3>
    <p>프로젝트 설명</p>
</article>

따라서 다음과 같이 함께 사용할 수 있다.

<section>

    <h2>Projects</h2>

    <article>
        <h3>Project 01</h3>
    </article>

    <article>
        <h3>Project 02</h3>
    </article>

</section>

구조는 다음과 같다.

Projects        ← section
│
├── Project 01  ← article
│
└── Project 02  ← article

---

7. 시맨틱 구조를 화면으로 이해하기

일반적인 웹 페이지를 구조적으로 표현하면 다음과 같다.

┌───────────────────────────────────┐
│              HEADER               │
│         Logo / Site Title         │
├───────────────────────────────────┤
│               NAV                 │
│    Home | About | Project         │
├───────────────────────────────────┤
│                                   │
│               MAIN                │
│                                   │
│   ┌───────────────────────┐       │
│   │       SECTION         │       │
│   │                       │       │
│   │   ┌───────────────┐   │       │
│   │   │    ARTICLE    │   │       │
│   │   └───────────────┘   │       │
│   │                       │       │
│   │   ┌───────────────┐   │       │
│   │   │    ARTICLE    │   │       │
│   │   └───────────────┘   │       │
│   └───────────────────────┘       │
│                                   │
│   ┌───────────────────────┐       │
│   │        ASIDE          │       │
│   └───────────────────────┘       │
│                                   │
├───────────────────────────────────┤
│              FOOTER               │
│     Copyright / Contact           │
└───────────────────────────────────┘

이 구조를 이해하면 HTML 코드를 작성하기 전에 웹 페이지 전체의 정보 구조를 먼저 설계할 수 있다.

---

8. 시맨틱 태그와 UI/UX 설계

시맨틱 태그는 단순한 HTML 문법을 넘어 UI/UX 설계에서 정의한 정보 구조(Information Architecture)를 실제 코드 구조로 변환하는 역할을 한다.

예를 들어 UI/UX 설계 단계에서 다음과 같이 페이지를 구성하였다고 가정하자.

Header
Navigation
Hero
About
Projects
Contact
Footer

이를 HTML에서는 다음과 같이 구현할 수 있다.

<header>
    ...
</header>

<nav>
    ...
</nav>

<main>

    <section id="hero">
        ...
    </section>

    <section id="about">
        ...
    </section>

    <section id="projects">
        ...
    </section>

    <section id="contact">
        ...
    </section>

</main>

<footer>
    ...
</footer>

즉,

UI/UX 정보 구조
        ↓
HTML 시맨틱 구조
        ↓
CSS 레이아웃
        ↓
JavaScript 상호작용

의 흐름으로 연결된다.

프런트엔드 개발에서는 화면을 먼저 보고 <div>를 무작정 추가하기보다, 콘텐츠의 의미와 정보 구조를 먼저 판단하고 적절한 HTML 요소를 선택하는 과정이 중요하다.

시맨틱 태그	의미	용도	예
<header>	머리글 영역	로고, 사이트 제목, 페이지 제목, 소개 문구	웹사이트 상단 영역
<nav>	탐색 영역	주요 메뉴, 페이지 이동 링크, 목차	Home, About, Project 메뉴
<main>	주요 콘텐츠 영역	현재 페이지의 핵심 내용	본문 전체 영역
<section>	주제별 구역	하나의 주제로 묶인 콘텐츠 그룹	About, Project, Contact 영역
<article>	독립 콘텐츠	별도로 떼어도 의미가 있는 콘텐츠	뉴스 기사, 블로그 글, 게시물, 프로젝트 카드
<aside>	부가 콘텐츠	관련 정보, 추천 콘텐츠, 사이드바	관련 링크, 광고, 추가 정보
<footer>	바닥글 영역	저작권, 연락처, 약관, 관련 링크	Copyright, Contact 정보

기본 구조 예시

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>semantic 구조</title>
  <style type="text/css">
* {outline: 1px solid red;
}
</style>
 </head>
 <body>
<body>

    <header>
        <h1>My Portfolio</h1>
    </header>

    <nav>
        <a href="#about">About</a>
        <a href="#project">Project</a>
    </nav>

    <main>

        <section id="about">
            <h2>About Me</h2>
        </section>

        <section id="project">
            <h2>Projects</h2>

            <article>
                <h3>Project 01</h3>
            </article>
        </section>

        <aside>
            <p>Related Links</p>
        </aside>

    </main>

    <footer>
        <p>Copyright © 2026</p>
    </footer>

</body>
 </body>
</html>

ch01_2.html

0.00MB