header, nav, main, section, article, aside, footer로 문서를 구조화한다.
시맨틱 구조
시맨틱 태그는 콘텐츠의 의미를 이름으로 드러내는 태그입니다. div만 반복하는 대신 의미 있는 태그를 쓰면 사람도, 검색 엔진도, 보조 기기도 문서를 더 잘 이해합니다. 이번 강의에서는 페이지 골격을 이루는 시맨틱 태그들을 배웁니다.
학습 목표
- 시맨틱 태그가 왜 중요한지 이해한다.
header,nav,main,footer의 역할을 안다.section과article을 구분해 사용한다.aside와 문서 아웃라인 개념을 이해한다.
왜 시맨틱인가
다음 두 코드는 화면에 똑같이 보일 수 있지만 의미가 다릅니다.
<!-- 의미 없는 div -->
<div class="header">...</div>
<div class="content">...</div>
<!-- 의미 있는 시맨틱 -->
<header>...</header>
<main>...</main>
시맨틱 태그를 쓰면 검색 엔진이 페이지의 주요 콘텐츠를 파악하고, 스크린 리더가 "본문으로 건너뛰기" 같은 기능을 제공할 수 있습니다.
페이지의 큰 골격
대표적인 골격은 다음과 같습니다.
<body>
<header>
<h1>사이트 이름</h1>
<nav>
<a href="/">홈</a>
<a href="/about">소개</a>
</nav>
</header>
<main>
<h2>오늘의 글</h2>
<p>본문 내용...</p>
</main>
<footer>
<p>© 2026 회사명</p>
</footer>
</body>
header: 머리말(로고, 사이트 제목, 주 메뉴)nav: 주요 이동 링크 묶음main: 페이지의 핵심 콘텐츠(한 페이지에 하나)footer: 바닥글(저작권, 연락처 등)
⚠️ 주의 —
main은 한 페이지에 하나만 두는 것이 원칙입니다. 페이지의 핵심 콘텐츠임을 명확히 하기 위함입니다.
section과 article
section은 주제별 묶음, article은 그 자체로 독립적으로 배포될 수 있는 콘텐츠입니다.
<section>
<h2>최신 글</h2>
<article>
<h3>첫 번째 글</h3>
<p>...</p>
</article>
<article>
<h3>두 번째 글</h3>
<p>...</p>
</article>
</section>
블로그 글, 뉴스 기사, 댓글 하나처럼 떼어 내도 의미가 통하면 article, 같은 페이지 안의 주제 구역이면 section을 사용합니다.
💡 TIP —
section에는 거의 항상 제목(h2등)이 있어야 합니다. 제목 없이 그냥 묶기만 하려면div가 더 적절합니다.
aside와 문서 아웃라인
aside는 본문과 직접 관련은 적지만 부가적인 내용(사이드바, 관련 링크, 광고)입니다.
<main>
<article>
<h2>HTML이란</h2>
<p>...</p>
</article>
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="/css">CSS 기초</a></li>
</ul>
</aside>
</main>
문서 아웃라인은 제목(h1~h6)이 만드는 문서의 목차 구조입니다. 제목 레벨을 건너뛰지 않고 차례대로 쓰면 깔끔한 아웃라인이 만들어져 접근성과 SEO에 모두 좋습니다.
요약
- 시맨틱 태그는 콘텐츠의 의미를 드러내 사람과 기계 모두에게 도움이 됩니다.
- 골격은
header,nav,main,footer로 잡습니다. main은 페이지당 하나만 둡니다.- 독립 콘텐츠는
article, 주제 구역은section입니다. - 부가 콘텐츠는
aside, 제목 계층은 문서 아웃라인을 만듭니다.
연습문제
- 로고와 메뉴를 담은 페이지 머리말을 작성하세요.
- 블로그 글 하나를 독립 콘텐츠로 마크업하세요.
- 본문 옆 관련 링크 영역을 적절한 태그로 작성하세요.
header,main,footer를 갖춘 페이지 골격을 작성하세요.
힌트 — 떼어 내도 의미가 통하면
article, 부가 정보면aside입니다.
💡 연습문제 풀이
불러오는 중…
댓글 0
“HTML” 강좌에 대한 댓글입니다.