Как сделать разделы в html
Структурные элементы страницы
На деле, какой элемент применять в том или ином случае должен решать сам верстальщик, исходя из содержимого веб-страницы. Потому что речь идёт о структурных элементах, которые определяют структуру документа, а она для каждого сайта может быть своей. Вот типовые блоки любого сайта:
«Шапка»
Как правило, располагается вверху веб-страницы, содержит название сайта, главное меню, поисковую форму.
«Подвал»
Обычно располагается в самом низу веб-страницы, в подвале пишут копирайты, ставят иконки соцсетей, форму подписки, дублируют навигацию.
Навигация
Это главное меню сайта, ссылки для перехода к основным разделам сайта.
Статья
Простыня текста с названием, содержимым, датой публикацией, именем автора.
Боковая панель
На сайтах часто выглядит как вертикальная полоса справа или слева от основного содержимого. Внутри этой полосы располагаются ссылки, рекламные блоки, форма голосования, в общем всё то, без чего можно спокойно обойтись.
Раздел
Раздел — это основная структурная единица при делении сайта на блоки. В основном, раздел содержит заголовок и содержимое, но может обходиться и без заголовка как, к примеру, с рекламным блоком.
Примерно определили, из чего состоит любой сайт и теперь вспомним, какие элементы для них есть в HTML5:
Это элемент, внутри которого располагается уникальное главное содержимое веб-страницы. Есть ряд правил касательно применения :
В основном применяется как обёртка для статьи с заголовком, именем автора, датой публикации, комментариями.
Применяется для «подвала». Как и в случае с это может быть «подвал» сайта или «подвал» статьи.
Применяется для навигации по сайту и содержит ссылки для перехода на другие веб-страницы. используется не для всех блоков ссылок, а только для наиболее важных, такой блок, как правило, на странице один. Даже если у вас навигация дублируется внизу страницы, в добавляется только первый, более важный блок.
Законченная единица содержимого, такая как запись блога, сообщение форума, статья, комментарий пользователя.
Это раздел веб-страницы, который косвенно связан с основным её содержимым. Может использоваться для следующих вещей: боковая панель, врезка, цитата, ссылки, информация об авторе, реклама и др. располагается не обязательно сбоку, к примеру, статьи, но и внутри, сверху, снизу, в общем, там, где это продиктовано содержимым.
Заметьте, что везде мы делаем акцент на содержимом и уже исходя из него выбираем какой элемент подойдёт. Если нужно сделать декоративный блок чисто для дизайнерских целей, то воспользуйтесь элементом
В следующий раз рассмотрим, как эти элементы применять на практике.
Статья, в которой рассматривается процесс структурирования документа в HTML 4.
Что такое структура документа и зачем она нужна
Для того чтобы поисковый робот смог более точно разобраться с информацией, представленной на странице, её необходимо разбить на разделы и каждый из них озаглавить. Данное действие можно охарактеризовать как создание структуры документа, т.к. после его выполнения каждый фрагмент информации, представленной на сайте, будет принадлежать к одному или другому разделу страницы. Чтобы сделать контент страницы ещё более структурированным необходимо ко всем разделам добавить «вес», который позволил бы понять какие из разделов, представленных на сайте, являются основными (важными), а какие дополнительными (т.е. содержащими не основной контент). Выполнения всех этих действий на странице называется процессом создания её структуры.
Элементы, предназначенные для создания структуры документа в HTML 4
Из всех заголовков, самым важным является заголовок, который образован с помощью элемента h1 (самый высокий ранг). А самым незначительным из всех заголовков является заголовок, который образован с помощью элемента h6 (самый низкий ранг).
Основы создания структуры документа в HTML 4
С процессом создания структуры документа познакомимся с помощью следующего примера:
Данный код создаст 3 раздела:
Разделы 2 и 3 будут вложены в 1 раздел, т.к. их заголовки имеют более низкий ранг ( h2 h1 ). Т.е. 1 раздел будет являться для этих разделов родительским. В свою очередь разделы 2 и 3 по отношению друг к другу будут братьями, т.к. они имеют одинаковый ранг ( h2 = h2 ). Но два этих брата для поисковых роботов не будут иметь равную значимость. Это связано с тем, что элемент, который встречается в коде раньше, имеет более высокую значимость для поискового робота, чем тот, с которым он встречается позже. Т.е. первый элемент h2 будет являться по отношению к второму его старшим братом, а второй элемент h2 по отношению к первому его младшим братом.
Представление структуры документа в виде иерархического списка
Структуру документа для наглядности удобно представлять в виде иерархического списка. При создании структуры будем использовать правило 2 пробелов. Т.е. если раздел по отношению к предыдущему является дочерним (имеет более низкий ранг), то к заголовку данного раздела будем добавлять 2 пробела. И наоборот, если раздел по отношению к предыдущему имеет более высокий ранг, то будем из его заголовка убирать 2 пробела.
Структура вышеприведённого HTML-документа будет выглядеть следующим образом:
Основные правила при создания разделов в HTML 4
При создании разделов необходимо руководствоваться следующими правилами:
Создание заголовочной структуры к основным страницам блога
В этом разделе рассмотрим процесс создания структуры документа для некоторых страниц блога. В качестве примера рассмотрим заголовочную структуру главной страницы блога и страницы, содержащей статью.
Заголовочная структура главной страницы блога
Для начала спроектируем структуру главной страницы блога таким образом, чтобы она была выстроена правильно именно с логической точки зрения и посмотрим, что из этого выйдет.
Данная структура очень хорошо передаёт строение страницы и связи между её разделами. Но она имеет существенный недостаток, которым обусловлен тем, что данная структура не учитывает важность разделов. Например, раздел, содержащий поиск ( h3 ) имеет тот же ранг, что и раздел, содержащий название последней статьи ( h3 ). Данный факт с точки зрения оптимизации для поисковых систем (SEO) недопустим.
Давайте изменим структуру данной страницы так, чтобы она была оптимизированной для поисковых систем.
Теперь, после всех изменений, структура документа стала правильной с точки зрения SEO. Т.е. раздел, содержащий название статьи, теперь имеет более высокую значимость ( h4 ), чем раздел документа, содержащий поиск ( h6 ). Но с точки зрения логики, полученная структура документа потеряла смысл. Т.е. получается, что раздел, содержащий поиск вложен в раздел популярные статьи. Но с такими ограничениями приходится мириться при создании структуры документа в HTML 4, чтобы сделать документ SEO оптимизированным.
Заголовочная структура страницы, содержащей статью
Теперь перейдём к рассмотрению структуры страницы, содержащей статью. На этой странице самой важной информацией является название статьи ( h1 ). Следующей по важности идёт информация содержащая разделы статьи ( h2 ) и комментарии к статье ( h3 ).
Проектирование структуры документа, содержащей статью, выполним сначала с логической точки зрения и взаимосвязей между её разделами.
Данная структура очень хорошо передаёт строение страницы и связи между её разделами. Но она имеет существенный недостаток, который обусловлен тем, что данная структура не учитывает важность разделов. Например, раздел, содержащий информацию об блоге ( h3 ) имеет тот же ранг что и раздел, содержащий текст статьи ( h3 ). Данный факт с точки зрения оптимизации для поисковых систем (SEO) недопустим.
Давайте изменим структуру данной страницы так, чтобы она была оптимизированной для поисковых систем.
Теперь, после всех изменений, структура документа стала правильной с точки зрения SEO. Т.е. раздел, содержащий текст статьи, теперь имеет более высокую значимость ( h4 ), чем раздел документа, содержащий информацию о блоге ( h5 ). Но в тоже время, после произведённых изменений, полученная структура, оптимизированная под SEO, потеряла логический смысл. Т.е. получается, что раздел, содержащий информацию о блоге, вложен в раздел «Комментарии к статье», что с логической точки зрения неправильно. Но с такими ограничениями приходится мириться при создании структуры документа в HTML 4, чтобы сделать документ SEO оптимизированным.
Таким образом, заголовочная модель HTML 4 не способна передать структуру документа, которая одновременно была бы не только правильной с точки зрения логики и взаимосвязи между разделами, но и отвечала бы критериям SEO.
Вёрстка страницы сайта
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Рис. 2. Основные секции страницы с тегом-контейнером
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
Рис. 3. Шапка сайта с добавленными логотипом и ссылками
Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):
Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.
Рис. 4. Эффект схлопывания блока-контейнера
Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
Рис. 5. Очистка потока
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
Рис. 7. Выравнивание ссылок меню шапки
3. Создание сетки для основной части страницы
Рис. 7. Сетка основной части страницы
Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Рис. 8. Разная высота элементов сетки
Рис. 9. Фоновая подложка
Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Структура документа и веб-сайта
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
| Необходимые знания: | Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок. |
|---|---|
| Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |
Основные составляющие документа
Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:
Заголовок (колонтитул) Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице. Навигационное меню Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана. Основное содержимое Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице! Боковая панель Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему. Нижний колонтитул (футер) Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.
«Типичный веб-сайт» может быть структурирован примерно так:
HTML для структурирования содержимого
Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.
Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?
Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).
В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как «найти основную навигацию» или «найти основное содержимое». Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.
Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
Теги разметки страницы
Данная статья учебника посвящена такой теме как разметка страницы, рекомендую Вам максимально внимательно, а лучше несколько раз перечитать ее. Это связано с тем, что если вы поймете эту тему, то вы сможете без проблем создать каркас будущего сайта, что по большому счету и является главной целью этого учебника и языка гипертекстовой разметки.
Обращаю Ваше внимание на то, что элементы
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег
В отличии от блочного элемента
Тег вы можете использовать для таких задач как:
Результат нашего примера:
Рис. 42 Использование тегов разметки в HTML.
Теги разметки страницы в HTML 5
.»> Рис. 43 Человек, который использует только тег
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега
Тег 
Тег 
(верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов в одном документе.
на странице.»> Рис. 43а Пример размещения тега на странице.
Обращаю Ваше внимание, что запрещается помещать элемент внутрь таких элементов, как (нижний колонтитул), (определяет контактную информацию) или внутрь другого элемента .
Тег
Тег (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов , например, один для навигации по сайту, а второй для навигации по странице.
на странице.»> Рис. 43б Пример размещения тега на странице.
Обратите внимание, что не все ссылки в документе следует помещать внутрь тега , элемент предназначен только для крупных навигационных блоков. Не используйте элемент внутри тега (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.
Тег
Тег (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому. Элемент представляет собой раздел страницы с контентом, который может рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале и так далее.
Рис. 43в Пример размещения тега на странице.
Тег
Тег (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от
Рис. 43г Пример размещения тега на странице.
Тег
Тег (раздел) служит для группировки взаимосвязанного содержимого.
Не используйте элемент в качестве универсального контейнера, для этих целей подходит элемент
Данный тег часто используется при верстке целевых страниц (англ. landing page, «посадочная страница») для логического разделения страницы на разделы.
Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от
на странице.»> Рис. 43д Пример размещения тега на странице.
Совместное использование тегов и
Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега использовать тег (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент и вложенные элементы имели в качестве дочернего (вложенного) элемента заголовок от
По аналогии с вышерассмотренным примером допускается помещать элементы внутрь элементов , формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:
Допускается помещать элементы (раздел) в другие элементы , но при этом рекомендуется учитывать следующую структуру документа:
Тег
Тег (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и тому подобное.
Обращаю Ваше внимание, что на количество тегов на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега , чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.
на странице.»> Рис. 43з Пример размещения тега на странице.
Тег
Тег предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только один раз в одном документе.
на странице.»> Рис. 43и Пример размещения тега на странице.
Обращаю Ваше внимание, что тег не должен быть потомком таких блоков как (не должен быть вложен в них):
Разметка для сайта на HTML 5
Давайте закрепим полученные знания на примере, и сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML 5.
Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.
И так по порядку, что мы сделали в этом документе:
Результат нашего примера:
Рис. 44 Разметка страницы на HTML 5.
Разметка иллюстраций в HTML 5
Тег применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.
Благодаря тегу вы можете вывести пояснение к содержимому, которое находится внутри тега . Тег должен размещаться как первый, или последний элемент внутри тега .
Давайте рассмотрим пример использования:
Результат нашего примера:
Рис. 45 Разметка изображений в HTML 5.
Обратите внимание, что если вы разместите элемент первым вложенным элементом тега , то пояснение будет отображаться сверху изображения:
Результат нашего примера:
.»> Рис. 46 Пример использования тега
Скрытие содержимого в HTML 5
В заключение статьи, для расширения вашего кругозора хочу познакомить Вас с двумя последними элементами, добавленными в HTML 5. В настоящее время эти элементы поддерживаются всеми браузерами за исключением Internet Explorer и Edge.
Тег определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в отображается для пользователя только если логический атрибут open установлен.
Тег определяет видимый заголовок для тега . Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок «Подробнее»).
В этом примере мы использовали два элемента , один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег ). Кроме того, они имеют различные заголовки, которые заданы с использованием тега .
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Практическое задание № 25.
Перед тем как приступать, внимательно изучите страницу, которую Вам необходимо будет повторить, открыв пример в отдельном окне.
Подсказка: в примере используются цвета coral и aliceblue.
После того, как вы выполните упражнение, пройдите валидацию документа на сайте W3C, при необходимости исправьте ошибки, а затем проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.