한 줄 요약 — <header>·<nav>·<main>·<section>·<article>·<aside>·<footer> 일곱 개는 "이 칸이 무엇을 담는 자리인가"를 이름으로 말해 주는 태그입니다. <div>도 똑같이 칸을 만들지만, 시맨틱 태그는 검색 엔진과 보조기기에게 그 칸의 역할까지 같이 알려 줍니다.

학습 목표#

  • 시맨틱 태그 7개가 각각 어떤 자리를 가리키는지 한 줄로 설명할 수 있다.
  • <section>과 <article>을 "혼자 떼어내 의미가 통하는가"로 가른다.
  • 한 페이지에 <main>을 하나만 두는 이유를 안다.
  • 기존 <div>로 채워진 마크업을 시맨틱 구조로 다시 짤 수 있다.

오늘의 비유 — 신문의 1면·기사·사이드 광고·하단 발행정보 구역#

신문 한 부를 펼쳐 봅니다. 가장 위쪽엔 신문 이름과 발행 날짜가 큼직하게 적힌 제호가 있습니다. 그 바로 아래 가로띠에는 "정치 · 경제 · 사회 · 문화"처럼 섹션을 안내하는 목록이 적혀 있습니다. 그 아래 가장 넓은 자리가 그날의 본 기사가 실리는 곳이고, 본문 옆 좁은 단에는 광고나 관련 박스 기사가 끼어 있습니다. 페이지 맨 아래에는 발행처 주소와 연락처가 작은 글씨로 박혀 있습니다.

웹 페이지도 신문과 거의 같은 구역으로 나뉩니다. 위쪽 제호 띠가 <header>, 그 아래 섹션 안내가 <nav>, 본 기사가 실리는 가운데 큰 자리가 <main>, 그 안에 한 기사씩 끊어 두는 단위가 <article>이고, 한 기사 안에서 작게 나뉘는 부분이 <section>입니다. 본문 옆에 끼는 광고나 관련 박스가 <aside>, 페이지 맨 아래의 발행 정보가 <footer>입니다. 오늘은 이 일곱 칸을 한 번에 정리합니다.

핵심 개념#

가장 단순한 시맨틱 페이지는 이렇게 생겼습니다.

<body>
  <header>
    <h1>오늘의 신문</h1>
    <nav>
      <a href="/politics">정치</a>
      <a href="/economy">경제</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>오늘의 1면</h2>
      <p>본문...</p>
    </article>
    <aside>
      <h2>관련 박스 기사</h2>
      <p>곁가지 정보...</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 오늘의 신문사</p>
  </footer>
</body>

<div>로 채워도 화면에는 똑같이 그려집니다. 차이는 의미입니다. 시맨틱 태그는 이름 자체가 "이 칸의 역할이 무엇인가"를 말해 줍니다. 검색 엔진은 이 정보를 보고 페이지의 어디가 본문이고 어디가 곁가지인지 가늠하고, 보조기기는 사용자에게 "본문으로 바로 가기" 같은 메뉴를 자동으로 제공할 수 있습니다.

header와 nav — 신문 위쪽의 제호와 섹션 띠#

<header>(머리말)은 페이지나 한 구역의 맨 앞에 놓이는 머리띠입니다. 신문 위쪽의 제호처럼 사이트 로고, 제목, 메인 메뉴를 담는 자리로 가장 자주 쓰입니다.

<header>
  <h1>오늘의 신문</h1>
  <p>2026년 5월 20일 수요일</p>
</header>

<nav>(navigation, 길안내)는 다른 페이지로 가는 링크 묶음을 두는 자리입니다. 신문에서 "정치·경제·사회"를 줄지어 적어 둔 그 띠입니다.

<nav>
  <ul>
    <li><a href="/politics">정치</a></li>
    <li><a href="/economy">경제</a></li>
    <li><a href="/culture">문화</a></li>
  </ul>
</nav>

페이지 안의 모든 링크를 <nav>로 감싸지는 않습니다. 본문 안의 각주성 링크는 그냥 본문 안에 두고, 사이트 전체나 큰 섹션을 오가는 메뉴 같은 묶음일 때만 <nav>로 둡니다.

main — 신문 1면 본 자리, 단 한 자리#

<main>(본문)은 그 페이지의 핵심 내용이 실리는 자리입니다. 신문에서 제호·광고·발행정보를 뺀, 그날의 본 기사가 실리는 가운데 영역입니다. 한 페이지에 하나만 둡니다.

<main>
  <h2>오늘의 1면 기사</h2>
  <p>본문...</p>
</main>

<main>이 페이지에 두 개 있는 신문은 어색합니다. 본 기사가 둘이라기보다 "본 기사가 어디 있는지 모르겠다"는 신호가 됩니다. 보조기기가 "본문으로 바로 가기"를 제공할 때도 어디로 데려가야 할지 헷갈립니다.

section과 article — 한 기사인가, 그 안의 한 토막인가#

