Більшість сайтів мають однакову структуру блоків, і найчастіше ці блоки мають загальноприйняті імена класів або ID. Зазвичай сайт представляє з себе шапку (header), навігацію (nav), контент (content), сайтбар (sidebar, leftbar, rightbar) і земельна ділянка (footer).
У HTML5 з'явилися атрибути, які дозволяють чіткіше вказати що є що. Атрибути role призначають ролі для блоків, позначаючи їх важливість і призначення. Ви можете ознайомитися зі специфікацією ARIA Role - WIA-ARIA specification. Я ж наведу найбільш актуальні ролі (можливо буду поповнювати згодом).
Логічно цією роллю наділяється шапка сайту (header). У цьому блоці традиційно розташовується логотип і назву сайту, можуть бути включені пошук і основну назву сторінки. role = "banner» повинен бути в єдиному екземплярі на сторінці.
Визначає область пошуку на сторінці. Як правило, це форма, яка використовується для відправки пошукових запитів.
navigation
Набір навігаційних елементів (як правило, посилання) для навігації по документу або пов'язаних з ним документів.
contentinfo
Зазвичай застосовується до підвалу (footer). Так само дана роль може бути позначена на сторінці лише один раз.
complementary
Важлива частина контенту, але не основна. Зазвичай це різні інформаційні блоки (погода, короткий список новин, міні-фотогалерея і т.д.). Найчастіше належить до області сторінки, званої бічної колонкою (sidebar, leftbar, rightbar).
У спрощеному вигляді html-розмітка може виглядати так:
Звичайно ж є й інші ролі, якщо зацікавитесь - курите специфікацію 🙂
У цьому блоці кнопочки для клікання на випадок, якщо пост виявився корисним :)
Так є таке. Тільки я в даний час побоююся використовувати наскільки H1 на одній сторінці, тому що не впевнений, що пошукові системи в повній мірі зрозуміють то таку розмітку. Якщо у когось є інформація з цього приводу - буду дуже вдячний за ссилочку.
Уже півтора року на одному з сайтів використовую таку структуру:
Всього по 20 h1 на сторінці.
У ПС до мене претензій не було ні. Все в індексі і все взагалі прекрасно =)