한 줄 정답 — 시맨틱 태그는 "여기가 무슨 영역인지"를 이름으로 알려 주는 HTML 요소다. <div>는 의미 없는 빈 상자라 화면에는 똑같이 보이지만 기계는 무슨 영역인지 알 수 없는 반면, <header>(머리말)·<nav>(주 메뉴)·<main>(본문 핵심)·<section>(주제 묶음)·<article>(독립된 글)·<aside>(곁다리)·<footer>(꼬리말)는 이름 자체로 역할을 말해 준다. 그래서 스크린리더는 이 영역들을 "랜드마크"로 잡아 바로 건너뛸 수 있고, 검색엔진은 페이지 구조를 더 또렷하게 이해한다. 보이는 모습은 CSS가, 의미는 태그가 책임진다고 나누면 된다.

핵심 요약#

  • <div>는 의미 없는 상자, 시맨틱 태그는 의미 있는 상자. 화면 출력은 같아도 스크린리더·검색엔진·동료 개발자가 읽는 "이게 무슨 영역인지"가 다르다.
  • 역할로 외운다. header=머리말, nav=주 메뉴, main=본문 핵심(페이지에 보이는 건 하나), section=제목 있는 주제 묶음, article=떼어 내도 말 되는 독립 콘텐츠, aside=본문에서 빠져도 되는 곁다리, footer=꼬리말.
  • 접근성 이점이 가장 크고 즉각적이다. 스크린리더 사용자는 랜드마크 목록으로 <nav>를 건너뛰고 <main>으로 바로 점프한다. <div>만 쓰면 이 길이 통째로 사라진다.
  • SEO는 "직접 순위 상승"이 아니라 "구조 이해"다. 시맨틱 태그를 썼다고 순위가 오르지는 않지만, 크롤러가 본문·메뉴·곁다리를 구분해 핵심 콘텐츠에 무게를 둘 수 있다.
  • 흔한 오용은 <section> 남용. 그냥 묶어서 스타일만 줄 거라면 <section>이 아니라 <div>다. <section>은 제목(heading)을 갖는 주제 단위에 쓴다.

HTML 시맨틱 태그란 — div와 무엇이 다른가#

<div>와 <span>은 아무 뜻이 없는 빈 상자다. 무엇이든 담을 수 있는 대신, 그 안에 무엇이 들었는지는 아무도 모른다. 사람은 화면을 눈으로 보고 "아, 여기가 메뉴구나" 짐작하지만, 스크린리더·검색엔진·다른 개발자는 화면을 보지 못하거나 코드부터 읽는다.

시맨틱(semantic)은 "의미"라는 뜻이다. 시맨틱 태그는 같은 상자에 이름표를 붙인 것이다. <nav>라고 쓰면 "여기는 주 메뉴", <main>이라고 쓰면 "여기가 이 페이지의 핵심 본문"이라는 의미가 코드에 새겨진다.

<!-- 의미 없는 상자: 무슨 영역인지 코드만 봐선 모른다 -->
<div class="top">
  <div class="menu">...</div>
</div>
<div class="content">...</div>
<div class="bottom">...</div>

<!-- 같은 화면, 의미가 새겨진 구조 -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

두 코드는 CSS만 같으면 화면에서 똑같이 보인다. 차이는 눈에 안 보이는 곳에 있다. 아래 코드는 스크린리더가 "본문 영역으로 점프"를 제공할 수 있고, 검색 크롤러가 머리말·본문·꼬리말을 구분할 수 있다.

보이는 건 CSS, 의미는 태그#

자주 하는 오해가 "시맨틱 태그를 쓰면 디자인이 바뀐다"는 것이다. 그렇지 않다. <article>이든 <div>든 기본 스타일은 거의 같은 블록 요소다. 모양은 전적으로 CSS가 정한다. 시맨틱 태그는 모양이 아니라 의미를 위한 선택이다. 그래서 div를 시맨틱 태그로 바꿔도 화면은 그대로고, 기계가 읽는 구조만 좋아진다.

header nav section article 차이 — 태그별 용도 한 표#

핵심 일곱 개를 역할·범위 기준으로 한눈에 정리하면 다음과 같다.

