<section>
Логические блоки сайта принято оборачивать в этот тег.
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Подсказки
- На практике
- Дока Дог советует
- Алёна Батицкая советует
Обновлено 18 апреля 2022
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Тег <section> создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
В <section> помещаются важные для поисковика элементы, для которых не нашлось подходящего тега вроде <img> или <header> .
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Тег <section> всегда закрывается при помощи парного тега < / section> .
Внутри <section> обязательно должен быть заголовок <h1> . <h6> .
Контейнеры <section> можно вкладывать друг в друга, как матрёшку.
Атрибуты
Скопировать ссылку на секцию «Атрибуты» Скопировано
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Если вы хотите просто объединить и стилизовать второстепенные элементы, которые не так важны для поисковика, лучше использовать <div> .
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Дока Дог советует
Скопировать ссылку на секцию «Дока Дог советует» Скопировано
�� <section> — это семантический тег, который говорит поисковику, что внутри находится важный функциональный блок сайта.
�� Внутри <section> должен быть обязательно заголовок <h1> , <h2> и так далее. Читайте подробнее про заголовки.
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Некоторые начинающие разработчики неверно понимают семантику этого тега и заменяют им большую часть дивов на странице. Так делать не стоит.
Тегом <section> стоит оборачивать большие логические блоки на странице.
�� По спецификации допустимо размещать в каждом <section> заголовок первого уровня ( <h1> ). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.
Читайте также
Один из тегов основной структуры любой HTML-страницы. Содержим в себе видимую часть сайта.
HTML тег <section>
HTML тег <section> недавно введен в HTML5. Он используется для группировки логически связанного контента и создания разделов страницы (блок новостей, контактная информация и т.д.). Тег <section> часто используют при создании “посадочных страниц” (landing page) для разделения страницы на логические блоки.
Тег <section> может быть вложен в тег <article>, разделяя содержащийся в нем контент на логические блоки. При этом необходимо, чтобы в теге <article> и вложенном в него теге <section> были использованы заголовки <h1>-<h6>. Допускается также использование заголовка <h2> в каждом разделе, определенном тегом <section>.
Тег <article> может вкладываться в тег <section>, если необходимо сформировать тематические блоки в разделе. При этом на элементы также распространяется правило размещения заголовков, о котором говорится выше.
Тег <section> может также быть вложен в другой тег<section>, но при этом иерархия заголовков не должна нарушаться.
Синтаксис
Содержимое элемента заключается между открывающим (<section>) и закрывающим (</section>) тегами. Закрывающий тег обязателен.
Как использовать секционные элементы HTML5
Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент
Вы можете вкладывать элементы
В этом примере мы использовали элемент
Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента
В этом примере мы использовали элемент
В этом примере элемент
Так же как
Этот элемент часто используется внутри элемента<section> — элемент секции
HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.
Интерактивный пример
Например, меню навигации должно быть помещено в элемент <nav> , но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <section> .
Примечание: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент <article> может стать лучшим выбором.