Тег <main>
Тег <main> (укр. – “основний”) в HTML використовується для позначення основного змісту веб-сторінки. Це структурний елемент, який дозволяє відокремити основний контент від іншого супутнього вмісту, такого як заголовки, навігація, футери чи бічні панелі. Використання тегу <main> допомагає покращити доступність веб-сторінки для користувачів, зокрема для тих, хто користується екранними читалками, а також підвищує зручність навігації по сторінці.
Атрибути
Специфічні атрибути
Тег <main> не має специфічних атрибутів.
Глобальні атрибути
Тег <main> підтримує всі глобальні атрибути HTML, включаючи:
- id — унікальний ідентифікатор для елемента. Наприклад:
<main id="content">Основний контент сторінки</main>- class — задає клас для застосування стилів через CSS. Наприклад:
<main class="main-content">Основний контент сторінки</main>- style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<main style="padding: 20px;">Основний контент сторінки</main>- role — дозволяє вказати роль елемента для підвищення доступності. Наприклад:
<main role="main">Основний контент сторінки</main>
Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання тегу <main></title>
</head>
<body>
<header>
<h1>Вітання на нашій сторінці</h1>
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
</header>
<main>
<h2>Основний зміст сторінки</h2>
<p>Це основний блок контенту сторінки, де міститься вся основна інформація, яку ви хочете донести до користувача.</p>
</main>
<footer>
<p>© 2024 Всі права захищено</p>
</footer>
</body>
</html>Додаткові моменти
- За стандартами HTML, на кожній веб-сторінці може бути лише один тег
<main>. Це пов’язано з тим, що цей тег визначає головний зміст сторінки, і більше одного основного блоку на сторінці не передбачається. - Тег
<main>повинен використовуватися для позначення основного змісту сторінки, такого як секції, статті, блоги, продукти тощо. - Тег
<main>не повинен містити елементи, що мають допоміжну функцію, такі як навігаційні панелі (<nav>), заголовки сторінки (<header>) або футери (<footer>). - Якщо на сторінці є рекламні блоки чи інші додаткові елементи, які не є частиною основного контенту, їх не слід вміщувати в тег
<main>. - Тег
<main>допомагає пошуковим системам краще індексувати основний зміст сторінки, а також підвищує доступність контенту для користувачів з обмеженими можливостями. Користувачі з екранними читалками можуть безпосередньо перейти до основного контенту, оминути інші елементи сторінки та зосередитися на важливій інформації. - Тег
<main>не має візуального ефекту сам по собі. Він слугує лише для семантичного маркування основного контенту. Для того, щоб виділити цей блок, потрібно використовувати CSS. - Використання
<main>дозволяє зробити структуру HTML-документа більш зрозумілою як для розробників, так і для пошукових систем. Це дозволяє уникнути перевантаження сторінки непотрібними елементами та зосередитися на основному контенті.
