Элемент <section> определяет универсальный типовой раздел веб-страницы. В большинстве случаях, когда надо добавить раздел, но есть сомнения, какой элемент для этого использовать, подходит именно <section>.
<section> позволяет сгруппировать разное содержимое, связанное друг с другом общим смыслом, и задать ему заголовок. Для заголовков обычно применяется элемент <h2>, <h3> и ниже, а для сложных случаев, когда кроме заголовка есть картинка, форма или что-то ещё, можно воспользоваться элементом <header>.
<section> подходит для одностраничных сайтов, чтобы отделить один раздел от другого, а также для содержимого вкладок.
Каждая вкладка представляет собой раздел
Общая структура раздела показана в примере 1. Заголовок позволяет идентифицировать раздел и дать ему название.
Пример 1. Содержимое <section>
<section>
<h2>Заголовок</h2>
<p>Содержимое раздела</p>
</section>
Если в шапке раздела предполагается не один только заголовок, то имеет смысл воспользоваться элементом <header> (пример 2).
Пример 2. Раздел с <header>
<section>
<header>
<h2>Заголовок</h2>
<p>Слоган</p>
</header>
<p>Содержимое раздела</p>
</section>
Здесь кроме элемента <h2> в <header> вставлен абзац <p> с предполагаемым слоганом.
Аналогично мы можем добавить и элемент <footer>, если в нём есть необходимость (пример 3).
Пример 3. Раздел с <footer>
<section>
<h2>Заголовок</h2>
<p>Содержимое раздела</p>
<footer>Подвал</footer>
</section>
Хотя <section> представляет собой универсальный раздел, элементы <article>, <aside> и <nav> в некоторых случаях подходят больше. К примеру, для раздела с навигацией лучше использовать <nav>, как более подходящий по смыслу. В подобных ситуациях от <section> надо отказываться в пользу других элементов.
В примере 4 показано создание нескольких разделов с заголовками и текстом внутри.
Пример 4. Использование <section>
<!DOCTYPE html>
<html>
<head>
<title>section</title>
<meta charset="utf-8">
</head>
<body>
<section>
<h2>Сервисы</h2>
<p>Полный арсенал инструментов
для создания приложения.</p>
</section>
<section>
<h2>Особенности</h2>
<p>Используйте готовые настройки для автоматизации.</p>
</section>
<section>
<h2>Цены</h2>
<p>Масса возможностей за смешные деньги.</p>
</section>
</body>
</html>
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.08.2023