Тег <header>
Синтаксис
<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 |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <header> | Да | Да | Да | Да | Да |
