HTML5 Семантичні елементи

Cемантичний елемент чітко описує його значення як для браузера, так і для розробника.

Приклади не семантичних елементів: <div> і <span> - нічого не говорить про його вміст.

Приклади семантичних елементів: <form>, <table> і <article> - чітко визначає його зміст.

Підтримка браузерів

Браузери

Семантичні елементи HTML5 підтримуються у всіх сучасних браузерах.

Крім того, ви можете "навчити" старих браузерів, як обробляти "невідомі елементи".

Прочитайте про це в підтримці браузера HTML5.

Нові семантичні елементи в HTML5

HTML5 пропонує нові семантичні елементи для визначення різних частин веб-сторінки:

HTML5 <section> елемент

Елемент <section> визначає розділ в документі.

Згідно з документацією W3C HTML5: "розділ представляє собою тематичну угруповання контенту, зазвичай з заголовком".

Домашня сторінка зазвичай може бути розділена на розділи для ознайомлення, змісту і контактної інформації.

Приклад коду

HTML5 <article> елемент

Елемент <article> визначає незалежний, автономний вміст.

Стаття повинна мати сенс самостійно, і вона повинна мати можливість читати його незалежно від іншої частини веб-сайту.

Приклади того, де можна використовувати елемент <article>:

  • Повідомлення на форумі
  • Блог
  • Газетна стаття
Приклад коду