HTML-тег <section>

HTML-тег <section> определяет тематическую группировку контента на веб-странице. Каждый раздел обычно имеет собственный заголовок и представляет собой отдельную часть документа, например главу, вкладку или сегмент. Тег <section> — это семантический элемент, появившийся в HTML5, который делает контент более структурированным и доступным.

Разделы используются для разбиения контента на логические части, что улучшает читаемость и помогает поисковым системам и программам чтения с экрана понимать иерархию контента.

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

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

<section>
    <h2>Section Heading</h2>
    <p>Content goes here...</p>
</section>

Теги заголовков <h2> или другие соответствующие теги заголовков обеспечивают контекст для содержимого раздела.

Пример использования тега <section>

Вот пример организации веб-страницы в несколько разделов: 

<!DOCTYPE html>
<html>
    <body>
        <h1>Web Development Topics</h1>

        <section>
            <h2>HTML</h2>
            <p>HTML is the standard markup language for creating web pages.</p>
        </section>

        <section>
            <h2>CSS</h2>
            <p>CSS is used for styling and designing web pages.</p>
        </section>

        <section>
            <h2>JavaScript</h2>
            <p>JavaScript adds interactivity and dynamic features to websites.</p>
        </section>
    </body>
</html>
Пример использования раздела Тег

Пояснение: Каждая тема заключена в собственный <section> с заголовком и соответствующим содержанием, что создает логичную и структурированную структуру.

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

Вы можете стилизовать тег <section> , чтобы визуально различать разделы на вашей веб-странице: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            section {
                margin: 20px 0;
                padding: 10px;
                border: 1px solid #ddd;
                background-color: #f9f9f9;
                border-radius: 5px;
            }
            section h2 {
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h1>Styled Sections</h1>

        <section>
            <h2>HTML</h2>
            <p>HTML is the standard markup language for creating web pages.</p>
        </section>

        <section>
            <h2>CSS</h2>
            <p>CSS is used for styling and designing web pages.</p>
        </section>

        <section>
            <h2>JavaScript</h2>
            <p>JavaScript adds interactivity and dynamic features to websites.</p>
        </section>
    </body>
</html>
Оформление раздела Тегирование с помощью CSS

Результат: каждый раздел отображается в визуально различимом блоке с фоновым цветом, отступами и скруглёнными углами. Заголовки оформлены синим цветом.

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

  • Глобальные атрибуты: тег <section> поддерживает все глобальные атрибуты, такие как id , class и style .
  • Роли ARIA: вы можете добавить роли ARIA, например region для обеспечения доступности.

Например, назначение атрибута id каждому разделу может помочь в создании якорных ссылок для навигации. 

<section id="html">
    <h2>HTML</h2>
    <p>Content about HTML...</p>
</section>

<section id="css">
    <h2>CSS</h2>
    <p>Content about CSS...</p>
</section>

Результат: Теперь на разделы можно ссылаться напрямую, используя якоря #html или #css в гиперссылках.

Разница между <section> и похожими тегами

  • <section>: представляет собой отдельную тематическую группу контента.
  • <статья>: используется для автономного контента, который может распространяться независимо, например, записи в блогах или новостные статьи.
  • <div>: общий контейнер для группировки контента, не имеющий семантического значения.

Используйте тег <section> , когда контент имеет тематическую цель, и рассмотрите <article> для автономных, повторно используемых компонентов.

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

  • Макеты веб-сайта: организуйте основные разделы, такие как «О нас», «Услуги» и «Связаться с нами».
  • Документация: структурируйте техническую документацию по логическим частям.
  • Интерактивные страницы: группируйте связанный интерактивный контент, такой как формы и инструкции к ним.
  • Доступность: используйте роли ARIA для улучшения навигации для программ чтения с экрана.

Тег <section> помогает создавать чистые, организованные и доступные макеты, улучшая как пользовательский опыт, так и удобство обслуживания.