실행 가능한 HTML 문서: 시맨틱 HTML

Q: 시맨틱 HTML이란 무엇인가요?

시맨틱 HTML은 각 태그가 내용의 의미를 설명하는 마크업이에요. 내비게이션에는 , 독립적인 글에는 , 버튼에는 을 써요. 그러면 브라우저, 스크린 리더, 검색 엔진이 클래스 이름이나 스타일로 추측하지 않고도 페이지를 이해할 수 있어요.

Q: HTML의 시맨틱 태그에는 무엇이 있나요?

레이아웃 태그는 , , , , , , 예요. 그 밖에 자주 쓰는 시맨틱 태그로 , , , , , , 제목 ~ 이 있어요.

Q: div는 시맨틱 요소인가요?

아니요. 는 그 자체로 의미가 없고, 스타일과 레이아웃을 위한 범용 상자예요. 맞는 시맨틱 태그가 없을 때 쓰고, 맞는 게 있으면 , , 등을 쓰세요.

Q: 한 페이지에 main 요소는 몇 개까지 쓸 수 있나요?

페이지당 보이는 은 하나예요. 그 페이지에만 있는 콘텐츠를 감싸고, , , , , 안에 들어가면 안 돼요.

시맨틱 HTML이란

시맨틱 HTML은 각 태그를 내용이 무엇인지에 따라 고르는 거예요. 내비게이션은 <nav>에, 주요 콘텐츠는 <main>에, 블로그 글은 <article>에 넣어요. 태그들은 평범한 상자처럼 보이지만, 페이지의 각 부분이 무슨 일을 하는지 브라우저, 스크린 리더, 검색 엔진에 알려 줘요. 여기 시맨틱 레이아웃 태그로 만든 전체 페이지가 있고, 각 태그에 테두리와 이름을 붙였어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

<style> 요소를 지우면 페이지가 일반 텍스트처럼 보이지만, 코드를 읽는 사람과 화면의 픽셀을 보지 않고 코드를 읽는 소프트웨어에게는 구조가 그대로 남아 있어요.

시맨틱 레이아웃 태그

태그	용도	스크린 리더 랜드마크
`<header>`	페이지나 글의 도입부: 로고, 제목, 작성자	banner(`article`, `aside`, `main`, `nav`, `section` 안에 있지 않을 때만)
`<nav>`	주요 내비게이션 링크 묶음	navigation
`<main>`	이 페이지에만 있는 콘텐츠, 페이지당 하나	main
`<article>`	그 자체로 의미가 통하는 독립적인 내용: 글, 댓글, 상품 카드	기본값 없음
`<section>`	자체 제목이 있는 주제별 콘텐츠 묶음	region, 접근 가능한 이름이 있을 때만
`<aside>`	주요 흐름 옆의 관련 콘텐츠: 사이드바, 메모	complementary
`<footer>`	페이지나 글의 마무리 정보: 저작권, 작성자, 링크	contentinfo(페이지 수준에서만)

각 태그는 따로 자세한 페이지가 있어요. header, nav, section, footer예요. 이 페이지에서는 이 태그들이 어떻게 맞물리는지 다뤄요.

그냥 div를 쓰면 안 되는 이유

<div>로만 만든 페이지도 시맨틱 페이지와 똑같아 보일 수 있어요. 차이는 마크업이 무엇을 말하느냐예요. 버튼을 눌러 각 버전에서 의미를 가진 요소에 테두리를 표시해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

div 버전은 0개, 시맨틱 버전은 4개를 찾아요. 그게 보조 기술이 보는 모습이에요. 시맨틱 페이지에서는 스크린 리더 사용자가 내비게이션이나 주요 콘텐츠로 바로 건너뛸 수 있지만, div 페이지에서는 전부 읽어 내려가야 해요. class="nav" 같은 클래스 이름은 브라우저에게 아무 의미도 없어요.

