22
Окт
2015

Легкая организация контента с 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, заголовками, абзацами, списками и т.д.

Источник: https://css-live.ru/articles/legkaya-organizaciya-kontenta-s-html5.html

Тебе может это понравится...

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