Перевод статьи Easy content organisation with HTML5 с сайта paciellogroup.com, опубликовано на css-live.ru с разрешения автора — Стива Фолкнера.
Чаще всего дизайнеры и веб-разработчики делят страницы на крупные области контента (будем называть их регионами). Поиск по картинкам на запрос «типовая структура страницы в HTML5» выдает множество примеров схематических изображений страниц, на которых обозначены похожие регионы:
- шапка
- навигация
- основной контент
- боковая панель
- подвал
Весь контент страницы делится на несколько регионов, в которые уже вкладывается весь оставшийся контент страницы. Обычно эти регионы опознаются визуально по дизайну и типу их содержимого, пользователь может окинуть взглядом страницу и быстро «прочувствовать» ее содержимое и найти, что нужно. С HTML5 эту визуальную структуру можно выразить в коде семантически. Используя всего 5 элементов (aside, footer, header, main и nav) из HTML5 можно обеспечить понятность и навигационные преимущества структуры контента для тех пользователей, кому одних визуальных подсказок было бы для этого недостаточно:
Раскладка страницы с шапкой вверху, навигацией слева, основным контентом в центре, дополнительной информацией справа и подвалом внизу.
Пример кода
<header></header> <nav></nav> <main></main> <aside></aside> <footer></footer>
Порядок регионов
Порядок, в котором выстроены элементы, и тип задействованных регионов основывается на вашей структуре контента. Черт побери, если у вас контент выстроен так, что наверху страницы высокий подвал, а навигация внизу — пусть так и будет.
Раскладка страницы с высоким подвалом наверху, за которым идет главный контент и навигация внизу.
Пример кода
<footer></footer> <main></main> <nav></nav>
Регионы в регионах
Если у вас контент строится так, что регион вложен в другой регион — так и делайте.
Страница с навигацией внутри региона шапки.
Пример кода
<header> <nav></nav> </header> <main></main> <aside></aside> <footer></footer>
Всё!
Когда определять регионы на странице берутся структурные элементы HTML5, семантическую магию берет на себя браузер (привязывая элементы к поясняющим ARIA-ролям). Есть несколько общих правил, что помогут пользователям получить от семантической разметки максимум пользы:
- Убедитесь, что весь контент на странице находится в каком-нибудь регионе.
- Чем меньше, тем лучше, регионы — крупнорамасштабные структуры, так что используйте их бережно. С увеличением их числа польза от них уменьшается.
- Для разметки более мелкого контента, внутри регионов, пользуйтесь элементами article, section, заголовками, абзацами, списками и т.д.
Свежие комментарии