첫 번째 예제의 .cols flex 래퍼처럼 스타일이나 레이아웃만을 위한 상자에는 여전히 <div>가 알맞아요.

main, article, aside

<main>은 이 페이지에만 있는 것을 감싸고 한 번만 나와요. 그 안에서 <article>은 다른 사이트에 그대로 옮겨도 의미가 통하는 콘텐츠를 표시하고, <aside>는 관련은 있지만 빼도 글이 깨지지 않는 콘텐츠를 표시해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

article에는 자체 <header>와 <footer>가 있어요. 이 태그들은 페이지 수준에만 쓰는 게 아니에요. 각각 가장 가까운 article이나 section을 열거나 닫아요. <time datetime> 요소는 날짜를 사람이 읽는 형태로 보여 주면서 기계가 읽을 수 있는 형태로도 제공해요.

제목 개요 확인하기

제목은 구조의 나머지 절반이에요. 스크린 리더 사용자는 제목에서 제목으로 페이지를 이동하는 경우가 많아서, 단계가 건너뛰지 않고 목차처럼 읽혀야 해요. 이 스크립트는 자기가 실행되는 페이지의 개요를 출력해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

"Brewing" 아래의 h4는 단계를 하나 건너뛰어요. h3으로 바꾸면 개요가 깔끔하게 읽혀요. 제목 단계는 구조에 따라 고르고, 더 크거나 작게 하고 싶으면 CSS로 크기를 바꾸세요.

다른 시맨틱 태그

시맨틱은 레이아웃만의 문제가 아니에요. 이런 텍스트 수준 태그도 의미를 담아요.

태그	의미
`<strong>`	중요한 텍스트(기본적으로 굵게)
`<em>`	강세를 둔 강조(기본적으로 기울임꼴)
`<figure>`와 `<figcaption>`	캡션이 딸린 이미지, 차트, 코드 예제
`<time datetime="...">`	기계가 읽을 수 있는 형태의 날짜나 시간
`<address>`	페이지나 글 작성자의 연락처
`<mark>`	검색 결과 일치처럼 하이라이트한 텍스트
`<abbr title="...">`	전체 형태가 딸린 약어
`<button>`	동작을 수행하는 것

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

"W3C" 약어에 마우스를 올리면 툴팁으로 전체 형태가 보여요.

자주 하는 실수

모양 때문에 태그를 씀. <blockquote>는 들여쓰기가 아니라 인용문용이고, <h3>은 중간 크기의 굵은 글씨가 아니라 제목 단계용이에요. 꾸미는 건 CSS로 하세요.
모든 것을 <section>으로 감쌈. section에는 제목과 주제가 있어야 해요. 스타일용 상자가 필요하면 <div>를 쓰세요.
보이는 <main>이 여러 개. 페이지당 하나만 두고, 절대 <article>, <aside>, <header>, <nav>, <footer> 안에 넣지 마세요.
모든 링크 목록을 <nav>에 넣음. 사이트 메뉴나 목차 같은 주요 내비게이션 묶음에만 쓰세요. 푸터의 링크 몇 개에는 필요 없어요.
클릭할 수 있는 <div> 요소. <div onclick>은 키보드로 갈 수 없어요. 동작에는 <button>을, 이동에는 <a href>를 쓰세요.

자주 묻는 질문

시맨틱 HTML이란 무엇인가요?

시맨틱 HTML은 각 태그가 내용의 의미를 설명하는 마크업이에요. 내비게이션에는 <nav>, 독립적인 글에는 <article>, 버튼에는 <button>을 써요. 그러면 브라우저, 스크린 리더, 검색 엔진이 클래스 이름이나 스타일로 추측하지 않고도 페이지를 이해할 수 있어요.

HTML의 시맨틱 태그에는 무엇이 있나요?

레이아웃 태그는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>예요. 그 밖에 자주 쓰는 시맨틱 태그로 <figure>, <figcaption>, <time>, <address>, <strong>, <em>, 제목 <h1>~<h6>이 있어요.