실행 가능한 HTML 문서: header 태그

Q: HTML에서 head와 header는 무엇이 다른가요?

는 , 태그, 스타일시트 링크가 들어가는 문서의 보이지 않는 부분이고, 딱 하나만 있어요. 는 안의 보이는 콘텐츠이고, 한 페이지에 여러 개 있을 수 있어요.

Q: 한 페이지에 header 요소를 여러 개 써도 되나요?

네. 페이지에는 보통 사이트 헤더가 하나 있고, 각 이나 은 제목과 메타 정보를 위한 자체 를 가질 수 있어요. 스크린 리더에게 페이지 banner로 인정되는 건 article, aside, main, nav, section 안에 있지 않은 header뿐이에요.

Q: nav를 header 안에 넣어야 하나요?

넣어도 되고, 주 메뉴가 페이지 맨 위에 있을 때는 흔히 그렇게 해요. 를 밖에 두는 것도 올바르니, 레이아웃에 맞는 쪽을 고르세요.

Q: 스크롤해도 헤더가 맨 위에 붙어 있게 하려면 어떻게 하나요?

position: sticky; top: 0;에 배경색과 z-index를 주면 콘텐츠가 그 아래로 스크롤돼요. sticky는 헤더의 부모가 헤더보다 키가 클 때만 동작하고, overflow: hidden인 조상이 있으면 페이지에 붙지 않아요.

HTML에서 헤더 만드는 법

페이지 윗부분(로고, 사이트 이름, 주 메뉴)을 <header> 요소로 감싸세요. 기본 모양이 없는 블록 상자라서 CSS 몇 줄이면 바 모양이 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

로고의 margin-inline-end: auto가 메뉴와 버튼을 바의 끝쪽으로 밀어내요. <style> 요소를 지워도 여전히 헤더예요. 헤더를 헤더로 만드는 건 어두운 배경이 아니라 태그예요.

header, head, h1 차이

비슷하게 들리지만 하는 일이 다른 세 이름이에요.

요소	위치	보임	개수
`<head>`	`<html>` 바로 안, `<body>` 앞	아니요: `<title>`, `<meta>`, `<link>`를 담음	딱 하나
`<header>`	`<body>` 안	예: 페이지나 섹션의 도입부 콘텐츠	제한 없음
`<h1>`~`<h6>`	`<body>` 안 어디든	예: 제목	제한 없음

아래 <head>는 브라우저 탭에 보이는 페이지 제목을 정해요. 미리보기에서 보이는 것은 모두 <body>에서 나와요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

헤더에는 제목이 들어가는 경우가 많지만 꼭 그래야 하는 건 아니고, 제목을 헤더로 감쌀 필요도 없어요.

글 안의 헤더

<header>는 페이지만이 아니라 가장 가까운 article이나 section의 도입부예요. 글마다 자체 헤더가 있는 블로그 글 목록은 올바르고 흔한 구조예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

스크린 리더에게는 페이지 수준 헤더(article, aside, main, nav, section 안에 있지 않은 것)만 banner 랜드마크가 돼요. 글 헤더들은 일반 묶음이라서 banner가 여러 개 생기지 않아요.

상단 고정(sticky) 헤더

position: sticky는 그 아래 콘텐츠가 스크롤되는 동안 헤더를 맨 위에 붙여 둬요. 아래 상자 안에서 스크롤해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

제대로 동작하게 하는 세부 사항이 세 가지예요. top: 0(오프셋이 없으면 sticky는 아무 일도 안 해요), 배경색(없으면 행들이 비쳐 보여요), 그리고 위치가 지정된 콘텐츠가 그 위에 그려지지 않게 하는 z-index예요. 실제 페이지에서는 스크롤되는 상자가 페이지 자체라서 헤더를 <body>에 바로 둬요.

position: fixed인 헤더도 제자리에 머물지만, 페이지 흐름에서 빠지기 때문에 콘텐츠가 그 아래로 미끄러져 들어가서 위쪽에 padding이 필요해요. sticky는 레이아웃에서 자기 자리를 유지해요.

header에는 제목, 로고 이미지, <nav>, 검색 폼, 버튼 등 거의 모든 콘텐츠를 넣을 수 있어요. 다만 다른 <header>나 <footer>는 담을 수 없고, <footer>, <address>, 다른 <header> 안에 들어갈 수도 없어요.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

로고가 홈페이지로 가는 링크라면 스크린 리더가 그걸 읽어 주니까, alt 텍스트에 링크가 어디로 가는지("Acme home") 쓰세요.

자주 하는 실수

<header>와 <head>를 헷갈림. 메타데이터는 <head>에 넣고, 보이는 콘텐츠는 절대 넣지 않아요.
모든 제목에 <header>를 씀. 제목 하나만 있다면 header로 감쌀 필요가 없어요. 도입부 콘텐츠 묶음이 있을 때 <header>를 쓰세요.
배경 없는 sticky 헤더. 페이지 텍스트가 스크롤되면서 비쳐 보여요. background를 지정하세요.
붙지 않는 sticky. overflow: hidden이나 overflow: auto인 조상이 sticky의 스크롤 상자가 되어서, 헤더가 그 상자 안에 붙거나 아예 붙지 않아요. 조상 요소를 확인하세요.
사이트 메뉴를 header 안의 <div>에 넣음. 스크린 리더 사용자가 바로 건너뛸 수 있도록 <nav>를 쓰세요.

자주 묻는 질문

HTML에서 header 태그란 무엇인가요?

<header>는 도입부 콘텐츠를 위한 시맨틱 요소예요. 페이지 맨 위의 사이트 로고와 메뉴, 또는 글 맨 위의 제목과 작성자 정보 같은 거예요. 기본 스타일이 없는 일반 블록 상자예요.

HTML에서 head와 header는 무엇이 다른가요?

<head>는 <title>, <meta> 태그, 스타일시트 링크가 들어가는 문서의 보이지 않는 부분이고, 딱 하나만 있어요. <header>는 <body> 안의 보이는 콘텐츠이고, 한 페이지에 여러 개 있을 수 있어요.

한 페이지에 header 요소를 여러 개 써도 되나요?

네. 페이지에는 보통 사이트 헤더가 하나 있고, 각 <article>이나 <section>은 제목과 메타 정보를 위한 자체 <header>를 가질 수 있어요. 스크린 리더에게 페이지 banner로 인정되는 건 article, aside, main, nav, section 안에 있지 않은 header뿐이에요.

nav를 header 안에 넣어야 하나요?

넣어도 되고, 주 메뉴가 페이지 맨 위에 있을 때는 흔히 그렇게 해요. <nav>를 <header> 밖에 두는 것도 올바르니, 레이아웃에 맞는 쪽을 고르세요.

스크롤해도 헤더가 맨 위에 붙어 있게 하려면 어떻게 하나요?

position: sticky; top: 0;에 배경색과 z-index를 주면 콘텐츠가 그 아래로 스크롤돼요. sticky는 헤더의 부모가 헤더보다 키가 클 때만 동작하고, overflow: hidden인 조상이 있으면 페이지에 붙지 않아요.