header и footer

03.06.2022

Элементы <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> для даты публикации.

Lesson Content

Разделы веб-страницы

Participants 286

header и footer

03.06.2022

Элемент <header>

Элемент <footer>