-s і -хоча, як Ви не повинні повністю кидати їх. Вони все ще є кращим вибором для групування контенту виключно для цілей укладання та в інших випадках останньої інстанції.

Текстова семантика в HTML5

HTML5 представив багато нових семантичних елементів, які дозволяють легко організувати вміст. Вони не лише допомагають організувати вміст на рівні всього документа (детальніше див. У наступному розділі), але й у текстових блоках, як вбудовані теги.

Ймовірно, найпопулярніші семантичні теги на рівні тексту і , але вони також існували до HTML5. Серед нових вбудованих семантичних елементів можна знайти, наприклад, , для тега час, що читається людиною, і для виділений текст.

Дивіться цей список для всіх семантичних елементів текстового рівня, які зараз використовуються.

Структура документа в HTML5

Схема документа - це структура документа HTML. Він показує, як елементи пов'язані один з одним. Структуру документа було створено виключно елементами зіставлення, наприклад заголовками, заголовками таблиць, заголовками форм та іншими у попередніх версіях HTML, таких як HTML4.01 і XHTML.

У HTML5 викладений алгоритм був розширений новими елементами секціонування, а саме:

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

У HTML5 є п'ятий елемент розділення, але він не є новим, це . The

і теги також є новими, але вони не створюють нових розділів у документі, вони розділяють вміст у розділах. Це означає що кожен елемент секції (тіло, стаття, розділ, навігація та сторона) може мати свій власний колонтитул.

Поради щодо семантично структурованого вмісту

Якщо ми хочемо створити добре структурований план документів, ми повинні звернути увагу на такі правила:

1. Самий зовнішній елемент секціонування завжди є тег.

2. Розділи в HTML5 можуть бути вкладеними.

3. Кожен розділ має свою ієрархію заголовків. Кожен з них (навіть найпотаємніший вкладений розділ) може мати h1 тег.

4. Хоча контур документа в першу чергу визначається 5 елементами секціонування, він також потребує відповідних заголовків для кожного розділу.

5. Це завжди перший елемент заголовка (нехай це буде h1 або тег заголовка нижнього рангу), який визначає заголовок даного розділу. Наступні теги заголовків в межах одного розділу повинні бути відносно цього. (Якщо перший заголовок є h3 всередині елемента секціонування, не кладіть h3 після цього.)

6. Розділи, визначені

, і теги не належать до основного плану HTML-документа, вони зазвичай не відображаються спочатку за допомогою допоміжних технологій.

7. Кожна секція (тіло, розділ, стаття, осторонь, навігація) може мати свої власні

і теги, що визначає заголовок (наприклад, логотип, ім'я автора, дати, метаінформацію тощо) і колонтитул (авторське право, примітки, посилання тощо) цього розділу.

Приклад: семантичний план

Давайте розглянемо приклад для накреслення семантичного документа, щоб побачити більш ясне, як він працює. Наш приклад коду призведе до наступної структури документа:

А ось код з належним семантичним розділенням:

  
 
Ласкаво просимо на наш сайт!
 
Ось наш логотип і слоган.
 
  
 
 
Назва статті
 
Підзаголовок статті
 
 
 
Перша логічна частина (наприклад, "Теорія")
 
Пункт 1 першого розділу
 
Деякі інші підзаголовки у першому розділі
 
Пункт 2 першого розділу
 
 
 
Друга логічна частина (наприклад, "Практика")
 
Пункт 1 у другому розділі
 
Пункт 2 у другому розділі
 
  
    

Якщо ви подивитеся на фрагмент коду вище, ви побачите, що колонтитули є необов'язковими, ми можемо вільно вибирати, чи хочемо ми їх використовувати чи ні, але це настійно рекомендується завжди включати заголовок для кожного розділу, інакше буде розділ “Без назви” у схемі документа.

На щастя, є багато чудових інструментів по всьому Інтернету, які дозволяють нам перевіряти план документа, на цей раз ми будемо використовувати інструмент Outliner html5.org.

Якщо вставити фрагмент коду у форму, надану програмою, і натисніть кнопку “Означте це!” ми побачимо наступний результат:

Це Документ нашого зразка коду, таким чином пошукові системи бачать його, а читачі екрану читають її користувачам із вадами зору. Це семантичний, добре структурований, і немає ніякої поганої “Без назви” розділів.

Якщо ви хочете подивитися, як секція «Без назви» виглядає в Outliner, просто видаліть деякі теги заголовків у коді прикладу.

Інші аспекти веб-семантики

Семантичні теги HTML і контури документів є лише невеликою частиною веб-семантики. Зміст веб-сторінки може бути ще більш значущим за допомогою протоколу доступності WAI-ARIA і структурованих даних, які можна використовувати разом з протоколом RDFa, мікроданними або розміткою JSON-LD.