Синтаксис

<header>...</header>

Описание

Тег <header> (от англ. header — заголовок, верхний колонтитул) задаёт «шапку» сайта или верхнюю часть раздела веб-страницы.

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

Внимание!

Тег <header> нельзя вкладывать внутрь другого <header>, а также внутрь элементов <address> и <footer>.

Внутри тега <header> не должно быть элемента <main>.

В одном HTML-документе может быть несколько тегов <header>.

Также тег поддерживает глобальные атрибуты и атрибуты события.

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег header</title>
</head>
<body>
    <header style="display:flex; justify-content: space-between;">
        <img src="img/logo.png" class="logo">
        <ul class="menu">
            <li>
                <a href="/home/">Главная</a>
            </li>
            <li>
                <a href="/about-us/">О нас</a>
            </li>
            <li>
                <a href="/contacts/">Контакты</a>
            </li>
        </ul>
        <a href="tel:+1234567890" class="tel">Звоните нам +1234567890</a>
    </header>
    <main>...<main>
    <footer>...<footer>
</body>
</html>

Отображение в браузере:

Параметры CSS по умолчанию

header {
  display: block;
}

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<header> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.