Большинство сайтов имеют одинаковую структуру блоков, и чаще всего эти блоки имеют общепринятые имена классов или ID. Обычно сайт представляет из себя шапку (header), навигацию (nav), контент (content), сайтбар (sidebar, leftbar, rightbar) и подвал (footer).
В HTML5 появились атрибуты, которые позволяют четче указать что есть что. Атрибуты role назначают роли для блоков, обозначая их важность и назначение. Вы можете ознакомиться со спецификацией ARIA Role –
banner
Логически этой ролью наделяется шапка сайта (header). В этом блоке традиционно располагается логотип и название сайта, могут быть включены поиск и основное название страницы. role=«banner» должен быть в единственном экземпляре на странице.
search
Определяет область поиска на странице. Как правило, это форма, используемая для отправки поисковых запросов.
navigation
Набор навигационных элементов (как правило, ссылки) для навигации по документу или связанных с ним документов.
main
Основное содержание документа. В рамках любого документа или приложения, автор должен отметить не более одного элемента с главной ролью.
contentinfo
Обычно применяется к подвалу (footer). Так же данная роль может быть обозначена на странице лишь единожды.
complementary
Важная часть контента, но не основная. Обычно это различные информационные блоки (погода, краткий список новостей, мини-фотогалерея и т.д.). Чаще всего принадлежит к области страницы, называемой боковой колонкой (sidebar, leftbar, rightbar).
В упрощенном виде html-разметка может выглядеть так:
<header id="header" role="banner"> <h1>Название блога</h1> </header> <nav id="nav" role="navigation"> <ul> <li><a href="/">Главная</a></li> <li><a href="/news">Новости</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> <section id="content" role="main"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.</p> </section> <aside id="sidebar" role="complementary"> <nav> <h3>Подменю</h3> <ul> <li><a href="#">Раз</a></li> <li><a href="#">Два</a></li> <li><a href="#">Три</a></li> </ul> </nav> </aside> <footer id="footer" role="contentinfo"> <p>© 2011 Копирайт.</p> </footer>
Конечно же есть и другие роли, если заинтересуетесь – курите
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru