Элементы <header> и <footer> предназначены для добавления «шапки» и «подвала» веб-страницы или раздела. Соответственно, это вступительный и заключительный элементы веб-страницы.
Элемент <header>
Шапка сайта представляет собой раздел, с которого начинается сайт, как правило, он содержит логотип, название сайта, форму поиска по сайту и др. В примере 1 показано использование <header> для сайта целиком.
Пример 1. Шапка сайта
<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset="utf-8">
</head>
<body>
<header>
<img src="/example/image/logo.png" alt="Логотип"
width="100" height="100">
<h1>Добро пожаловать на сайт</h1>
</header>
<main>
Основное содержимое
</main>
</body>
</html>
Каждый раздел, созданный через <article>, <aside>, <nav>, <section>, также может содержать <header>. В этом случае элемент <header> уже будет задавать шапку раздела, а не сайта. Внутрь <header> можно добавить заголовок раздела с помощью элементов <h2>, <h3> и далее, а также другие элементы, вроде поисковой формы, оглавления, картинки. В примере 2 показано использование <header> для раздела. Заметьте, шапку из предыдущего примера мы сохранили, поскольку шапка сайта и шапка раздела могут сосуществовать вместе.
Пример 2. Шапка раздела
<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset="utf-8">
</head>
<body>
<header>
<img src="/example/image/logo.png" alt="Логотип"
width="100" height="100">
<h1>Добро пожаловать на сайт</h1>
</header>
<section>
<header>
<h2>Новости</h2>
<p><input type="search"
placeholder="Поиск новостей"></p>
</header>
<p>Содержимое раздела</p>
</section>
</body>
</html>
Для <header> есть определённые ограничения — элемент нельзя вкладывать внутрь другого <header>, а также внутрь <address> и <footer>. Внутри <header> не должно быть элемента <main>.
Если <header> содержит единственный заголовок, то обычно нет смысла использовать <header>, заголовок в раздел можно вставлять напрямую.
Элемент <footer>
Элемент <footer> задаёт подвал сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
Чтобы определить подвал для сайта, <footer> размещают внутри <body>, подобно элементу <header>, как показано в примере 3.
Пример 3. Подвал сайта
<!DOCTYPE html>
<html>
<head>
<title>footer</title>
<meta charset="utf-8">
</head>
<body>
<footer>
<p>Copyright © <time datetime="2018">2018</time>
Black Mesa Research Facility</p>
<address>New Mexico, USA.</address>
</footer>
</body>
</html>
Здесь внутри <footer> вставлен адрес компании с помощью элемента <address> и копирайт. Год можно выделить особо с помощью элемента <time> с атрибутом datetime. В браузере год при этом никак не будет отличаться от обычного текста, разметка предназначена для поисковых систем.
Учтите, что элемент <footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>. Внутри <footer> не должно быть элемента <main>.
Кроме того, мы можем вставить <footer> внутрь статьи, чтобы показать дату её публикации (пример 4).
Пример 4. Подвал статьи
<!DOCTYPE html>
<html>
<head>
<title>footer</title>
<meta charset="utf-8">
</head>
<body>
<article>
<header>
<h1>О влиянии металлических инструментов
на инопланетные организмы</h1>
<p>Автор: Гордон Фримен</p>
</header>
<footer>
<p>Опубликовано
<time datetime="2018-11-27">27 ноября 2018</time></p>
</footer>
</article>
</body>
</html>
В данном примере внутри <article> используется элемент <header> для заголовка статьи и имени автора, а внизу добавлен элемент <footer> для даты публикации.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 01.06.2020