Шапка сайта. Тег header
Шапка сайта. Тег header
Тег header в HTML5, обозначает шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта.
В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа социальных кнопок.
Теги <header> </header> можно использовать несколько раз на странице, например они могут быть использованы как шапка основной статьи стра
ницы, шапка повторяющихся элементов сайдбара (например виджеты) и т.д.
Теги header нельзя помещать внутрь тегов footer, address и сам header
|Рассмотрим расположение тегов header в типичном коде шаблона страницы, созданной с помощью языка HTML5:
Пример:
<!DOCTYPE html>
<html lang="ru">
<!-- Голова страницы сайта -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Название страницы</title>
<link rel="stylesheet" href="css/normalize.css" />
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<header>
Шапка страницы
</header>
<nav>Основное меню страницы</nav>
<div class="main">
<article>Основная статья страницы</article>
<aside>Сайдбар</aside>
</div> <!-- .main -->
<footer>Подвал страницы</footer>
</div> <!-- .wrapper -->
</body>
</html>
Тег header — это блочный элемент.
Семантика — может быть использована как шапка страницы, статьи, какой-либо секции на сайте (например виджета).
Заключение
Тег <header> в HTML5 играет важную роль, обозначая шапку сайта и предоставляя структуру для ключевой информации. Задачи, которые он решает, включают размещение заголовков, логотипов, контактной информации и других элементов, делая страницы более информативными и легкими в восприятии. Его гибкость в использовании позволяет эффективно структурировать различные разделы страницы.
Будьте первым