Как сделать разделы на сайте 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 

Создание разделов

В этой главе я покажу вам элементы, которые используются для обозначения разделов в содержании: в сущности, таким образом они разделяют содержание, чтобы позволить каждой теме или концепции быть изолированной от других. Многие элементы в этой главе являются новыми, и они закладывают значительную основу для того, чтобы отделить семантику элементов от их представления. К сожалению, это означает, что данные элементы трудно продемонстрировать, потому что они мало или вообще не воздействуют визуально на содержание. Но все же мне нужно их показать, поэтому я добавил некоторые 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" />  


Подробнее об элементах HTML макета

Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью HTML-элементы. Пока что это основные определения, которые вы должны попытаться понять:

  • предназначен для содержимого, уникального для этой страницы. Используйте только один раз на странице и размещайте прямо внутри . В идеале он не должен быть вложен в другие элементы.
  • окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
  • подобен , но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить на несколько или, наоборот, на несколько .
  • содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
  • представляет собой группу вводного содержимого. Если он дочерний элемент , то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент или , то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
  • содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
  • представляет собой группу конечного контента для страницы.

Несемантические обёртки

Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы и . Вам следует использовать их с подходящим значением атрибута class или id , чтобы можно было легко получить к ним доступ.

p> Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в дверь: хмель мешал span class="editor-note" >[Примечание редактора: В этот момент свет на сцене должен быть приглушён]span >. p> 

В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.

div class="shopping-cart"> h2>Корзинаh2> ul> li> p> a href="">strong>Silver earringsstrong>a >: $99.95. p> img src="../products/3333-0985/thumb.png" alt="Серебряные серьги" /> li> li>. li> ul> p>Итого: $237.89p> div> 

Ему не подходит , поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и , т. к. это не часть основного содержимого страницы. Поэтому подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

Предупреждение: Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.

Перенос строки и горизонтальный разделитель

Два элемента, которые вы будете периодически использовать или захотите узнать о них: и :

создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

p> Жила-была девчушка Нелл,br /> Любившая писать HTML:br /> Её семантика ужасна была — br /> Она и сама прочитать ничего не могла. p> 

Без элемента
абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл, Любившая писать HTML: Её семантика ужасна была — Она и сама прочитать ничего не могла.


создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.


Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".

Будет выглядеть примерно так:

Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".

Планирование простого веб-сайта

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках? A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

Самостоятельная работа: создайте свою собственную карту сайта

Применить наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он вам ещё понадобится.

Заключение

Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.

Дополнительные материалы

  • Using HTML sections and outlines (en-US): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
  • Назад
  • Обзор: Introduction to HTML
  • Далее

В этом модуле

  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *