Ще більше семантики в HTML5: типи контенту та нові елементи

35

Від автора: дана стаття є витягом з книги HTML5 і CSS3 для реального світу, 2-е видання за авторством Алексіса Гольдштейна, Луїса Лазариса і Естель Вейль. Книгу можна знайти в магазинах по всьому світу або купити цифрову версію. Наш сайт-приклад від статті до статті стає все краще і краще. Ми створили базову структуру і докладно вивчили розмітку контенту за допомогою нових HTML5 тегів.

У цій статті ми розберемо ще більше нових елементів, а також подивимося на зміни та покращення в уже відомих елементах. Ми додамо кілька заголовків і тексту в наш проект, а також обговоримо потенційний вплив HTML5 на доступність.

Перш ніж перейти до теми нашої статті, давайте повернемося трохи назад і розглянемо парочку нових і досить складних концепцій, які є в HTML5.

Новий погляд на типи вмісту

При макетуванні і стилізації розробники звикли думати, що елементи на сторінці відносяться до двох категорій: блокові та лінійні. Елементи дійсно відмальовує в браузерах або у вигляді блоків, або лінійно, однак специфікація HTML5 розширила поняття категорій контенту. У специфікації прописаний набір більш дрібних моделей контенту. Це розширені визначення типу вмісту, який повинен бути всередині елемента. Здебільшого вони майже не вплинуть на те, як ви будете писати розмітку, проте ознайомитися з ними все ж варто:

Метадані: до цієї категорії належать метадані – дані, які не відображаються на сторінці, але впливають на її подання та включають іншу інформацію про сторінку. До таких даних відносяться теги title, link, meta і style.

Основний потік: ця категорія включає в себе всі елементи, використовувані в тілі HTML-документа, у тому числі теги header, footer і навіть p. Виключаються тільки теги, які не впливають на потік в документі: наприклад, тег script, link і meta всередині head.

Секційний контент: найцікавіший, в тому числі для нас, тип контенту HTML5. У попередній главі ми часто використовували загальний термін «секція» для опису блоків контенту, в яких може міститися хедер, футер та сайдбар. Насправді ми говорили про секційний контент. В HTML5 до цієї категорії відносяться теги article, aside, nav і section. Трохи пізніше ми більш докладно розберемо секційний контент і те, як він може впливати на те, як ми пишемо розмітку.

Заголовковий контент: даний тип контенту визначає заголовок заданої секції і включає заголовки різного рівня (h1, h2 тощо).

Текстовий контент: грубо кажучи, до цієї категорії належить контент, який раніше ви вважали лінійним. До нього відносяться теги em, strong, cite і т. д.

Вкладений контент: тут все просто, до цієї категорії належать елементи, які містяться на сторінку, такі як img, object, embed, video і canvas.

Інтерактивний контент: до цієї категорії відноситься будь-який контент, з якими може взаємодіяти користувач. В основному це форми елементів, посилання та інші елементи, з якими можна взаємодіяти тільки, коли встановлені певні атрибути. В якості прикладів можна навести тег audio з атрибутом controls, а також тег input з атрибутом type, встановленим у будь-яке значення крім hidden.

У списку для читання можна дізнатися, що деякі елементи належать до декількох категорій. Існують і такі елементи, які не підходять ні під одну категорію (наприклад, head html). Якщо все це здалося заплутаним, не турбуйтеся. Суть в тому, що вам, як розробнику, не потрібно буде думати про цих категоріях, щоб вирішити, який тег використовувати в певних обставинах. Це просто спосіб инкапсулировать різні види HTML тегів.

Ще більше нових елементів

Крім структурних елементів, які ми розібрали в Розділі 2, в HTML5 також є ряд семантичних елементів. Розберемо найбільш корисні.

Елементи figure і figcaption

Теги figure і figcaption – ще одна пара нових HTML5 елементів, що поліпшують семантику в HTML5. Про тег figure з специфікації: «Тег figure можна […] використовувати як підписи до ілюстрацій, діаграм, фотографій, коду і т. д. […] Вміст тега figure є частиною навколишнього потоку.»

Уявіть собі діаграми, графіки, зображення з текстом або приклади коду. З усіма цими типами контенту можна використовувати тег figure і, можливо, figcaption.

Тег figcaption використовується для розміщення підписи до контенту, який знаходиться всередині тега figure.

Щоб використовувати тег figure, контент всередині нього повинен бути пов’язаний з основним контентом, всередині якого використовується даний тег. Якщо цей тег можна спокійно видалити з документа, і контент залишиться повністю зрозумілий, то, швидше за все, даний тег тут не потрібен. Його можна спробувати замінити на aside.

Давайте подивимося, як можна вставити тег figure в article:

Accessible Web Apps

Lorem ipsum dolor …

As you can see in Figure 1,
Screen Reader Support for WAI-ARIA
JAWS: Landmarks 1/1, Forms 4/5 ...

Lorem ipsum dolor …

З тегом figcaption все просто. Він використовується всередині тега figure і може знаходитися перед і після контенту. У наведеному вище прикладі ми розмістили цей тег перед зображенням.

Елемент mark

Тег mark «являє собою шматок тексту в одному документі, виділений в довідкових цілях з-за своєї релевантності в іншому контексті». Слід визнати, що способів застосування тега mark дуже мало. Найпоширеніший в контексті пошуку, коли шукані ключові слова підсвічуються в результатах.

У специфікації також йдеться про використання mark для залучення уваги до тексту всередині цитати. Даний тег можна використовувати для виділення частини документа, яка була підсвічена з-за релевантністю до поточних дій користувача».

Не плутайте mark із em і strong. Ці теги додають контекстної важливості, в той час як тег mark відокремлює цільовий контент, заснований на поточних діях користувача по перегляду та пошуку.

Можна реалізувати приклад з пошуком. Для цього вам потрібно підсвітити слова в статті з тегом mark, якщо користувач перейшов на неї з Google за запитом «HTML5»:

Yes, You Can Use HTML5 Today!

Тег mark можна вставляти в сторінку як на стороні сервера, так і на стороні клієнта за допомогою JS після повного завантаження сторінки. Контент для пошуку можна отримати, наприклад, з URL за допомогою search.php?query=html5. В такому випадку код на стороні сервера може витягнути вміст рядка запиту і зберегти його в змінну, після чого вставити тег mark у всіх місцях, де були знайдені слова із запиту.

Теги progress і meter

В HTML5 додано два нові елементи, з допомогою яких можна розмічати дані, які якимось чином вимірюються. Між ними майже немає різниці: тег progress використовується для опису поточного стану мінливого процесу, який йде до завершення, незалежно від того, встановлено чи стан завершення. Відмінний приклад – стандартні прогрес бари процесу завантаження.

Тег meter ж являє елемент з відомими межами, з мінімумом і максимумом. У специфікації наводяться приклади з простором на диску, а також частиною населення, бере участь у виборах. В обох прикладах є максимальне значення. Тому даний тег краще не використовувати для вказівки віку, висоти та ваги – у всіх цих параметрів зазвичай невідомо максимальне значення.

Давайте детальніше розберемо тег progress. У елемента progress є атрибут max, вказує точку завершення процесу, а також атрибут value, в який записується стан. Обидва атрибути необов’язкові, приклад:

Your Task is in Progress

Status: 0%

Цей тег краще всього використовувати в парі з JS, щоб динамічно змінювати відсоток виконання завдання. Помітили, що в коді вище є тег span, що відокремлює числове значення? Це спрощує отримання числа в скрипті для його оновлення.

У тега meter є шість атрибутів. Крім max і value, вам доступні min, high, low і optimum.

Атрибути min і max описують нижню і верхню межі діапазону, а value вказує поточне вимірювання. Атрибути high і low вказують на граничні значення, які вважаються «високими» і «низькими» в даному контексті. Наприклад, оцінка за тест знаходиться у межах від 0 (min) до 100% (max), але все, що нижче 60% вважається низьким результатом, а все, що вище 85% — високим. Атрибут optimum описує ідеальне значення. У разі прикладу з тестом оптимальним значенням буде 100.

Приклад використання тегу meter для індикації вільного простору на диску:

Total current disk usage: 63 GB

На скріншоті нижче показано, як тег meter виглядає за замовчуванням у Chrome і Firefox.

ще больше семантики в HTML5: типы контента и новые элементы

Для кращої доступності при використанні тегів progress і meter рекомендується вставляти значення у вигляді тексту. Якщо ви використовуєте DOS для налаштування поточного стану атрибута value, вам потрібно змінити текстовий контент.

Тег time

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

Тег time був спеціально розроблений, щоб вирішувати проблему того, як люди і машини по-різному читають дату і час. Розглянемо наступний приклад:

HTML]

We’ll be getting together for our next developer conference on 12 October of this year.

[/HTML]

Люди, прочитавши цей параграф, зрозуміють, коли відбудеться подія. А ось машин буде складніше розпарсити таку інформацію. Той же параграф, але з тегом time:

We’ll be getting together for our next developer conference on 12 October of this year.

Тег time дозволяє записувати дату і час в будь-якому форматі, зберігаючи однозначне уявлення в атрибуті datetime. З допомогою JS або браузера дане значення можна конвертувати в локалізоване або більш зручне (хоча на момент написання статті жоден браузер не підтримує цього).

У ранніх версіях специфікації у тега time був атрибут pubdate. Це було Логічне значення, яке вказує, що контент всередині найближчого батьківського тега article був опублікований в задану дату. Якщо тега article не було, атрибут pubdate застосовувався до всього документа. Однак даний атрибут, незважаючи на свою корисність, був видалений з специфікації. Aurelio De Rosa у своїй докладній статті по тегу time являє заміну атрибуту pubdate.

У тега time є кілька правил і керівних принципів:

Не можна використовувати time для кодування невизначених дат і часу (наприклад, під час льодовикового періоду» або «минулої зими», тег time не дає діапазонів).

Дата не може бути «BC» або «BCE» (до нашої ери), дата повинна бути представлена за Григоріанським календарем.

Якщо у тега time неправильно заданий атрибут datetime, то у контенту всередині тега (всі між відкриваючим і закриваючим тегом time) має бути прописано правильне значення datetime.

Нижче представлено безліч прикладів HTML, як правильно вказати значення datetime по специфікації:

2015-11
2015-11-12
11-12
14:54:39
2015-11-12T14:54:39
-0800
2015-11-12T06:54:39.929-0800
2015-W46
4h 18m 3s

Прикладів використання тега time незліченну безліч: події в календарі, дати публікації (в блогах, відео, прес релізи тощо), історичні дати, записи про операції, статті або оновлення контенту і т. д.