태그무슨 영역인가페이지에 몇 개헷갈리기 쉬운 점
<header>머리말(로고·제목·상단 메뉴)여러 개 가능페이지 맨 위뿐 아니라 <article>·<section> 안의 머리말로도 쓴다
<nav>주요 내비게이션 묶음여러 개 가능링크가 있다고 다 <nav>는 아니다. 주 메뉴·목차 같은 "주요" 이동에만
<main>페이지의 핵심 본문보이는 건 1개머리말·꼬리말·사이드바를 뺀, 그 페이지만의 콘텐츠
<section>제목을 갖는 주제 묶음여러 개 가능스타일용 그룹이면 <div>. 제목이 붙는 단락 묶음일 때만
<article>떼어 내도 말 되는 독립 콘텐츠여러 개 가능블로그 글·댓글·상품 카드처럼 그 자체로 완결되는 단위
<aside>본문에서 빠져도 되는 곁다리여러 개 가능사이드바·관련 링크·광고. 본문 흐름에 필수가 아닌 것
<footer>꼬리말(저작권·연락처·하단 링크)여러 개 가능<header>처럼 <article>·<section> 안의 꼬리말로도 쓴다

section과 article을 가르는 한 가지 질문#

둘이 가장 많이 헷갈린다. 기준은 "이걸 페이지에서 떼어 내 다른 곳에 그대로 옮겨도 말이 되나?"이다.

  • 말이 된다 → <article>. 블로그 글 한 편, 뉴스 기사, 댓글 하나, 상품 카드처럼 독립적으로 배포·재사용될 수 있는 단위.
  • 떼어 내면 어색하다, 그냥 한 문서 안의 한 챕터다 → <section>. "회사 소개", "자주 묻는 질문"처럼 제목을 가진 주제 단락.

article 안에 section을 둘 수도, section 안에 article을 둘 수도 있다. 긴 기사(<article>)를 여러 절(<section>)로 나누거나, "추천 상품"이라는 절(<section>) 안에 상품 카드(<article>)를 여러 개 담는 식이다.

main·aside·footer 사용법 — 한 페이지 안에서의 자리#

<main>은 그 페이지에서 이 페이지만의 핵심을 감싼다. 모든 페이지에 공통으로 들어가는 상단 로고·메뉴(<header>/<nav>)나 하단 저작권(<footer>)은 <main> 바깥에 둔다. 화면에 보이는 <main>은 페이지당 하나여야 한다(hidden으로 숨긴 여분은 예외).

<aside>는 본문 옆 사이드바, 관련 글 박스, 광고처럼 빠져도 본문이 성립하는 곁가지다. <footer>는 꼭 페이지 맨 아래만이 아니라, <article> 끝의 작성자·태그 줄처럼 그 블록의 꼬리말로도 쓴다.

<body>
  <header>
    <h1>사이트 이름</h1>
    <nav><a href="/">홈</a> <a href="/blog/">블로그</a></nav>
  </header>

  <main>
    <article>
      <header><h2>글 제목</h2></header>
      <p>본문…</p>
      <footer>작성자 · 2026-06-29</footer>
    </article>
  </main>

  <aside>관련 글 · 광고 등 곁다리</aside>

  <footer>© 2026 사이트 이름</footer>
</body>

div 대신 시맨틱 태그를 쓰면 좋은 점 — 접근성과 SEO#

스크린리더는 시맨틱 태그를 "랜드마크"로 읽는다#

시각장애 사용자가 쓰는 스크린리더는 시맨틱 태그를 **랜드마크(landmark)**로 인식한다. <header>는 배너, <nav>는 내비게이션, <main>은 메인, <aside>는 보조, <footer>는 콘텐츠 정보로 노출된다. 사용자는 이 랜드마크 목록을 띄워 "본문으로 바로 가기", "메뉴 건너뛰기" 같은 점프를 한다.

<div>만 쓴 페이지에는 이 랜드마크가 하나도 없다. 그러면 매 페이지마다 같은 메뉴를 처음부터 끝까지 다시 들어야 한다. 시맨틱 태그 하나가 곧 접근성 길 하나다 — 이게 시맨틱 마크업의 가장 직접적인 이득이다.

검색엔진은 구조를 이해한다 — 단, 순위 마법은 아니다#

SEO 관점에서 시맨틱 태그를 오해하지 않는 게 중요하다. 시맨틱 태그를 썼다고 검색 순위가 곧바로 오르지는 않는다. 검색엔진이 보는 건 결국 콘텐츠의 질과 관련성이다.

다만 시맨틱 구조는 크롤러가 페이지를 해석하는 걸 돕는다. 어디가 본문(<main>)이고 어디가 반복되는 메뉴·곁다리(<nav>·<aside>)인지 구분되면, 검색엔진이 핵심 콘텐츠에 무게를 두기 쉽다. 제목 구조(<h1>~<h6>)와 시맨틱 영역이 맞물릴 때 효과가 크다. 메타 정보까지 함께 손보고 싶다면 메타 태그 — viewport·charset·og 이미지로 검색·공유 노출 잡기에서 <head> 쪽 SEO를 이어 보면 좋다.

코드를 읽는 사람에게도 이득#

여섯 달 뒤의 나, 그리고 동료가 코드를 열었을 때 <div class="wrap2">보다 <aside>가 무슨 영역인지 즉시 말해 준다. 의미가 새겨진 마크업은 유지보수 비용을 낮춘다.

흔한 오용 — 이럴 땐 div가 맞다#

시맨틱 태그를 "div를 전부 갈아 치우는 것"으로 받아들이면 과해진다. 다음은 자주 보는 오용이다.

  • 스타일용 묶음에 <section> 쓰기. 단지 배경색을 주거나 가운데 정렬하려고 감싸는 거라면 의미가 없는 <div>가 맞다. <section>은 제목을 갖는 주제 단위일 때만 쓴다.
  • 링크 묶음마다 <nav> 쓰기. 본문 속 인용 링크 몇 개까지 <nav>로 감싸면 랜드마크가 너무 많아져 오히려 방해가 된다. 주 메뉴·페이지 목차 같은 "주요" 이동에만.
  • <main> 여러 개 노출. 보이는 <main>은 페이지당 하나다. 두 개를 동시에 노출하면 스크린리더가 어디가 본문인지 혼란스러워한다.
  • <article>을 그냥 카드 박스 정도로 남발. 떼어 내도 말이 되는 독립 콘텐츠가 아니라면 <div>나 <section>이 낫다.

기준은 하나다. 모양 때문이면 <div>, 의미 때문이면 시맨틱 태그.

자주 묻는 질문#

Q. header, nav, section, article의 차이가 뭔가요?

A. <header>는 머리말(로고·제목·상단 메뉴), <nav>는 주요 내비게이션 묶음입니다. <section>은 제목을 갖는 한 문서 안의 주제 단락이고, <article>은 블로그 글·댓글·상품 카드처럼 떼어 내도 그 자체로 말이 되는 독립 콘텐츠입니다. section과 article이 헷갈리면 "다른 곳에 그대로 옮겨도 말이 되나?"를 물어보세요 — 되면 article, 한 문서 안의 챕터면 section입니다.

Q. div 대신 시맨틱 태그를 꼭 써야 하나요?

A. 화면 출력만 보면 차이가 없지만, 스크린리더·검색엔진·동료 개발자가 읽는 의미가 달라집니다. 특히 스크린리더 사용자는 <header>·<nav>·<main> 같은 랜드마크로 영역을 건너뛰는데, <div>만 쓰면 이 길이 사라집니다. 페이지의 큰 구획(머리말·본문·메뉴·꼬리말)은 시맨틱 태그로, 순수 스타일용 묶음은 <div>로 나눠 쓰는 게 현실적입니다.

Q. 시맨틱 태그를 쓰면 SEO 순위가 오르나요?

A. 시맨틱 태그 자체가 순위를 직접 올려 주지는 않습니다. 순위는 콘텐츠의 질과 관련성이 결정합니다. 다만 시맨틱 구조는 크롤러가 어디가 본문이고 어디가 반복 메뉴·곁다리인지 구분하도록 도와, 핵심 콘텐츠에 무게를 두기 쉽게 합니다. 제목 태그(<h1>~<h6>)와 시맨틱 영역을 함께 갖출 때 효과가 큽니다.

Q. main, aside, footer는 어떻게 쓰나요?

A. <main>은 그 페이지만의 핵심 본문을 감싸며, 화면에 보이는 건 페이지당 하나여야 합니다. 공통 머리말·메뉴·꼬리말은 <main> 바깥에 둡니다. <aside>는 사이드바·관련 글·광고처럼 본문에서 빠져도 되는 곁다리에, <footer>는 페이지 하단 저작권뿐 아니라 <article> 끝의 작성자·날짜 줄 같은 블록 꼬리말로도 씁니다.

관련 글#

시맨틱 태그는 HTML 구조의 뼈대다. 강의 흐름에서 더 깊이 잡거나, 검색 노출용 메타·폼 요소로 이어 가면 좋다.

더 알아보기#