Тег main: основное содержимое - когда его нужно указывать на странице, а когда не нужно? : Code4Web

Тег main: основное содержимое — когда его нужно указывать на странице, а когда не нужно?

На чтение 2 мин Просмотров 9 Опубликовано 22.03.2024 Обновлено 22.03.2024

Содержание статьи

Тег <main> в HTML5 предназначен для обозначения основного содержимого веб-страницы. Он помогает поисковым системам и вспомогательным технологиям (например, экранным читалкам) понять, какая часть контента является центральной или наиболее важной на странице. Вот несколько рекомендаций по использованию тега <main>:

Когда его нужно указывать:

На страницах с четко выделенным основным контентом. Это могут быть статьи, блоги, форумы, страницы продуктов в интернет-магазине и т.д. Если страница содержит конкретный основной контент, который представляет собой уникальное значение страницы, его следует обернуть в тег <main>.
Для улучшения доступности. Использование тега <main> позволяет пользователям вспомогательных технологий быстро найти и перейти к основному содержанию страницы, минуя повторяющиеся элементы навигации и шапку сайта.

Когда его не нужно использовать:

На страницах, где нет четко выделенного основного содержания. Например, на главной странице сайта, где представлены различные секции и нет одного центрального блока контента, использование <main> может быть неоправданным.
Более одного раза на странице. Спецификация HTML5 указывает, что на одной странице должен быть только один элемент <main>. Это обеспечивает однозначность в определении основного содержимого.
Для обертывания всего содержимого страницы. Тег <main> должен использоваться только для обозначения уникального и основного контента, исключая такие элементы, как шапка (<header>), подвал (<footer>), навигационные блоки (<nav>) и боковые панели (<aside>).

Пример использования:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Пример страницы</title>

</head>

<body>

<header>

<!-- Шапка сайта -->

</header>

<nav>

<!-- Навигация -->

</nav>

<main>

<!-- Основное содержание страницы -->

</main>

<aside>

<!-- Боковая панель или дополнительное содержание -->

</aside>

<footer>

<!-- Подвал сайта -->

</footer>

</body>

</html>

Использование тега <main> следует рассматривать как часть общих усилий по семантической разметке веб-страницы, что улучшает её структуру, доступность и SEO. Этот тег стал важным элементом в наборе инструментов современного веб-разработчика для создания доступных и легко навигируемых веб-сайтов.