<header>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

시도해 보기

<header> <a class="logo" href="#">Cute Puppies Express!</a> </header> <article> <header> <h1>Beagles</h1> <time>08.12.2014</time> </header> <p> I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft! </p> </article> 
.logo { background: left / cover url("/shared-assets/images/examples/puppy-header.jpg"); display: flex; height: 120px; align-items: center; justify-content: center; font: bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script", fantasy; color: #ff0083; text-shadow: #000 2px 2px 0.2rem; } header > h1 { margin-bottom: 0; } header > time { font: italic 0.7rem sans-serif; }
콘텐츠 카테고리플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠플로우 콘텐츠. 단, 다른 <header> 또는 <footer>가 자손으로 올 수 없습니다.
태그 생략불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소. 단, <address>, <footer>, 또는 다른 <header>의 자손으로 사용할 수 없습니다.
가능한 ARIA 역할group, presentation
DOM 인터페이스HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

<header> 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목(<h1>-<h6> 요소)을 감싸기 위한 요소지만, 필수 사항은 아닙니다.

역사적 사용처

<header>는 HTML5에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. 세계 최초의 웹사이트에서 확인할 수 있듯 원래는 <head>요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 <header>는 나중에 다른 역할을 맡을 수 있었습니다.

예제

페이지 제목

html
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" alt="MDN logo" /> </header>

글 제목

html
<article> <header> <h2>The Planet Earth</h2> <p> Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith </p> </header> <p> We live on a planet that's blue and green, with so many things still unseen. </p> <p> <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a> </p> </article>

명세

Specification
HTML
# the-header-element

브라우저 호환성