HTML-тег <header>

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

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

Базовый синтаксис HTML-тега <header>

Основной синтаксис тега <header> :

<header>
    Content such as headings, navigation links, or logos goes here.
</header>

Элемент <header> часто размещается в верхней части страницы или раздела, но не ограничивается этим местом.

Атрибуты HTML-тега <header>

Глобальные атрибуты: тег <header> поддерживает все глобальные атрибуты, такие как id , class , style и data-* .
Атрибуты событий: Тег <header> поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <header>

Вот простой пример заголовка страницы:

<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
            <nav>
                <a href="/home">Home</a> |
                <a href="/about">About</a> |
                <a href="/contact">Contact</a>
            </nav>
        </header>

        <main>
            <p>This is the main content of the page.</p>
        </main>
    </body>
</html>

Пояснение: <header> содержит заголовок и панель навигации в верхней части страницы, предоставляя вводный раздел для пользователей.

Использование тега <header> в статьях

Тег <header> также можно использовать внутри элементов <article> или <section> для создания заголовков для этих разделов:

<!DOCTYPE html>
<html>
    <body>
        <article>
            <header>
                <h2>Understanding HTML header Tag</h2>
                <p>By Jane Doe | December 10, 2024</p>
            </header>

            <p>The header tag is used to define introductory content for a page or section.</p>
        </article>
    </body>
</html>

Пояснение: <header> предоставляет заголовок и метаданные для статьи.

Стилизация тега <header> с помощью CSS

Вы можете стилизовать тег <header> с помощью CSS, чтобы улучшить его внешний вид:

<!DOCTYPE html>
<html>
    <head>
        <style>
            header {
                background-color: #007BFF;
                color: white;
                padding: 20px;
                text-align: center;
                font-family: Arial, sans-serif;
            }

            header nav a {
                color: white;
                text-decoration: none;
                margin: 0 10px;
            }

            header nav a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>My Blog</h1>
            <nav>
                <a href="/home">Home</a>
                <a href="/blog">Blog</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>

        <main>
            <p>Welcome to my blog! Explore and enjoy the content.</p>
        </main>
    </body>
</html>

Результат: заголовок имеет синий фон, белый текст и стилизованные навигационные ссылки, с которыми легко взаимодействовать.

Практическое применение тега <header>

Заголовок главной страницы: определите основной заголовок веб-страницы, включая навигационные меню и элементы брендинга.
Заголовки разделов: создайте заголовки для определенных разделов или статей на странице.
Улучшенная доступность: предоставление семантической структуры для улучшения навигации в программе чтения с экрана.
Брендинг: Размещайте логотипы, слоганы и другие элементы брендинга в верхней части страницы или раздела.