This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<header>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML<header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
시도해 보기
<header> <a 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 |