Пошук уроків, статей та іншого контенту
Пояснює, як виділити унікальний основний вміст документа елементом main.
<main><main> — семантичний HTML-елемент, який позначає головний унікальний вміст вебсторінки.
Це та частина документа, заради якої користувач відкрив сторінку. Наприклад:
текст статті;
опис товару;
форма реєстрації;
результати пошуку;
вміст сторінки профілю;
основна інформація про послугу.
Елемент <main> допомагає браузерам, пошуковим системам і допоміжним технологіям зрозуміти структуру сторінки.
<main>
<h1>Назва сторінки</h1>
<p>Головний вміст сторінки розташований усередині елемента main.</p>
</main><main> є семантичним елементом. Це означає, що він описує призначення вмісту, а не лише його зовнішній вигляд.
Сам по собі <main> не додає спеціального оформлення. Щоб змінити його вигляд, використовують CSS.
Зазвичай <main> розташовують між заголовком сторінки та нижньою частиною документа:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Магазин книг</title>
<style>
body {
max-width: 900px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
header,
main,
aside,
footer {
padding: 20px;
margin-bottom: 16px;
border: 1px solid #cccccc;
border-radius: 8px;
}
nav a {
margin-right: 12px;
}
</style>
</head>
<body>
<header>
<p>Магазин книг</p>
<nav aria-label="Головна навігація">
<a href="/">Головна</a>
<a href="/books">Книги</a>
<a href="/contacts">Контакти</a>
</nav>
</header>
<main>
<h1>Книга тижня</h1>
<p>
Цього тижня радимо прочитати книгу про основи веброзробки.
</p>
<h2>Чому варто її прочитати</h2>
<ul>
<li>Зрозуміле пояснення основ.</li>
<li>Практичні приклади.</li>
<li>Підходить для початківців.</li>
</ul>
<button type="button">Додати до списку бажань</button>
</main>
<aside>
<h2>Популярні категорії</h2>
<p>HTML, CSS, JavaScript</p>
</aside>
<footer>
<p>© 2026 Магазин книг</p>
</footer>
</body>
</html>У цьому прикладі:
<header> містить вступну частину та навігацію;
<nav> містить основні посилання для переходу сторінкою;
<main> містить унікальну інформацію про книгу тижня;
<aside> містить додаткову інформацію;
<footer> містить нижню частину сторінки.
<main>Усередині <main> розташовують вміст, який є основним для конкретної сторінки.
Наприклад, для сторінки статті:
<main>
<article>
<h1>Як працює HTML</h1>
<p>HTML описує структуру вебсторінки за допомогою елементів.</p>
</article>
</main>Для сторінки з формою:
<main>
<h1>Створити обліковий запис</h1>
<form>
<label>
Ім’я
<input type="text" name="name">
</label>
<label>
Електронна пошта
<input type="email" name="email">
</label>
<button type="submit">Зареєструватися</button>
</form>
</main>Для сторінки результатів пошуку:
<main>
<h1>Результати пошуку</h1>
<section>
<h2>Знайдені товари</h2>
<p>За вашим запитом знайдено 12 товарів.</p>
</section>
</main><main> і повторювані частини сторінкиНа багатьох сторінках сайту повторюються однакові частини:
логотип;
головне меню;
бічна панель;
нижня частина сторінки;
повідомлення про авторські права.
Такі повторювані частини зазвичай не належать до <main>. Вони розміщуються в інших семантичних елементах:
<header>
<!-- Повторюваний заголовок сайту -->
</header>
<main>
<!-- Унікальний вміст поточної сторінки -->
</main>
<footer>
<!-- Повторювана нижня частина сайту -->
</footer>Якщо одна й та сама навігація показується на всіх сторінках, її не слід поміщати в <main>.
<main> використовуватиДля звичайної HTML-сторінки слід використовувати один видимий <main>.
Він має описувати головний вміст усього документа, а не окрему маленьку частину сторінки.
Правильно:
<body>
<header>
<nav>
<a href="/">Головна</a>
<a href="/about">Про нас</a>
</nav>
</header>
<main>
<h1>Про нашу компанію</h1>
<p>Основна інформація про компанію.</p>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>Неправильно:
<body>
<main>
<header>
<h1>Назва сторінки</h1>
</header>
<main>
<p>Вміст сторінки</p>
</main>
</main>
</body>У цьому прикладі один <main> помилково вкладено в інший. <main> не призначений для створення окремих блоків усередині основного вмісту.
Для поділу вмісту всередині <main> використовуйте, наприклад, <section> або <article>:
<main>
<h1>Новини</h1>
<section>
<h2>Останні новини</h2>
<p>Новина про подію.</p>
</section>
<section>
<h2>Популярні новини</h2>
<p>Ще одна новина.</p>
</section>
</main><main>, <section> та <article>Ці елементи можуть використовуватися разом, але мають різне призначення:
<main> — головний вміст усієї сторінки;
<section> — тематичний розділ сторінки;
<article> — самостійний матеріал, який можна поширити або використати окремо.
Приклад:
<main>
<h1>Блог</h1>
<section>
<h2>Останні статті</h2>
<article>
<h3>Що таке HTML</h3>
<p>HTML використовується для опису структури сторінок.</p>
</article>
<article>
<h3>Що таке CSS</h3>
<p>CSS використовується для оформлення сторінок.</p>
</article>
</section>
</main>У цьому прикладі:
<main> охоплює весь головний вміст блогу;
<section> об’єднує останні статті;
кожен <article> є окремою статтею.
Допоміжні технології можуть розпізнавати <main> як область із головним вмістом сторінки. Це дає змогу користувачу швидше перейти до потрібної частини документа, минаючи повторювану навігацію.
Для цього не потрібно додавати role="main":
<main>
<h1>Головний вміст</h1>
</main>Елемент <main> уже має відповідну семантику. Додавання зайвого role не покращує цей приклад.
Водночас <main> не замінює заголовок. У головному вмісті зазвичай має бути заголовок <h1>, який описує призначення поточної сторінки:
<main>
<h1>Наші курси</h1>
<p>Оберіть курс для навчання.</p>
</main><div> замість <main><div class="main-content">
<h1>Про компанію</h1>
<p>Інформація про компанію.</p>
</div>Такий код може виглядати правильно, але <div> не повідомляє про призначення вмісту.
Краще:
<main class="main-content">
<h1>Про компанію</h1>
<p>Інформація про компанію.</p>
</main>Клас можна залишити, якщо він потрібен для CSS.
<main><main>
<nav>
<a href="/">Головна</a>
<a href="/products">Товари</a>
</nav>
<h1>Список товарів</h1>
</main>Якщо навігація є загальною навігацією сайту, її краще розмістити в <header> або в іншому відповідному місці:
<header>
<nav>
<a href="/">Головна</a>
<a href="/products">Товари</a>
</nav>
</header>
<main>
<h1>Список товарів</h1>
</main><main> на одній сторінціНе створюйте окремий <main> для кожного розділу:
<main>
<h1>Каталог</h1>
</main>
<main>
<h1>Акції</h1>
</main>Оберіть один головний вміст і об’єднайте розділи в ньому:
<main>
<h1>Каталог</h1>
<section>
<h2>Акції</h2>
<p>Спеціальні пропозиції цього тижня.</p>
</section>
</main><main> не додає рамку, відступи, фон або інше візуальне оформлення. Для цього потрібен CSS:
main {
max-width: 800px;
margin: 0 auto;
padding: 24px;
}<main> позначає головний унікальний вміст HTML-документа.
На звичайній сторінці використовують один видимий <main>.
Повторювані частини сайту, такі як навігація та нижня частина сторінки, зазвичай розміщують поза <main>.
Усередині <main> можна використовувати <section>, <article>, заголовки, списки, форми та інші елементи.
<main> покращує семантику й доступність сторінки.
Елемент <main> не додає стилів автоматично — його зовнішній вигляд налаштовують за допомогою CSS.