Ричард Кларк, вторник, 16 июня 2009

В последнее время наблюдается повышенный интерес к HTML 5 и его внедрению в работу web-профессионалов. В HTML 5 спецификации мы видим, что была добавлена масса новых тегов, среди которых и элемент <header>, о котором мы поговорим в этой статье. Мы расскажем про то, когда его использовать и  когда не использовать, что он должен содержать и что не должен. Готовы? Тогда начнем.

Итак, вы привыкли видеть

<div id="header">

на большинстве посещаемых вами сайтов. Теперь, с появлением HTML 5 это больше не требуется и мы можем обогатить семантическое содержимое новым элементом <header>.

Что представляет собой этот элемент?

Спецификация дает следующее определение элемента <header>

группа элементов вводного или навигационного значения. Как правило, элемент header содержит заголовок секции (элемент h1–h6 или группу элементов hgroup), но может также иметь и другое наполнение, например, содержание, форму поиска или соответствующие логотипы.

Где можно использовать элемент <header>

Очевидно, логично начать с начала вашей страницы. Хедер может содержать заголовок вашей главной страницы и выглядеть следующим образом:

<header>
	<h1>Самый важный заголовок на этой странице</h1>
	<p>С какой-либо дополнительной информацией</p>
</header>

Здесь важным моментом является то, что вы не ограничиваетесь использованием только одного элемента <header> на сайте. Их может быть несколько, и каждый из них будет хедером соответствующей секции документа. Таким образом, получится:

<header>
    <h1>The most important heading on this page</h1>
    <p>With some supplementary information</p>
</header>

<article>
<header>
    <h1>Title of this article</h1>
    <p>By Richard Clark</p>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

Также заметьте, что использование двух <h1> в рамках этого кусочка кода вполне применимо в HTML 5 (и HTML 4), но может вызвать проблемы с доступностью. Поэтому, мы советуем быть предельно внимательными, если у вас имеется большое количество статей на странице. Более детально этот вопрос будет рассмотрен в другой статье.

Что необходимо включать в элемент <header>

Теперь мы знаем, что существует возможность иметь несколько хедеров на странице. А что насчет обязательных компонентов, которые должен содержать этот элемент для его корректной работы?

Вкратце, типичный <header> содержит как минимум (количество не ограничивается) один заглавный тег (<h1> – <h6>). Вы также можете использовать элемент <hgroup>, но об этом мы поговорим в другой статье (прочитать больше про hgroup в спецификации). Элемент может иметь и другое наполнение, как, например, содержание, логотипы или форму поиска. Согласно последним изменениям в спецификации, отныне можно включать в хедер элемент <nav>.

Оформление хедера

Еще один момент, о котором я бы хотел поговорить: в большинстве браузеров для того, чтобы  <header> выполнял роль блочного элемента вам будет необходимо четко обозначить его как блок в ваших CSS, например, так:

header { display:block;}

Фактически, вам нужно будет делать это для большинства блочных элементов в HTML 5. Как только это свойство станет заданным в браузерах по умолчанию, мы вам сообщим и вы сможете сберечь драгоценные байты ваших CSS. Тем временем, постарайтесь быть в курсе того, что было и что не было внедрено в браузерные движки на этом ресурсе.

Заключение

Таким образом, элемент  <header> предоставляет нам дополнительные возможности семантического содержания для описания верхней части секции.

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

• Голограммы, пленочные засветки и шейдеры на чистом CSS
• «Запашки» кода React-компонентов
• Псевдокласс :has() — не только «родительский селектор»