0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>29 июл 2025</li>
2
<ul><li>29 июл 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Разбираемся, что такое < section >, когда его стоит использовать, чем он отличается от других тегов и как его правильно применять в проектах.</p>
4
</ul><p>Разбираемся, что такое < section >, когда его стоит использовать, чем он отличается от других тегов и как его правильно применять в проектах.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Тег < section > помогает разбивать HTML-документ на отдельные тематические части: новости, услуги, контакты, отзывы. Благодаря ему пользователи и поисковые системы лучше ориентируются на странице, а самим разработчикам становится проще читать код. В статье поговорим о том, где и когда применять этот тег.</p>
7
<p>Тег < section > помогает разбивать HTML-документ на отдельные тематические части: новости, услуги, контакты, отзывы. Благодаря ему пользователи и поисковые системы лучше ориентируются на странице, а самим разработчикам становится проще читать код. В статье поговорим о том, где и когда применять этот тег.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Что такое тег <section> и зачем он нужен</a></li>
9
<ul><li><a>Что такое тег <section> и зачем он нужен</a></li>
10
<li><a>Какой синтаксис у тега <section> и какие атрибуты он может использовать</a></li>
10
<li><a>Какой синтаксис у тега <section> и какие атрибуты он может использовать</a></li>
11
<li><a>Чем <section> отличается от <div>, <article>, <main></a></li>
11
<li><a>Чем <section> отличается от <div>, <article>, <main></a></li>
12
<li><a>Как <section> влияет на доступность и навигацию</a></li>
12
<li><a>Как <section> влияет на доступность и навигацию</a></li>
13
<li><a>Как стилизуется тег <section></a></li>
13
<li><a>Как стилизуется тег <section></a></li>
14
<li><a>Полезные советы и лайфхаки</a></li>
14
<li><a>Полезные советы и лайфхаки</a></li>
15
</ul><p>Этот тег используют, если на странице есть несколько разных тематических блоков:</p>
15
</ul><p>Этот тег используют, если на странице есть несколько разных тематических блоков:</p>
16
<ul><li>описание проекта;</li>
16
<ul><li>описание проекта;</li>
17
<li>список услуг;</li>
17
<li>список услуг;</li>
18
<li>раздел с отзывами;</li>
18
<li>раздел с отзывами;</li>
19
<li>контактная информация.</li>
19
<li>контактная информация.</li>
20
</ul><p>То есть во всех случаях, когда хочется сгруппировать контент по смыслу, обозначить логически обособленную часть страницы.</p>
20
</ul><p>То есть во всех случаях, когда хочется сгруппировать контент по смыслу, обозначить логически обособленную часть страницы.</p>
21
<p>Пример разметки:</p>
21
<p>Пример разметки:</p>
22
<header>Шапка сайта</header> <main> <section> <h2>Описание проекта</h2> <p>Этот проект создан для того, чтобы...</p> </section> <section> <h2>Технические характеристики</h2> <ul> <li>Скорость загрузки: 1,2 сек</li> <li>Поддержка всех браузеров</li> </ul> </section> </main> <footer>Подвал</footer><p><strong>Важно</strong>: внутри<strong><section></strong>должен быть заголовок -<strong><h2></strong>,<strong><h3></strong>и так далее. Даже если он не отображается на странице, он должен быть в коде, иначе теряется смысловая структура.</p>
22
<header>Шапка сайта</header> <main> <section> <h2>Описание проекта</h2> <p>Этот проект создан для того, чтобы...</p> </section> <section> <h2>Технические характеристики</h2> <ul> <li>Скорость загрузки: 1,2 сек</li> <li>Поддержка всех браузеров</li> </ul> </section> </main> <footer>Подвал</footer><p><strong>Важно</strong>: внутри<strong><section></strong>должен быть заголовок -<strong><h2></strong>,<strong><h3></strong>и так далее. Даже если он не отображается на странице, он должен быть в коде, иначе теряется смысловая структура.</p>
23
<p>Тег <section> - парный, то есть его нужно открыть (<section>) и потом закрыть (</section>). Внутри обычно находится заголовок (<h1> - <h6>) и основной контент.</p>
23
<p>Тег <section> - парный, то есть его нужно открыть (<section>) и потом закрыть (</section>). Внутри обычно находится заголовок (<h1> - <h6>) и основной контент.</p>
24
<section> <h2>Важное о нашем ЖК</h2> <p>Мы всегда заботимся о том, чтобы жителям нашего ЖК было комфортно.</p> </section><p>В браузере это отобразится как обычный блок с текстом и заголовком.</p>
24
<section> <h2>Важное о нашем ЖК</h2> <p>Мы всегда заботимся о том, чтобы жителям нашего ЖК было комфортно.</p> </section><p>В браузере это отобразится как обычный блок с текстом и заголовком.</p>
25
Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Тег <section> поддерживает все стандартные глобальные атрибуты HTML. С их помощью можно задать стили, улучшить доступность и управлять отображением. Давайте рассмотрим пример использования атрибутов:</p>
25
Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Тег <section> поддерживает все стандартные глобальные атрибуты HTML. С их помощью можно задать стили, улучшить доступность и управлять отображением. Давайте рассмотрим пример использования атрибутов:</p>
26
<section id="product-description" class="highlight" aria-label="Описание товара"> <h2>Описание товара</h2> <p>Этот товар идеально подходит для начинающих и опытных пользователей.</p> </section><p>Что здесь происходит:</p>
26
<section id="product-description" class="highlight" aria-label="Описание товара"> <h2>Описание товара</h2> <p>Этот товар идеально подходит для начинающих и опытных пользователей.</p> </section><p>Что здесь происходит:</p>
27
<ul><li>id="product-description" задаёт уникальный идентификатор, по которому можно создать якорную ссылку. Это удобно, если вы хотите, чтобы по нажатию на пункт меню или на кнопку страница прокручивалась к нужному разделу.</li>
27
<ul><li>id="product-description" задаёт уникальный идентификатор, по которому можно создать якорную ссылку. Это удобно, если вы хотите, чтобы по нажатию на пункт меню или на кнопку страница прокручивалась к нужному разделу.</li>
28
<li>class="highlight" задаёт имя класса для стилизации через CSS.</li>
28
<li>class="highlight" задаёт имя класса для стилизации через CSS.</li>
29
<li>aria-label="Описание товара" добавляет невидимый альтернативный заголовок для скринридеров, если визуального заголовка нет или он недостаточно информативен.</li>
29
<li>aria-label="Описание товара" добавляет невидимый альтернативный заголовок для скринридеров, если визуального заголовка нет или он недостаточно информативен.</li>
30
</ul><p>Иногда непонятно, какой тег использовать: <section>, <div>, <article> или <main>. Давайте разберёмся, в чём между ними разница.</p>
30
</ul><p>Иногда непонятно, какой тег использовать: <section>, <div>, <article> или <main>. Давайте разберёмся, в чём между ними разница.</p>
31
<ul><li><div> - просто контейнер без смысла. Он не говорит браузеру, что внутри. Обычно нужен, чтобы сгруппировать элементы и задать им стили. Это может быть обёртка для карточки товара или сетки.</li>
31
<ul><li><div> - просто контейнер без смысла. Он не говорит браузеру, что внутри. Обычно нужен, чтобы сгруппировать элементы и задать им стили. Это может быть обёртка для карточки товара или сетки.</li>
32
<li><article> - самостоятельный блок. Его можно скопировать и вставить в другую страницу, и он всё равно будет понятен. Подходит для новостей, постов, отзывов, рецептов, описаний товаров.</li>
32
<li><article> - самостоятельный блок. Его можно скопировать и вставить в другую страницу, и он всё равно будет понятен. Подходит для новостей, постов, отзывов, рецептов, описаний товаров.</li>
33
<li><main> - основная часть страницы. Всё, ради чего пользователь сюда пришёл. На странице он должен быть только один, и обычно внутри него уже размещают <section>, <article> и другие части.</li>
33
<li><main> - основная часть страницы. Всё, ради чего пользователь сюда пришёл. На странице он должен быть только один, и обычно внутри него уже размещают <section>, <article> и другие части.</li>
34
<li><section> - смысловой блок внутри страницы. Он объединяет контент по теме. У такой секции обязательно должен быть заголовок, чтобы было понятно, о чём она.</li>
34
<li><section> - смысловой блок внутри страницы. Он объединяет контент по теме. У такой секции обязательно должен быть заголовок, чтобы было понятно, о чём она.</li>
35
</ul><p>Простой тест: можете ли вы придумать заголовок для блока? Если да, возможно, нужен <section>. Если нет, скорее всего, <div> подойдёт лучше.</p>
35
</ul><p>Простой тест: можете ли вы придумать заголовок для блока? Если да, возможно, нужен <section>. Если нет, скорее всего, <div> подойдёт лучше.</p>
36
<p>Тег <section> помогает лучше организовать страницу и делает её удобнее для разных пользователей. Особенно это важно для тех, кто использует скринридеры.</p>
36
<p>Тег <section> помогает лучше организовать страницу и делает её удобнее для разных пользователей. Особенно это важно для тех, кто использует скринридеры.</p>
37
<p>Когда внутри каждой секции есть заголовок (<h2>, <h3> и так далее), это упрощает навигацию. Скринридеры могут быстро распознать структуру страницы и дать пользователю возможность перейти к нужному разделу - как по оглавлению.</p>
37
<p>Когда внутри каждой секции есть заголовок (<h2>, <h3> и так далее), это упрощает навигацию. Скринридеры могут быстро распознать структуру страницы и дать пользователю возможность перейти к нужному разделу - как по оглавлению.</p>
38
<p>Если заголовок по каким-то причинам не нужен на экране, можно скрыть его или добавить описание с помощью атрибута aria-label. Это даёт скринридерам контекст, даже если пользователь не видит заголовок. Пример:</p>
38
<p>Если заголовок по каким-то причинам не нужен на экране, можно скрыть его или добавить описание с помощью атрибута aria-label. Это даёт скринридерам контекст, даже если пользователь не видит заголовок. Пример:</p>
39
<section aria-label="Отзывы клиентов"> <!-- Содержимое блока без визуального заголовка --> </section><p>Тег <section> ведёт себя как обычный блочный элемент: он занимает всю ширину родителя и начинается с новой строки. Это значит, что его можно оформлять так же, как и другие блоки: добавлять фон, отступы, рамки, тени и любые другие стили.</p>
39
<section aria-label="Отзывы клиентов"> <!-- Содержимое блока без визуального заголовка --> </section><p>Тег <section> ведёт себя как обычный блочный элемент: он занимает всю ширину родителя и начинается с новой строки. Это значит, что его можно оформлять так же, как и другие блоки: добавлять фон, отступы, рамки, тени и любые другие стили.</p>
40
<p>Ниже пример страницы, в которой каждая секция оформлена по-своему:</p>
40
<p>Ниже пример страницы, в которой каждая секция оформлена по-своему:</p>
41
<p><strong>HTML</strong></p>
41
<p><strong>HTML</strong></p>
42
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Пример разметки с section</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <main> <h1 class="visually-hidden">Страница сервиса услуг</h1> <section class="main-section"> <h2>Ознакомьтесь с подробной информацией</h2> <p>Это основная информация о нашем сервисе.</p> </section> <section class="features-section"> <h2>Наши преимущества</h2> <ul> <li>Бесплатная доставка</li> <li>Гарантия качества</li> <li>Поддержка 24/7</li> </ul> </section> <section class="contact-section"> <h2>Свяжитесь с нами</h2> <p>Пишите нам на почту: hello@example.com</p> </section> <section class="reviews-section"> <h2>Отзывы клиентов</h2> <blockquote>"Отличный сервис! Рекомендую всем!"</blockquote> </section> </main> </body> </html><p><strong>CSS</strong></p>
42
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Пример разметки с section</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <main> <h1 class="visually-hidden">Страница сервиса услуг</h1> <section class="main-section"> <h2>Ознакомьтесь с подробной информацией</h2> <p>Это основная информация о нашем сервисе.</p> </section> <section class="features-section"> <h2>Наши преимущества</h2> <ul> <li>Бесплатная доставка</li> <li>Гарантия качества</li> <li>Поддержка 24/7</li> </ul> </section> <section class="contact-section"> <h2>Свяжитесь с нами</h2> <p>Пишите нам на почту: hello@example.com</p> </section> <section class="reviews-section"> <h2>Отзывы клиентов</h2> <blockquote>"Отличный сервис! Рекомендую всем!"</blockquote> </section> </main> </body> </html><p><strong>CSS</strong></p>
43
/* === Базовые стили для body (тела страницы) === */ body { font-family: "Arial", sans-serif; /* Шрифт для всей страницы */ line-height: 1.6; /* Увеличенный межстрочный интервал для лучшей читаемости */ background-color: #f9f9f9; /* Светло-серый фон страницы */ color: #333; /* Основной цвет текста - тёмно-серый */ } /* === Стиль для визуально скрытого заголовка <h1> === */ .visually-hidden { position: absolute; /* Выводим за пределы потока документа */ width: 1px; /* Обнуляем видимые размеры */ height: 1px; margin: -1px; /* Отрицательный отступ, чтобы элемент точно не влиял на разметку */ padding: 0; overflow: hidden; /* Прячем содержимое */ clip: rect(0 0 0 0); /* Рекомендуемый способ скрытия для скринридеров */ white-space: nowrap; /* Предотвращаем перенос текста */ border: 0; /* Убираем возможные рамки */ } /* === Основной контейнер <main> - центральная часть сайта === */ main { max-width: 1000px; /* Ограничиваем ширину основного контента */ margin: 0 auto; /* Центрируем по горизонтали */ padding: 20px; /* Внутренние отступы слева и справа */ } /* === Общие стили для всех секций (<section>) === */ section { padding: 40px 20px; /* Вертикальные отступы внутри секции */ margin-bottom: 20px; /* Отступ снизу между секциями */ border-radius: 8px; /* Скруглённые углы */ text-align: center; /* Текст по центру */ color: #fff; /* Цвет текста - белый */ } /* === Стили для первой секции === */ .main-section { background-color: #4a90e2; /* Ярко-синий фон */ } /* === Стили для второй секции === */ .features-section { background-color: #66c070; /* Зелёный фон */ } /* === Стили для третьей секции === */ .contact-section { background-color: #f7931e; /* Оранжевый фон */ } /* === Стили для четвёртой секции === */ .reviews-section { background-color: #9b59b6; /* Фиолетовый фон */ } /* === Заголовки внутри секций (<h2>) === */ section h2 { font-size: 2em; /* Увеличенный размер шрифта для заголовков */ margin-bottom: 10px; /* Небольшой отступ снизу под заголовком */ } /* === Список преимуществ (<ul>) === */ section ul { list-style: none; /* Убираем маркеры списка */ padding: 0; /* Убираем внутренний отступ слева */ display: inline-block; /* Делаем список инлайновым для центровки */ text-align: left; /* Выравниваем пункты списка по левому краю */ } /* === Пункты списка (<li>) === */ section li { margin: 8px 0; /* Вертикальные отступы между пунктами */ font-size: 1.2em; /* Чуть увеличенный размер шрифта */ } /* === Цитаты в отзывах (<blockquote>) === */ section blockquote { font-style: italic; /* Курсив для цитат */ background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */ padding: 15px 25px; /* Внутренние отступы */ border-left: 4px solid #fff; /* Левая полоска для акцента */ display: inline-block; /* Чтобы блок занимал только нужное пространство */ max-width: 600px; /* Ограничиваем ширину цитаты */ font-size: 1.2em; /* Увеличенный размер текста */ }<p><strong>Результат</strong></p>
43
/* === Базовые стили для body (тела страницы) === */ body { font-family: "Arial", sans-serif; /* Шрифт для всей страницы */ line-height: 1.6; /* Увеличенный межстрочный интервал для лучшей читаемости */ background-color: #f9f9f9; /* Светло-серый фон страницы */ color: #333; /* Основной цвет текста - тёмно-серый */ } /* === Стиль для визуально скрытого заголовка <h1> === */ .visually-hidden { position: absolute; /* Выводим за пределы потока документа */ width: 1px; /* Обнуляем видимые размеры */ height: 1px; margin: -1px; /* Отрицательный отступ, чтобы элемент точно не влиял на разметку */ padding: 0; overflow: hidden; /* Прячем содержимое */ clip: rect(0 0 0 0); /* Рекомендуемый способ скрытия для скринридеров */ white-space: nowrap; /* Предотвращаем перенос текста */ border: 0; /* Убираем возможные рамки */ } /* === Основной контейнер <main> - центральная часть сайта === */ main { max-width: 1000px; /* Ограничиваем ширину основного контента */ margin: 0 auto; /* Центрируем по горизонтали */ padding: 20px; /* Внутренние отступы слева и справа */ } /* === Общие стили для всех секций (<section>) === */ section { padding: 40px 20px; /* Вертикальные отступы внутри секции */ margin-bottom: 20px; /* Отступ снизу между секциями */ border-radius: 8px; /* Скруглённые углы */ text-align: center; /* Текст по центру */ color: #fff; /* Цвет текста - белый */ } /* === Стили для первой секции === */ .main-section { background-color: #4a90e2; /* Ярко-синий фон */ } /* === Стили для второй секции === */ .features-section { background-color: #66c070; /* Зелёный фон */ } /* === Стили для третьей секции === */ .contact-section { background-color: #f7931e; /* Оранжевый фон */ } /* === Стили для четвёртой секции === */ .reviews-section { background-color: #9b59b6; /* Фиолетовый фон */ } /* === Заголовки внутри секций (<h2>) === */ section h2 { font-size: 2em; /* Увеличенный размер шрифта для заголовков */ margin-bottom: 10px; /* Небольшой отступ снизу под заголовком */ } /* === Список преимуществ (<ul>) === */ section ul { list-style: none; /* Убираем маркеры списка */ padding: 0; /* Убираем внутренний отступ слева */ display: inline-block; /* Делаем список инлайновым для центровки */ text-align: left; /* Выравниваем пункты списка по левому краю */ } /* === Пункты списка (<li>) === */ section li { margin: 8px 0; /* Вертикальные отступы между пунктами */ font-size: 1.2em; /* Чуть увеличенный размер шрифта */ } /* === Цитаты в отзывах (<blockquote>) === */ section blockquote { font-style: italic; /* Курсив для цитат */ background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */ padding: 15px 25px; /* Внутренние отступы */ border-left: 4px solid #fff; /* Левая полоска для акцента */ display: inline-block; /* Чтобы блок занимал только нужное пространство */ max-width: 600px; /* Ограничиваем ширину цитаты */ font-size: 1.2em; /* Увеличенный размер текста */ }<p><strong>Результат</strong></p>
44
Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li>В самом начале работы над страницей мысленно размечайте документ на смысловые блоки: это поможет определить, какие семантические теги лучше использовать, подходит ли тут <section> или нужно что-то другое.</li>
44
Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li>В самом начале работы над страницей мысленно размечайте документ на смысловые блоки: это поможет определить, какие семантические теги лучше использовать, подходит ли тут <section> или нужно что-то другое.</li>
45
<li>Определяйте для себя основную мысль секции: так будет легче понять, где начинается и заканчивается раздел, а также задать осмысленные имена CSS-классам внутри него.</li>
45
<li>Определяйте для себя основную мысль секции: так будет легче понять, где начинается и заканчивается раздел, а также задать осмысленные имена CSS-классам внутри него.</li>
46
<li>Используйте явные или скрытые заголовки внутри тега <section>: это поможет определить, нужен ли здесь вообще <section>, а также позволит выстроить понятную структуру страницы в целом.</li>
46
<li>Используйте явные или скрытые заголовки внутри тега <section>: это поможет определить, нужен ли здесь вообще <section>, а также позволит выстроить понятную структуру страницы в целом.</li>
47
<li>Если в <section> нет явного визуального заголовка, добавляйте скрытый. Чтобы не показывать заголовок на странице, можно использовать универсальный класс .visually-hidden. Пользователи такой текст не увидят, но поисковые системы и скринридеры смогут его прочитать.</li>
47
<li>Если в <section> нет явного визуального заголовка, добавляйте скрытый. Чтобы не показывать заголовок на странице, можно использовать универсальный класс .visually-hidden. Пользователи такой текст не увидят, но поисковые системы и скринридеры смогут его прочитать.</li>
48
</ul><p><strong>HTML</strong></p>
48
</ul><p><strong>HTML</strong></p>
49
<h1 class="visually-hidden">Руководство пользователя</h1><p><strong>CSS</strong></p>
49
<h1 class="visually-hidden">Руководство пользователя</h1><p><strong>CSS</strong></p>
50
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }<ul><li>Используйте <section> вместе с другими семантическими тегами - например, <aside> или <article>.</li>
50
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }<ul><li>Используйте <section> вместе с другими семантическими тегами - например, <aside> или <article>.</li>
51
</ul><ul><li><a>MDN: Тег <section></a></li>
51
</ul><ul><li><a>MDN: Тег <section></a></li>
52
<li><a>Валидатор HTML-разметки</a></li>
52
<li><a>Валидатор HTML-разметки</a></li>
53
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
53
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>