Элемент заголовка HTML5

Последнее обновление 25 мая 2019 08:42:10 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Элемент заголовка

Одним из многих значимых новых элементов, добавленных в HTML5, является элемент заголовка. Мы обсудим элемент заголовка подробно в этом документе.

Назначение элемента заголовка состоит в том, чтобы содержать любой из элементов от h1 до h6, элемент hggroup, таблицу содержимого, форму поиска или связанные логотипы. Этот элемент добавляет семантическое значение к вашей странице HTML5. В общем, это может быть сказано как контейнерный элемент, который может содержать вводный или навигационный контент.

Элемент header не имеет ничего общего с элементом head. И это не вводит новый раздел, но это глава раздела.

использование

 <Заголовок>
<h1> Основной заголовок документа. </ h1>
<p> В этом разделе мы обсуждаем ....... </ p>
</ Заголовок>

Требуются ли начальный и конечный теги

И начальный и конечный теги обязательны.

К каким категориям относится элемент заголовка

Элемент заголовка принадлежит Flow Content.

Где может использоваться элемент заголовка

Может использоваться там, где используется Flow Content.

Какие элементы могут находиться в элементе заголовка

Элемент header может содержать элементы, принадлежащие к категории Flow Content, но не может содержать элемент header или footer.

Атрибуты

Элемент header поддерживает все глобальные атрибуты.

Пример элемента заголовка HTML5

В этом примере показано, как элемент заголовка HTML5 используется для разметки заголовка документа.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML5 header element</title>
<meta name="description" content="This is an example of HTML5 header element. header element is the head of a new section." />
</head>
<body>
<header>
<h1>Example of HTML5 header element</h1>
<p>header element is the head of a new section.
It may contain : </p>
<ul>
<li>h1-h6</li>
<li>hggroup</li>
<li>Table of content</li>
<li>Search Form</li>
<li>Logos</li>
</ul>
</header>
</body>
</html>

Посмотреть пример заголовка HTML5 в отдельном окне браузера.

Пример элемента заголовка HTML5 с несколькими разделами

В этом примере документ имеет первичный заголовок в пределах h1. В следующих двух подразделах h2 используется для разметки заголовка. Последняя часть страницы не является частью разметки заголовка, тем не менее, она является частью последнего подраздела.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML5 header element with multiple sections</title>
<meta name="description" content="Example of HTML5 header element with multiple sections. Content outside the header markup is part of the last subsection." />
</head>
<body>
<header>
<h1>Example of HTML5 header element with multiple sections</h1>
<p>header element is the head of a new section. It may contain : </p>
<nav>
<ul>
<li><a href="#">h1-h6</a></li>
<li><a href="#">hggroup</a></li>
<li><a href="#">Table of content</a></li>
<li><a href="#">Search Form</a></li>
<li><a href="#">Logos</a></li>
</ul>
</nav>
<!--First Subsection -->
<h2>First example : </h2>
<p>It shows using header for main heading of the page.</p>
<!--Second Subsection -->
<h2>Second Example : </h2>
</header>
<p>Shows how to use multiple subsections in a page and how header is used.</p>
</body>
</html>

Совместимость браузера

Мы успешно протестировали приведенный выше пример со следующими версиями браузера.

Особенность	Хром	Firefox (Геккон)	Internet Explorer	опера	Сафари
Базовая поддержка	12.0.742.122	5.0	8,0	11,50	4,0

Предыдущая: HTML5 нижний колонтитул
Далее: тэги HTML вы больше не будете использовать