여기가 가장 자주 헷갈리는 자리입니다. 갈림길은 단순합니다. **혼자 떼어내도 의미가 통하는 한 덩어리면 <article>, 그 덩어리 안의 한 토막이면 <section>**입니다.

<article>
  <h2>새 도서관 개관 — 동네에 책 5만 권이 더 생겼다</h2>
  <p>본문 도입...</p>

  <section>
    <h3>개관 시간과 위치</h3>
    <p>...</p>
  </section>

  <section>
    <h3>이용 방법</h3>
    <p>...</p>
  </section>
</article>

신문 기사 하나가 <article>입니다. 그 기사를 통째로 잘라 다른 신문에 옮겨도 의미가 통합니다. 한 기사 안에서 소제목으로 나뉘는 작은 토막들이 <section>입니다. "개관 시간과 위치"라는 토막만 따로 떼면 무엇에 관한 글인지 알 수 없어집니다.

블로그 글 한 편, 뉴스 기사 한 편, 제품 카드 한 장처럼 "이 자체로 한 단위"인 것은 <article>입니다. 그 안의 단락 그룹은 <section>입니다.

aside — 본문 옆 곁가지#

<aside>(옆 자리)는 본문에 직접 속하진 않지만 주변에 함께 두면 좋은 정보입니다. 신문에서 본문 옆에 끼어 있는 박스 기사, 관련 광고, 추천 기사 같은 자리입니다.

<aside>
  <h2>관련 기사</h2>
  <ul>
    <li><a href="/library-tour">새 도서관 둘러보기</a></li>
    <li><a href="/reading-week">독서 주간 안내</a></li>
  </ul>
</aside>

본문이 사라져도 의미가 통하는 곁가지면 <aside>, 본문의 일부면 <aside>가 아닙니다.

footer — 발행 정보가 들어가는 맨 아래 띠#

<footer>(꼬리말)는 페이지나 한 구역의 맨 아래에 놓이는 마감 띠입니다. 신문 맨 아래의 발행 정보처럼 저작권, 연락처, 사이트 지도 같은 정보가 들어갑니다.

<footer>
  <p>© 2026 오늘의 신문사</p>
  <p>제호 등록번호 1234-5678</p>
</footer>

<header>와 마찬가지로 페이지 전체의 꼬리말일 수도 있고, <article> 한 편의 꼬리말("작성자: …, 게시일: …")일 수도 있습니다. 위치가 아니라 역할이 기준입니다.

함께 따라하기 — div 덩어리 페이지를 신문으로 리팩터링#

지난 회 폴더에 day-08/index.html을 만들고, 먼저 <div>로만 짜진 옛날 마크업을 보겠습니다.

<div class="top">
  <div class="title">오늘의 신문</div>
  <div class="menu">
    <a href="/politics">정치</a>
    <a href="/economy">경제</a>
  </div>
</div>

<div class="body">
  <div class="story">
    <div class="headline">새 도서관 개관</div>
    <div class="lead">동네에 책 5만 권이 더 생겼다.</div>
  </div>
  <div class="side">
    <div class="related">관련: 독서 주간 안내</div>
  </div>
</div>

<div class="bottom">
  © 2026 오늘의 신문사
</div>

(이 코드는 화면에는 그대로 그려지지만 모두 같은 <div>라 의미가 사라집니다.) 같은 페이지를 시맨틱 태그로 다시 짭니다.

<header>
  <h1>오늘의 신문</h1>
  <nav>
    <ul>
      <li><a href="/politics">정치</a></li>
      <li><a href="/economy">경제</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>새 도서관 개관</h2>
    <p>동네에 책 5만 권이 더 생겼다.</p>
  </article>

  <aside>
    <h2>관련 기사</h2>
    <ul>
      <li><a href="/reading-week">독서 주간 안내</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 오늘의 신문사</p>
</footer>

저장하고 브라우저로 열어보면 화면은 첫 버전과 거의 다르지 않습니다. 글씨 크기와 줄간격 정도가 살짝 바뀌었을 뿐입니다. 하지만 보조기기로 이 페이지를 읽으면, 사용자는 "본문으로 바로 가기", "관련 자료로 이동" 같은 안내를 자동으로 받을 수 있습니다. 검색 엔진도 도서관 개관이 본 기사이고 독서 주간 안내가 곁가지라는 점을 그대로 읽어냅니다.

흔한 실수 3가지#

1. section과 article을 같은 의미로 쓴다#

본문을 잘게 나누는 모든 칸에 <article>을 두르는 경우입니다.

<article>
  <h2>새 도서관 개관</h2>

  <article>
    <h3>개관 시간</h3>
    <p>...</p>
  </article>

  <article>
    <h3>이용 방법</h3>
    <p>...</p>
  </article>
</article>

