Легкая организация контента с HTML5

Перевод статьи Easy content organisation with HTML5  с сайта paciellogroup.com, опубликовано на css-live.ru с разрешения автора — Стива Фолкнера.

Чаще всего дизайнеры и веб-разработчики делят страницы на крупные области контента (будем называть их регионами). Поиск по картинкам на запрос «типовая структура страницы в HTML5» выдает множество примеров схематических изображений страниц, на которых обозначены похожие регионы:

  • шапка
  • навигация
  • основной контент
  • боковая панель
  • подвал

Весь контент страницы делится на несколько регионов, в которые уже вкладывается весь оставшийся контент страницы. Обычно эти регионы опознаются визуально по дизайну и типу их содержимого, пользователь может окинуть взглядом страницу и быстро «прочувствовать» ее содержимое и найти, что нужно. С HTML5 эту визуальную структуру можно выразить в коде семантически. Используя всего 5 элементов (aside, footer, header, main и nav) из HTML5 можно обеспечить понятность и навигационные преимущества структуры контента для тех пользователей, кому одних визуальных подсказок было бы для этого недостаточно:

regions-typical1

Раскладка страницы с шапкой вверху, навигацией слева, основным контентом в центре, дополнительной информацией справа и подвалом внизу.

Пример кода

<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

Порядок регионов

Порядок, в котором выстроены элементы, и тип задействованных регионов основывается на вашей структуре контента. Черт побери, если у вас контент выстроен так, что наверху страницы высокий подвал, а навигация внизу — пусть так и будет.

regions-atypical

Раскладка страницы с высоким подвалом наверху, за которым идет главный контент и навигация внизу.

Пример кода

<footer></footer>
<main></main>
<nav></nav>

Регионы в регионах

Если у вас контент строится так, что регион вложен в другой регион — так и делайте.

regions-nested

Страница с навигацией внутри региона шапки.

Пример кода

<header>
<nav></nav>
</header>
<main></main>
<aside></aside>
<footer></footer>

Всё!

Когда определять регионы на странице берутся структурные элементы HTML5, семантическую магию берет на себя браузер (привязывая элементы к поясняющим ARIA-ролям). Есть несколько общих правил, что помогут пользователям получить от семантической разметки максимум пользы:

  • Убедитесь, что весь контент на странице находится в каком-нибудь регионе.
  • Чем меньше, тем лучше, регионы — крупнорамасштабные структуры, так что используйте их бережно. С увеличением их числа польза от них уменьшается.
  • Для разметки более мелкого контента, внутри регионов, пользуйтесь элементами article, section, заголовками, абзацами, списками и т.д.

P.S. Это тоже может быть интересно:

11 Комментарии

  1. Алексей

    А если блоки меню содержат основной контент, какая структура будет семантически правильной?

    1. SelenIT

      Можно реальный пример такой ситуации? С трудом представляю себе, где основной контент может «распыляться» по блокам меню, тем более нескольким. Точно ли этот контент тогда основной?

      А если навигация является основным контентом (напр. что-то типа карты сайта), то, наверное, ничего не остается, как вложить nav в main.

      1. Алексей

        Да, конечно, вот так например: http://spouk.ru/web/vertikalnoe-menyu-na-css3-html5

        1. SelenIT

          На мой взгляд, это не блоки меню. Это именно разделы основного контента (для них может быть уместен section) с внутренними ссылками для удобства переключения между ними. То, что этим ссылкам (из разных блоков) визуально придан вид меню, не делает их «навигационным разделом», и nav тут, по-моему, будет совершенно лишним.

          1. Алексей

            Вот мне тоже так кажется. Однако, если так сверстать сайт с десятком услуг компании, то со стороны пользователя и… мне кажется, поисковика, это ведь именно nav.
            Т.е. получается, в данном случае, вёрстка определяет семантичность элементов и одностраничник не может содержать nav? — не могу с этим определиться…

            1. SelenIT

              Если нужно, чтобы ссылки были именно отдельным навигационным разделом (в т.ч. «с точки зрения поисковика»), есть смысл и собрать их вместе в этом разделе, а не рассовывать между блоками контента. Псевдокласс :target будет работать и в этом случае, а подсветки активной ссылки я и в исходном варианте не увидел (слегка извернувшись с разметкой, можно реализовать и ее, но имхо скрипт для этого уместнее).

              Семантичность элементов определяет не верстка, а именно контент. Навигация, по определению — нужный, но всё же вспомогательный элемент, который можно в любой момент пропустить и перейти к основному контенту, поэтому помещать основной контент внутрь навигации — не лучшая идея с точки зрения доступности. А вот небольшой раздельчик для навигации по самому этому контенту может быть вполне кстати. Надо только не переборщить, ведь, как пишет и Фолкнер, с количеством семантических элементов смысловая ценность каждого из них падает…

              1. Алексей

                Буду Вам очень признателен, если поясните на примере, как правильно сделать эту верстку семантичной: http://output.jsbin.com/vivasivara

  2. Alex Bondarev

    Ссылка на Стива ссылается не на Стива :)

    1. Максим Усачев (Автор записи)

      Извиняюсь, исправил, спасибо!

  3. Артем

    Уже не один год использую семантическую структуру с двумя сайдбарами такого типа:

    Вполне устраивает.
    p.s. поправьте пример кода под последней картинкой, у вас не закрыт тег main.

    1. SelenIT

      Упс, и в других примерах тоже (ошибка перекочевала из оригинала)… Спасибо! Исправили.

Оставить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.