HTML-тег <main>

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

Тег <main> должен встречаться в документе только один раз и не должен включать повторяющиеся элементы, такие как навигационные ссылки, боковые панели или нижние колонтитулы.

Базовый синтаксис HTML-тега <main>

Базовая структура тега <main> : 

<main>
    Main content of the document goes here.
</main>

Тег <main> выступает в качестве семантического ориентира основного содержимого страницы.

Атрибуты HTML-тега <main>

  • Глобальные атрибуты: тег <main> поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: также поддерживаются такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <main>

Вот простой пример использования тега <main> на веб-странице: 

<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
        </header>

        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

        <main>
            <h2>About Us</h2>
            <p>We are a team of professionals dedicated to creating beautiful web experiences.</p>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Базовый пример HTML-тега main

Пояснение: Тег <main> содержит уникальное содержимое страницы, за исключением навигации, верхнего и нижнего колонтитула.

Использование тега <main> для обеспечения доступности

Тег <main> улучшает доступность, помогая программам чтения с экрана и вспомогательным технологиям определять основное содержание страницы. Например: 

<!DOCTYPE html>
<html lang="en">
    <body>
        <header>
            <h1>My Blog</h1>
        </header>

        <main>
            <article>
                <h2>How to Use the HTML <main> Tag</h2>
                <p>The <main> tag defines the primary content of the page.</p>
            </article>
        </main>

        <footer>
            <p>Thank you for visiting!</p>
        </footer>
    </body>
</html>
Использование тега main для обеспечения доступности

Пояснение: Программы чтения с экрана могут быстро перейти к тегу <main> чтобы пропустить повторяющуюся навигацию и содержимое нижнего колонтитула.

Стилизация тега <main> с помощью CSS

Вы можете стилизовать тег <main> чтобы сделать его визуально отличным: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            main {
                background-color: #f9f9f9;
                padding: 20px;
                border: 1px solid #ddd;
                margin: 20px;
            }

            h2 {
                color: #007BFF;
            }

            p {
                font-size: 16px;
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <main>
            <h2>Main Content</h2>
            <p>This is the central content of the page.</p>
        </main>
    </body>
</html>
Оформление тега main с помощью CSS

Результат: раздел <main> оформлен светлым фоном, отступами и границей, чтобы визуально выделить его как основную область контента.

Практическое применение тега <main>

  • Отображение основного контента: определите основной контент веб-страницы для ясности и доступности.
  • SEO-оптимизация: используйте тег <main> для улучшения семантической структуры и рейтинга в поисковых системах.
  • Навигация с помощью средства чтения с экрана: вспомогательные технологии могут быстро находить основной контент с помощью тега <main> .
  • Более чистая структура HTML: отделите центральное содержимое от заголовков, боковых панелей и нижних колонтитулов для улучшения читабельности.