Теория
Теория

Тег section, смысловой раздел

Было бы хорошо добавить на главную страницу что-то помимо приветствия, не правда ли? Давайте вставим в прототип ещё один раздел — про ваши навыки, пока с текстом-заглушкой. Теперь в основном содержании, то есть в теге <main>, появились два смысловых раздела: «Приветствие» и «Навыки». Их нужно как-то друг от друга отделить.

В этом нам поможет специальный тег <section>, который обозначает крупный смысловой (или «логический») раздел. Как понять, что раздел смысловой? Если вы можете дать ему имя, описывающее его содержание или назначение, то это точно он. Например:

<section>
  Раздел «О компании» Хм, наверное в нём будет описание компании
</section>
<section>
  Раздел «Редактирование профиля» Ага, здесь я управляю личными данными
</section>

Хороший пример использования <section> — разделение книги на главы, ведь название главы описывает её содержание. Также одна глава, без остальных, воспринимается вырванной из контекста. То же самое с контентом главной страницы. Смысловые разделы составляют содержание страницы, но сами по себе, в отрыве от страницы, эти «секции» жить не могут и теряют смысл.

Небольшая подсказка как отличать смысловые или логические разделы от структурных разделов. Логический раздел вы можете осмысленно назвать одним словом или словосочетанием: «программа обучения», «каталог», «наши преимущества». Если же в голову приходят названия, которые указывают на его положение на странице («шапка», «подвал», «левая колонка»), либо перечисления («новости и галерея», «фильтры и товары»), в таком случае раздел структурный и тег <section> для него не подходит.

index.html

HTML

<!DOCTYPE html> <html lang="ru"> <head> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> Шапка сайта </header> <main> Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами. Моё первое задание — вести дневник и честно писать обо всех своих свершениях. </main> <footer> Подвал сайта </footer> </body> </html>

ЗадачиВыполнено

Оберните весь текст внутри <main> в тег <section>.
После первой «секции» добавьте вторую с текстом Раздел про навыки.

Тег section, смысловой раздел

Вход

Регистрация

Восстановление доступа

Крутим, кодим, празднуем!