(이 코드는 문법은 맞지만 의미가 어긋납니다.) "개관 시간"이나 "이용 방법" 한 토막만 떼어 옮기면 무엇에 관한 글인지 알 수 없어집니다. 즉 그 자체로 의미가 통하는 단위가 아닙니다. 신문에서 한 기사 안의 소제목 부분을 따로 신문에 싣지 않는 것과 같습니다.

<article>
  <h2>새 도서관 개관</h2>

  <section>
    <h3>개관 시간</h3>
    <p>...</p>
  </section>

  <section>
    <h3>이용 방법</h3>
    <p>...</p>
  </section>
</article>

한 단위로 통하는 바깥쪽이 <article>, 그 안의 토막이 <section>입니다. 반대로 블로그 메인 화면에서 "최신 글 5편"을 늘어놓는다면, 각 글이 <article>이고 그 묶음을 감싸는 자리가 <section>입니다.

2. main 태그를 페이지에 두 개 이상 둔다#

좌우 두 영역에 다 본문을 두고 싶어 <main>을 두 번 쓰는 경우입니다.

<main>
  <h2>왼쪽 본문</h2>
</main>
<main>
  <h2>오른쪽 본문</h2>
</main>

(이 코드는 보조기기와 검색 엔진을 헷갈리게 만듭니다.) 한 신문에 "오늘의 1면" 자리가 두 자리일 수는 없습니다. "본문으로 바로 가기" 메뉴를 만들 때 어디로 데려가야 할지가 정해지지 않습니다.

<main>
  <section>
    <h2>왼쪽 본문</h2>
  </section>
  <section>
    <h2>오른쪽 본문</h2>
  </section>
</main>

본문이 두 칼럼이면 <main> 한 자리 안에 <section> 둘로 나눕니다. 또는 한쪽이 곁가지면 <aside>로 둡니다.

3. 모든 컨테이너에 div만 쓴다#

div가 익숙해서 위·아래·옆 가리지 않고 div로 다 채우는 경우입니다.

<div>
  <div>오늘의 신문</div>
  <div><a href="/politics">정치</a></div>
</div>
<div>
  <div>새 도서관 개관</div>
  <div>본문...</div>
</div>
<div>© 2026 오늘의 신문사</div>

(이 코드는 작동하지만 모든 칸이 같은 이름이라 의미가 사라집니다.) 신문 한 면 전체가 "구역, 구역, 구역…"이라고만 적힌 종이와 같습니다.

<header>
  <h1>오늘의 신문</h1>
  <nav><a href="/politics">정치</a></nav>
</header>
<main>
  <article>
    <h2>새 도서관 개관</h2>
    <p>본문...</p>
  </article>
</main>
<footer>© 2026 오늘의 신문사</footer>

<div>는 의미가 없는 그냥 칸이므로, 의미가 분명한 자리(머리띠·본문·곁가지·꼬리띠 등)에는 그에 맞는 시맨틱 태그를 먼저 골라 봅니다. 정말 적당한 이름이 없을 때만 <div>로 둡니다.

오늘 배운 것 체크리스트#

  • <header>·<nav>·<main>·<section>·<article>·<aside>·<footer> 일곱 개의 자리를 댈 수 있다.
  • <section>과 <article>은 "혼자 떼어내 의미가 통하는가"로 가른다.
  • <main>은 한 페이지에 하나만 둔다.
  • 이름이 분명한 자리에는 시맨틱 태그를 먼저 고르고, <div>는 정말 의미가 없을 때만 둔다.

자주 묻는 질문#

Q. 본문 사이에 그냥 칸이 하나 더 필요하면 <section>인가요, <div>인가요?

A. 그 칸이 "한 주제의 묶음"이라면 <section>이고, 보통은 그 안에 <h2>나 <h3>로 그 주제를 짧게 적습니다. 의미는 없고 단지 스타일을 입히기 위한 자리라면 <div>가 맞습니다. 제목이 떠오르지 않는 칸이라면 대개 <div>입니다.

Q. <article>은 진짜 신문 기사에만 쓰나요?

A. 아닙니다. 블로그 글 한 편, 뉴스 기사 한 편, 제품 카드 한 장, 댓글 한 개처럼 "이 자체로 한 단위"인 모든 콘텐츠에 씁니다. 다른 곳에 옮겨 놓아도 의미가 통하는지를 기준으로 판단합니다.

Q. <header>나 <footer>는 페이지에 한 번만 쓰나요?

A. <main>만 한 번이고, <header>·<footer>는 여러 번 쓸 수 있습니다. 페이지 전체의 머리띠로도, <article> 한 편의 머리띠("제목·작성자·게시일")로도 둘 수 있습니다. 위치가 아니라 역할이 기준입니다.

다음 시간 예고#

내일은 폼 기초 — form, input, label, button의 올바른 연결을 다룹니다. 오늘은 페이지의 큰 구역을 의미 있는 이름으로 나누는 법을 익혔으니, 다음은 그 안에서 사용자가 직접 정보를 적어 넣는 폼을 만드는 이야기입니다.

더 알아보기#