skip to main content

<header>

html

Кратко 🔗

<header> создаёт «шапку» — верхнюю часть страницы сайта.

Обычно здесь находятся логотип, поисковая строка и кнопки навигации.

Пример 🔗

<header>
<img src="yandex_logo.png" alt="Яндекс" />
</header>

Как это понять 🔗

Контейнер <header> помогает собрать шапку сайта — самую верхнюю его часть, где обычно находятся логотип, строка поиска, меню, кнопки соцсетей или другие ключевые элементы.

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

<header> можно закрепить в окне браузера, чтобы он всегда был доступен пользователю во время прокрутки страницы.

Как пишется 🔗

Тег <header>...</header> всегда закрывается.

На странице может быть несколько тегов <header>. Но их нельзя помещать в контейнеры <footer>, <address> или другой <header>.

Атрибуты 🔗

Можно применить любые универсальные атрибуты.

Ещё пример 🔗

Вот как будет выглядеть <header> на странице-портфолио:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>header</title>
</head>
<body>
<!-- Шапка -->
<header>
<h1>Ольга Данилюк</h1>
</header>
<!-- End Шапка -->

<article>
<h2>Добро пожаловать!</h2>
<p>Рада приветствовать вас на своем сайте.</p>
</article>
<footer>Copyright Ольга Данилюк</footer>
</body>
</html>

В работе 🔗

Алёна,

🛠 На главной странице сайта в header принято оборачивать первый экран. А вот на внутренних страницах в этот тег лучше обернуть повторяющуюся часть, в которой обычно находятся логотип и навигация по сайту.

Если придерживаться принципа, при котором каждый блок находится в отдельном файле, хедер можно реализовать один раз и вставлять уже готовый элемент на все страницы.


Автор: Владимир 👨‍🔧