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> 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목( 요소)을 감싸기 위한 요소지만, 필수 사항은 아닙니다.
역사적 사용처
<header>는 HTML5에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. 세계 최초의 웹사이트에서 확인할 수 있듯 원래는 <head>요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 <header>는 나중에 다른 역할을 맡을 수 있었습니다.
페이지 제목
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
글 제목
<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>