Теория
Теория

Теги header и footer, шапка и подвал

Кроме уникального основного содержимого страницы, у нас есть повторяющиеся на других страницах вводная часть и заключительная часть.

Вводную часть страницы, которую чаще называют «шапкой», описывает тег <header>. Аналогично ему, заключительную часть страницы, или «подвал», описывает тег <footer>.

<header>
  Я шапка сайта. Могу повторяться на других страницах.
</header>
<main>
  Я основной контент! Живу только на этой странице.
</main>
<footer>
  Я подвал сайта, я как шапка.
</footer>

Обычно на странице появляется по одному тегу <header> и <footer>, но их может быть и больше.

Давайте разметим шапку и подвал главной страницы. В качестве содержания пока используем текстовые «заглушки».

Тег <header> — это не только шапка сайта с логотипом и меню, он может использоваться, например, и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй <header> называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.

С <footer> ситуация аналогичная. В привычном понимании это подвал сайта, с копирайтами, контактной информацией и так далее. Но <footer> может использоваться и в других разделах сайта. Например, внутри статьи в «подвале» можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.

index.html

HTML

<!DOCTYPE html> <html lang="ru"> <head> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <main> Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами. Моё первое задание — вести дневник и честно писать обо всех своих свершениях. </main> </body> </html>

ЗадачиВыполнено

Перед тегом <main> добавьте тег <header> с текстом Шапка сайта,
а затем после <main> добавьте тег <footer> с текстом Подвал сайта.

Теги header и footer, шапка и подвал

Вход

Регистрация

Восстановление доступа