І відповідаючи на запитання користувачів, я бачив безліч сайтів з HTML5 розміткою. У цій статті я покажу деякі помилки і погані практики розмітки, які я часто зустрічав, і поясню, як уникнути їх.
Не використовуйте тег як обгортки для оформлення
Одна з найбільш загальних проблем, помічених мною, - банальна заміна
"Ов на структурні елементи HTML5, особливо на "И. Тобто коли те, що в XHTML або HTML4 виглядає так:
My super duper page
Переписують так:
Це просто неправильно: НЕ обгортка. Цей елемент означає семантичний блок Вашого контенту, що використовується для побудови «структури документа» (document outline), і повинен містити заголовок. Якщо Вам потрібен елемент для обгортки, спробуйте обійтися (Kroc Camen може запропонувати дещо). Якщо це не вирішує проблему необхідності додаткових обгорток, використовуйте старі добрі
"И. З приходом HTML5
"Ти не померли, і саме вони відмінно підходять в цьому випадку.
Беручи до уваги все вищесказане, було б добре розмітити приклад вище з використанням HTML5 так:
My super duper page
Якщо Ви не впевнені, який елемент використовувати, то я раджу Вам скористатися нашою блок-схемою вибору елемента ( прим. перекладача: см. в самому низу записи).
використовуйте і тільки при необхідності
Немає сенсу писати код, якщо в цьому немає необхідності, правда? На жаль, але я часто спостерігаю, як і там, де вони не потрібні. Ви можете почитати про елементи і докладніше, я ж коротко позначу ключові моменти:
елемент представляє групу вступних або навігаційних засобів і зазвичай містить заголовок секції
елемент групує набір елементів
-
, Представляючи заголовок секції в разі, якщо він складається з декількох рівнів (підзаголовки, альтернативні заголовки і т.д.)
надлишок елементів
Я впевнений, Ви прекрасно знаєте, що елемент можна використовувати кілька разів в документі. Тому часто зустрічається таке:
My best blog post
якщо Ваш містить тільки один заголовний елемент, то він не потрібен. В даному випадку елемент вже гарантує, що заголовок буде включений в «структуру документа» (document outline), і раз не містить кількох елементів (згідно з визначенням), його можна безпечно видалити. Досить просто цього:
My best blog post
неправильне використання
І знову про заголовках: я часто бачу некоректне використання елемента . Не слід використовувати разом з , Якщо:
Присутній тільки один заголовок
хороший сам по собі (тобто, без ).
Перший випадок:
My best blog post
by Rich Clark
У цьому випадку просто приберіть hgroup.
My best blog post
by Rich Clark
Другий випадок - це ще один приклад використання елемента без необхідності.
My company
Established 1893
Якщо єдина дитина "а це , навіщо потрібен ? Якщо у Вас немає додаткових елементів в "Е (тобто сестринських по відношенню до ), Просто приберіть .
My company
Established 1893
Чи не обрамляють все посилання в
У HTML5 було введено 30 нових елементів, щоб дати нам можливість створювати структуровану і осмислену розмітку. Але не слід зловживати новими семантичними елементами. На жаль, це якраз те, що відбувається з