Пошук уроків, статей та іншого контенту
Показує, як оформлювати вступну частину сторінки за допомогою елемента header.
headerЕлемент <header> позначає вступну частину сторінки або окремого розділу. У ній зазвичай розміщують:
логотип або назву сайту;
заголовок;
короткий опис;
навігацію;
інші вступні елементи.
<header> — семантичний елемент HTML. Це означає, що він описує призначення частини сторінки, а не її зовнішній вигляд.
<header>
<h1>Мій навчальний сайт</h1>
<p>Матеріали для вивчення веброзробки</p>
</header>Сам по собі елемент <header> не створює особливого оформлення. Для кольорів, відступів і розташування використовують CSS.
header для всієї сторінкиНайчастіше <header> розміщують на початку документа, усередині <body>. Такий елемент є вступною частиною всієї сторінки.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій блог</title>
<style>
header {
padding: 24px;
background-color: #1f2937;
color: white;
text-align: center;
}
header h1 {
margin: 0 0 8px;
}
header p {
margin: 0;
color: #d1d5db;
}
</style>
</head>
<body>
<header>
<h1>Мій блог</h1>
<p>Статті про HTML і CSS</p>
</header>
<main>
<h2>Останні публікації</h2>
<p>Тут розміщено вміст сторінки.</p>
</main>
</body>
</html>У цьому прикладі:
<header> містить назву блогу та його опис;
<main> містить основний вміст сторінки;
CSS додає фоновий колір, внутрішні відступи та вирівнювання тексту.
headerВступна частина сайту часто містить навігацію. Для самої навігації використовують елемент <nav>, а <header> об’єднує її з назвою або логотипом сайту.
<header class="site-header">
<a class="logo" href="/">Навчання Web</a>
<nav aria-label="Основна навігація">
<a href="/courses">Курси</a>
<a href="/articles">Статті</a>
<a href="/about">Про сайт</a>
</nav>
</header>У цьому прикладі:
<header> є вступною частиною сайту;
<a class="logo"> веде на головну сторінку;
<nav> групує навігаційні посилання;
атрибут aria-label допомагає описати призначення навігації.
Зовнішній вигляд можна налаштувати за допомогою CSS:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Навігація сайту</title>
<style>
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #2563eb;
}
.logo,
nav a {
color: white;
text-decoration: none;
}
.logo {
font-size: 20px;
font-weight: bold;
}
nav {
display: flex;
gap: 16px;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header class="site-header">
<a class="logo" href="/">Навчання Web</a>
<nav aria-label="Основна навігація">
<a href="/courses">Курси</a>
<a href="/articles">Статті</a>
<a href="/about">Про сайт</a>
</nav>
</header>
<main>
<h1>Вітаємо на сайті</h1>
<p>Оберіть потрібний розділ у навігації.</p>
</main>
</body>
</html>header для окремого розділуЕлемент <header> можна використовувати не лише для всієї сторінки. Він також може бути вступною частиною окремого елемента <article> або <section>.
<main>
<article>
<header>
<h2>Як працює HTML</h2>
<p>Опубліковано 10 січня 2025 року</p>
</header>
<p>
HTML описує структуру вебсторінки за допомогою елементів.
</p>
</article>
</main>Тут <header> належить саме статті. Він містить її заголовок і дату публікації, а не вступну частину всього сайту.
Таким чином, призначення <header> визначається контекстом:
усередині <body> — вступна частина сторінки;
усередині <article> — вступна частина статті;
усередині <section> — вступна частина розділу.
header не є заголовкомНазва <header> може нагадувати заголовок, але це контейнер, а не текстовий заголовок.
<header>
<h1>Назва сторінки</h1>
</header>У цьому прикладі:
<header> — контейнер для вступної частини;
<h1> — головний заголовок сторінки.
Не слід замінювати <h1> елементом <header>.
headerНа сторінці може бути один загальний <header> і додаткові <header> усередині окремих статей або розділів.
<body>
<header>
<h1>Мій журнал</h1>
</header>
<main>
<article>
<header>
<h2>Перша стаття</h2>
<p>Короткий опис статті</p>
</header>
<p>Текст статті.</p>
</article>
</main>
</body>Кожен із цих елементів має власний контекст:
перший описує вступну частину всього сайту;
другий описує вступну частину статті.
header не обов’язково має містити заголовокУ вступній частині може бути логотип, навігація або інша інформація. Проте для більшості змістових розділів доречно додавати заголовок, щоб було зрозуміло, про що цей розділ.
div замість headerТакий код технічно працює:
<div class="header">
<h1>Мій сайт</h1>
</div>Але він не описує призначення контейнера. Якщо це вступна частина сторінки або розділу, краще використати семантичний елемент:
<header>
<h1>Мій сайт</h1>
</header>Клас header можна використовувати для стилізації, але він не замінює HTML-елемент <header>.
header для нижньої частини сторінкиДля нижньої частини сторінки призначений елемент <footer>, а не <header>.
<header>
<h1>Мій сайт</h1>
</header>
<main>
<p>Основний вміст сторінки.</p>
</main>
<footer>
<p>© 2025 Мій сайт</p>
</footer>headerНе кожен контейнер із текстом потребує <header>. Використовуйте його тоді, коли контейнер справді є вступною частиною сторінки, статті або розділу.
<header> позначає вступну частину сторінки або окремого розділу.
У ньому можуть міститися логотип, назва, заголовок, опис і навігація.
<header> є контейнером, а не текстовим заголовком.
Для заголовків усередині нього використовують <h1>, <h2> та інші елементи заголовків.
header можна використовувати для всієї сторінки, статті або розділу.
Зовнішній вигляд <header> налаштовують за допомогою CSS.
Не слід плутати HTML-елемент <header> із класом header.