Создание разделов
В этой главе я покажу вам элементы, которые используются для обозначения разделов в содержании: в сущности, таким образом они разделяют содержание, чтобы позволить каждой теме или концепции быть изолированной от других. Многие элементы в этой главе являются новыми, и они закладывают значительную основу для того, чтобы отделить семантику элементов от их представления. К сожалению, это означает, что данные элементы трудно продемонстрировать, потому что они мало или вообще не воздействуют визуально на содержание. Но все же мне нужно их показать, поэтому я добавил некоторые CSS стили для многих примеров в этой главе, чтобы подчеркнуть структуру и изменения, которые происходят при использовании этих элементов.
Я не буду в этой главе объяснять смысл стилей CSS. В главе 4 содержится информация о ключевых особенностях CSS, а отдельные CSS свойства описаны в главе 16 и далее. В таблице 10-1 приведено краткое содержание этой главы.
Таблица 10-1: Краткое содержание главы
| Задача | Решение | Листинг |
| Обозначить заголовок | Использовать элементы h1–h3 |
1 |
| Обозначить группу заголовков, где только первый из них должен быть отражен в структуре документа | Использовать элемент hgroup |
2, 3 |
| Обозначить важную тему или концепцию | Использовать элемент section |
4 |
| Обозначить верхние и нижние колонтитулы | Использовать элементы header и footer |
5 |
| Обозначить место с элементами навигации | Использовать элемент nav |
6 |
| Обозначить основную тему или концепцию, которые могли бы быть распределены независимо друг от друга | Использовать элемент article |
7 |
| Обозначить содержание, которое имеет косвенное отношение к окружающему контенту | Использовать элемент aside |
8 |
| Обозначить контактную информацию для документа или статьи | Использовать элемент address |
9 |
| Создать раздел, который пользователь может развернуть, чтобы получить дополнительные сведения | Использовать элементы details и summary |
10 |
Добавление основных заголовков
Добавление верхних и нижних колонтитулов
Добавление навигационных блоков
Создание сайдбаров (боковых панелей)
Предоставление контактной информации
Создание раздела с дополнительной информацией
