<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 г..
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> |
| ÐÑопÑÑк Ñегов | ÐеÑ, оÑкÑÑваÑÑий и закÑÑваÑÑий Ñеги обÑзаÑелÑнÑ. |
| ÐопÑÑÑимÑе ÑодиÑели | ÐÑбой ÑлеменÑ, коÑоÑÑй ÑазÑеÑÐ°ÐµÑ ÐºÐ¾Ð½ÑÐµÐ½Ñ Ð¾Ñновного поÑока в каÑеÑÑве ÑодеÑжимого. ÐбÑаÑиÑе внимание, ÑÑо ÑÐ»ÐµÐ¼ÐµÐ½Ñ <header> не должен бÑÑÑ Ð¿Ð¾Ñомком ÑлеменÑа <address>, <footer> или дÑÑгого ÑлеменÑа <header>. |
| ÐопÑÑÑимÑе ARIA-Ñоли | group, presentation |
| DOM-инÑеÑÑÐµÐ¹Ñ | HTMLElement |
ÐÑимеÑание
ÐÐ»ÐµÐ¼ÐµÐ½Ñ <header> не оÑноÑиÑÑÑ Ðº ÑекÑÐ¸Ð¾Ð½Ð½Ð¾Ð¼Ñ ÐºÐ¾Ð½ÑенÑÑ , а знаÑÐ¸Ñ Ð½Ðµ ÑоздаÑÑ Ð½Ð¾Ð²Ñй Ñаздел в ÑÑÑÑкÑÑÑе HTML-докÑменÑа. ÐÑи ÑÑом ÑÐ»ÐµÐ¼ÐµÐ½Ñ <header> обÑÑно должен ÑодеÑжаÑÑ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²Ð¾Ðº ближайÑего Ñаздела (ÑлеменÑÑ h1-h6), но ÑÑо не обÑзаÑелÑно.
ÐÑÑоÑиÑеÑкое ÑпоÑÑебление
ÐеÑмоÑÑÑ Ð½Ð° Ñо, ÑÑо ÑÐ»ÐµÐ¼ÐµÐ½Ñ <header> не попал в ÑпеÑиÑикаÑии до HTML5, на Ñамом деле, он ÑÑÑеÑÑвовал Ñ Ñамого наÑала HTML. ÐеÑвонаÑалÑно, на Ñамом пеÑвом веб-ÑайÑе он иÑполÑзовалÑÑ ÐºÐ°Ðº ÑÐ»ÐµÐ¼ÐµÐ½Ñ <head>. Ркакой-Ñо Ð¼Ð¾Ð¼ÐµÐ½Ñ Ð±Ñло пÑинÑÑо ÑеÑение иÑполÑзоваÑÑ Ð´ÑÑгое имÑ. Ðозже, ÑÑо позволило <header> занÑÑÑ Ð´ÑÑгÑÑ ÑолÑ.
ÐÑÑибÑÑÑ
Ð ÑÑÐ¾Ð¼Ñ ÑлеменÑÑ Ð¿ÑÐ¸Ð¼ÐµÐ½Ð¸Ð¼Ñ ÑолÑко глобалÑнÑе аÑÑибÑÑÑ.
ÐÑимеÑÑ
Ðаголовок ÑÑÑаниÑÑ
<header>
<h1>Ðаголовок главной ÑÑÑаниÑÑ</h1>
<img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
Ðаголовок ÑÑаÑÑи
<article>
<header>
<h2>ÐланеÑа ÐемлÑ</h2>
<p>ÐпÑбликовано в ÑÑедÑ, 4 окÑÑбÑÑ 2017, Ðжейн СмиÑ</p>
</header>
<p>
ÐÑ Ð¶Ð¸Ð²Ñм на Ñине-зелÑной планеÑе, на коÑоÑой до ÑиÑ
Ð¿Ð¾Ñ Ñак много
неизведанного.
</p>
<p>
<a href="https://janesmith.com/the-planet-earth/">ÐÑодолжиÑÑ ÑÑение...</a>
</p>
</article>
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # the-header-element |