Разделы веб-страницы
Практически любую веб-страницу можно разбить на ряд визуальных блоков, которые обычно отделяются друг от друга фоном или пустым пространством, поэтому хорошо заметны (рис. 1).
Рис. 1. Деление веб-страницы на разделы
Подобное разделение помогает нам ориентироваться на веб-странице и сразу выделять главное и второстепенное содержимое. Нам проще воспринимать веб-страницу, когда на ней всё интуитивно понятно — вот навигация, это основная статья, а это строка для поиска. Браузеры так же учитывают такое деление и могут готовить версию для чтения или печати, содержащую только статью — без рекламы, ссылок и лишнего оформления. Речевые браузеры, нацеленные на слабовидящих людей, тоже могут пропускать ненужную в данный момент информацию и переходить непосредственно к чтению самой статьи.
Таким образом от разделения веб-страницы на блоки выигрывают все. Пользователям удобнее и нагляднее пользоваться сайтом, а разработчику проще писать код HTML и его поддерживать.
Вот какие разделы могут присутствовать на веб-странице.
- Навигация — основные ссылки для перехода к разным веб-страницам сайта.
- «Шапка» — вступительная верхняя часть веб-страницы, содержащая логотип сайта, его название, поиск по сайту, навигацию и др.
- Основное содержимое — для информационных сайтов это статья с названием, датой публикацией, автором, комментариями к статье.
- Боковая панель — как правило, вертикальный блок, содержащий второстепенную информацию, вроде формы поиска, меню, голосования, рекламы и др.
- «Подвал» — заключительная нижняя часть веб-страницы, обычно содержащая контактную и правовую информацию. Это телефоны, адреса, схема проезда, кнопки социальных сетей, дублирование навигации и др.
В HTML есть несколько элементов, позволяющих поделить веб-страницу на разделы и задать им определённый смысл.
Разделы документа в 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 Конспект «Структура HTML-документа»
Каждый HTML-документ начинается с декларации типа документа или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Простейшая HTML-страница состоит как минимум из трёх тегов: , и . Тег обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге хранится содержание страницы, которое отображается в окне браузера.
Для подключения стилей к странице существует тег . Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.
Ещё один элемент, который располагается в — это тег . В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.
Тренажёры — HTML Academy Ещё один важный тег, располагающийся внутри это тег . Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги с разными атрибутами и их значениями.
Кодировка текста HTML-страницы указывается с помощью атрибута charset :
Самая распространённая современная кодировка — utf-8 .
Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords . Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:
Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description :
Внутри находятся те теги, которые отображаются на странице. Например, тег выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице используется один .
Тег содержит вводную часть страницы, которую чаще называют «шапкой», а тег описывает заключительную часть страницы, или «подвал». Существует тег , который обозначает крупный смысловой (или «логический») раздел.
Тег , обозначает цельный, законченный и самостоятельный фрагмент информации.
Для создания логического раздела с основной навигацией предназначен тег (сокращение от английского «navigation»). Обычно в включают ссылки на другие страницы или навигацию по текущей странице.
Тег включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.
Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от до . Тег обозначает самый важный заголовок (заголовок верхнего уровня), а тег обозначает подзаголовок самого нижнего уровня.
Спецификация HTML
Раздел 1 Введение
Раздел 1.1 Происхождение языка
Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). Для разметки параграфов предназначен тег
. По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
Создание разделов
В этой главе я покажу вам элементы, которые используются для обозначения разделов в содержании: в сущности, таким образом они разделяют содержание, чтобы позволить каждой теме или концепции быть изолированной от других. Многие элементы в этой главе являются новыми, и они закладывают значительную основу для того, чтобы отделить семантику элементов от их представления. К сожалению, это означает, что данные элементы трудно продемонстрировать, потому что они мало или вообще не воздействуют визуально на содержание. Но все же мне нужно их показать, поэтому я добавил некоторые 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 |