Атрибут id тега <main>

Описание

Атрибут id для тега <main> задает уникальный идентификатор основному содержимому страницы. Этот идентификатор может использоваться для:

  • Стилизации через CSS
  • Обращения через JavaScript
  • Создания якорей для навигации
  • Связи с ARIA-атрибутами
Пример использования:
<main id="primary-content"> <h1>Основной контент страницы</h1> <!-- Содержимое --> </main>

Особенности работы:

Характеристика Описание Пример
Уникальность Должен быть единственным в документе id="main-content"
Синтаксис Должен начинаться с буквы, может содержать цифры, дефисы, подчеркивания id="content-1"
Чувствительность Регистрозависимый MainContent ≠ maincontent

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

<style> #primary-content { max-width: 1200px; margin: 0 auto; padding: 20px; } #primary-content h1 { color: #333; } </style> <main id="primary-content"> <h1>Заголовок</h1> <!-- Контент --> </main>

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

<main id="dynamic-content"> <!-- Контент --> </main> <script> // Получение элемента const mainContent = document.getElementById('dynamic-content'); // Изменение содержимого mainContent.innerHTML += '<p>Новый динамический контент</p>'; // Добавление класса mainContent.classList.add('highlighted'); </script>

Рекомендации по именованию:

  • Используйте осмысленные имена (main-content)
  • Избегайте общих названий (container, box)
  • Придерживайтесь единого стиля (kebab-case рекомендуем)
  • Не используйте цифры в начале (1-content - неверно)

Создание якорных ссылок:

<nav> <a href="#main-content">К основному содержимому</a> </nav> <main id="main-content" tabindex="-1"> <h1>Основной контент</h1> <!-- Содержимое --> </main>

Примечание: Хотя id является мощным инструментом, для стилизации предпочтительнее использовать классы, оставляя id для JavaScript-взаимодействия и якорных ссылок. Убедитесь, что идентификаторы уникальны в рамках всего документа.