HTML-тег <main>

Характеристики

Тип: блочный, статичный, семантический
Назначение: Обозначает основное содержимое документа, уникальное для данной страницы.
Родители: Любые HTML-теги, которые допускают потоковый контент, например, <body>, <article>, <section>.
Потомки: Любые HTML-теги, которые могут содержать элементы основного потока, такие как заголовки, параграфы, изображения и другие блочные элементы.
Глобальные атрибуты: все
Атрибуты событий: все

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

<main>
  <h1>Заголовок страницы</h1>
  <p>Основное содержимое страницы.</p>
</main>

Использование в JavaScript

// Получение элемента <main>
const mainElement = document.querySelector('main');

// Изменение содержимого
mainElement.innerHTML = '<p>Новое основное содержимое</p>';

// Добавление класса
mainElement.classList.add('highlighted');

// Изменение стиля
mainElement.style.padding = '20px';

Рекомендации по обеспечению доступности (a11y)

Используйте <main> для обозначения основного содержимого страницы, это помогает вспомогательным технологиям быстро находить и переходить к основному контенту.
Убедитесь, что на странице используется только один <main> элемент.
Не вкладывайте <main> в другие элементы секционирования, такие как <article>, <aside>, <nav>, <header>, <footer>.
Использование более одного <main> на странице может запутать пользователей вспомогательных технологий.
Вложение <main> в другие элементы секционирования может нарушить семантическую структуру документа.

Полезные ссылки