Семантична структура для HTML5 сторінки
Сьогодні ми поговоримо про семантику в HTML5. Я вже писав невеликий оглядовий пост про нові семантичні теги HTML5. Рекомендую з нею попередньо ознайомитись, перед прочитанням цієї статті. Зараз ми розберемося з цим питанням більш докладно про те, як правильно і грамотно складати семантичну структуру HTML5 документа.
Семантична структура для HTML5 сторінки
У цій статті ми поступово створюватимемо html сторінку, і оформлятимемо її семантичними HTML5 тегами.
Малюнок — Семантична структура для сторінки HTML5.
DOCTYPE та meta теги у заголовку сторінки
Почнемо зі стандартного шаблону HTML5 документа і додамо теги meta в head :
Я додав тег, який відповідає за ключові слова. І тег, який відповідає за опис сторінки. Для SEO оптимізації ці теги є обов'язковими. Також обов'язково коректне заповнення тега. Title сторінки повинен бути унікальним для всього сайту, і містити в назві всю суть сторінки, на яку він вказаний.
Ходімо далі. У HTML5 з'явилися нові теги, які використовуються для того, щоб робити семантичну розмітку документа. Це теги header, nav, main, article, aside, footer і т.д. За відображенням вони працюють так само, як і звичайні
заголовок сторінки
Шапка сторінки оформляється у тег header. Зауважте, що заголовок сторінки пишемо тегом h1.
Якщо у нас є ще й слоган поряд із заголовком, то поміщаємо його в p, div чи span.
Зауваження щодо тега H1
Слід зазначити, що в HTML5 тег H1 використовується для вказівки заголовка контейнера в якому він знаходиться (це може бути header, section, article і т.д.)
До появи HTML5 тегівбула дещо іншою і відрізнялася. Так у HTML4 на сторінці міг бути лише один заголовок H1! Як правило це був заголовок статті або заголовок сторінки (наприклад, якщо це сторінка рубрики, на якій відображаються кілька статей.) H2 використовувався для підзаголовків, або для розділів головної статті. H3 для під розділів і так далі.
Навігація на сторінці
Оформлення головної навігації сайтом повинне полягати в тег nav. Також слід пам'ятати, що гарною практикою вважається оформляти навігацію елементами списку.
Контент на сторінці
Оформлення статті
З прикладу вище видно що всередині статті були використані теги header та footer щоб виділити заголовок та нижній колонтитул статті.
Сайдбар або колонка з віджетами
Для кожного окремого елемента сайдбар використовуємо блок aside. Усередині нього заголовок оформляємо тегом h1. Так колонка із сайдбаром може виглядати так:
Тег section
Тег section - використовується для представлення групи або секції тематично пов'язаного контенту. Його використання схоже на article з головною відмінністю в тому, що допускається відсутність змісту вмісту всередині елемента поза контекстом самої сторінки. Рекомендується використовувати теги (
) для позначення теми секції.
Як приклад можна навести статтю, яку ви читаєте, можна було б кожен параграф обернути в тег . Наприклад, тегом section можна виділяти блоки контенту на лендингу. Звучить схоже визначення div елемента, який часто використовується як контейнер для контенту. Різниця в тому, що div не має семантичного значення, і він не говорить ні про що про контент, що знаходиться всередині нього. Тег section , навпаки використовується щоб чітко показати що контент всередині нього пов'язаний за змістом. Виможете замінити деякі свої div теги на section, але завжди відповідайте собі на запитання: «Цей контент пов'язаний між собою чи ні?»
Приклад використання тега section у списку з переліком міст:
Підвал сайту - Footer
Підвал сайту оформляється тегом
Висновок
Для перевірки структури сторінки можна використовувати інструмент HTML5 outliner. Він показує структуру сторінки блоків та заголовків.
Семантика в HTML5 не обмежується наведеними вище статті тегами. Але використовуючи наведені приклади, ви можете освіжити свою розмітку, і зробити сайт більш дружелюбним до пошукових систем, що позначиться на вищому рейтингу сайту в пошуковій видачі.
На продовження теми можна вивчити інші нові HTML5 теги. А також мікро формати для оформлення та структуризації даних, наприклад, такі як schema.org
Важливе зауваження щодо використання HTML5 тегів. У специфікації не вказані жорсткі правила щодо використання семантичних тегів, вказані лише рекомендації щодо їх використання. Якщо ви не розумієте або не знаєте, де і який HTML5 тег використовувати, краще використовуйте div — щоб не нашкодити і не порушити структуру документа.