Разделы документа в HTML 5.1
В одной из моих прошлых статей я объясняла важность правильного разбиения страницы на разделы.
Разделы HTML-документа отражают структуру содержимого. Например, они полезны для автоматической генерации оглавления документа. Также они могут использоваться экранными читалками для более удобной навигации по странице.
На прошлой неделе официально был принят стандарт HTML 5.1. В нём есть определённое количество интересных изменений, два из которых относятся к способам создания разделов документа.
- Удалено: использование вложенных с заголовками первого уровня для формирования структуры страницы;
- Изменено: элементы и могут быть вложенными, если на каждый уровень вложенности есть свой элемент .
Создание разделов документа с помощью вложенных
В HTML 5.0 был представлен новый способ создания разделов документа: с заголовком первого уровня создавал новый раздел, вложенный в него такой же с таким же заголовком первого уровня создавал подраздел и так далее.
Пример разметки (этот способ создания разделов устарел):
section> h1>Heading Level One h1> section> h1>Heading Level Two h1> section> section> h1>Heading Level Two h1> section> h1>Heading Level Three h1> section> section> section> Такая разметка определяла следующую структуру документа:
1. Заголовок первого уровня 1. Заголовок второго уровня 2. Заголовок второго уровня 1. Заголовок третьего уровня В предыдущей статье я упоминала, что этот способ ещё не получил достаточной поддержки браузерами и другими устройствами. Он убран из спецификации HTML 5.1.
Теперь рекомендуется использовать вложенные с заголовками, уровень которых соответствует уровню раздела документа. Например, структура документа из предыдущего примера воспроизводится такой разметкой:
section> h1>Heading Level One h1> section> h2>Heading Level Two h2> section> section> h2>Heading Level Two h2> section> h3>Heading Level Three h3> section> section> section> Вложенные и
В HTML 5.0 нельзя было вложить в другой , как и нельзя было вложить в другой .
В HTML 5.1 это было изменено. Теперь вложенные и считаются валидными, если они представлены в контексте отдельной секции. Такой контекст создаётся секционными элементами:
Таким образом, и всегда должны ассоциироваться с уникальным секционным элементом вроде , а не с родительским или . Например, элемент может иметь , в котором есть несколько с информацией о статье:
article> header> h1>Creating a Document Outline in HTML 5.1 h1> section> header> h2>The Author h2> header> p>Ire Aderinokun p> address>Lorem ipsum dolor sit amet address> section> section> header> h2>The Publication h2> header> p>bitsofcode p> address>Lorem ipsum dolor sit amet address> section> header> h2>Introduction h2> p>Lorem ipsum dolor sit amet p> article> Эта разметка определяет такую структуру:
1. Creating a Document Outline in HTML 5.1 1. The Author 2. The Publication 3. Introduction Создание разделов
В этой главе я покажу вам элементы, которые используются для обозначения разделов в содержании: в сущности, таким образом они разделяют содержание, чтобы позволить каждой теме или концепции быть изолированной от других. Многие элементы в этой главе являются новыми, и они закладывают значительную основу для того, чтобы отделить семантику элементов от их представления. К сожалению, это означает, что данные элементы трудно продемонстрировать, потому что они мало или вообще не воздействуют визуально на содержание. Но все же мне нужно их показать, поэтому я добавил некоторые 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 |
Разделы веб-страницы
На webref.ru добавил новый курс Разделы веб-страницы, в котором описано, как использовать элементы nav, section, aside и др. Как обычно, курс отличается тем, что в нём есть вопросы для самостоятельной проверки, интерактивные задания и финальный тест для проверки знаний.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Как добавить иконку сайта в адресную строку браузера?
- Позиционирование элементов
- Ссылки
Структура документа и веб-сайта
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
| Необходимые знания: | Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок. |
|---|---|
| Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |
Основные составляющие документа
Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:
Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.
«Типичный веб-сайт» может быть структурирован примерно так:
HTML для структурирования содержимого
Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.
Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?
Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).
В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как «найти основную навигацию» или «найти основное содержимое». Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.
Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
- Заголовок:.
- Навигационное меню:.
- Основное содержимое:, с различными подразделами содержимого, представленными элементами , и .
- Боковая панель:, обычно располагается внутри .
- Нижний колонтитул:.
Активное обучение: исследование кода для нашего примера
Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
doctype html> html> head> meta charset="utf-8" /> title>Заголовок моей страницыtitle> link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css" /> link rel="stylesheet" href="style.css" />
