Ви знаєте ці 8 HTML5 тегів?

16

Від автора: як веб-розробник ви намагаєтеся вичавити максимум з тегів під час створення нового сайту. І швидше за все ви вже добре знаєте деякі з основних HTML5 тегів article, header і footer. Однак ви можете не знати, що деякі з менш поширених тегів.

Деякі з цих тегів зовсім нові або ж змінили призначення специфікації HTML4. Теги, що змінили своє призначення, можуть виглядати схоже, але їм було присвоєно нове значення. Тепер їх можна застосовувати в абсолютно інших випадках. Ми пройдемося по кожному тегу, подивимося, що специфікації, і розглянемо приклади їх використання. Поїхали!

Трохи про інтерпретацію

Специфікації W3C дають чудовий концептуальний огляд, але іноді їм не вистачає практичних прикладів, з-за чого складно знайти найкраще застосування цим тегам.

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

Контекстне виділення з допомогою mark

У специфікації mark говориться, що цей тег повинен використовуватися для позначення релевантності або залучення уваги. Що таке релевантність складно пояснити. Теги і текст релевантні, коли ми щось робимо на сайті і вони нам корисні саме в цей момент (або можуть знадобитися в майбутньому).

Наприклад, якщо ви шукали сайт за запитом «jQuery», і вам випало кілька статей, то результати пошуку можна обернути тегом mark. Мета тега mark це сказати браузеру «Ей, ось ця штука на сайті підходить під те, що ти зараз робиш».

Практичні приклади

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

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

Vanuatu Cruise

$499 — 5 Nights

A relaxing cruise around the southern most
parts of Vanuatu

Fiji Resort Getaway

$649 — 6 Nights

Includes all you can eat buffet and
entertainment

Pacific Island Hiking

$1199 — 5 Nights

Hike your way though several pacific islands
on this exercise focused holiday

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

Кращі практики та основні аспекти

Люди в більшій своїй масі вважають, що з допомогою цього тега можна швидко щось виділити, але справа не в цьому. Його можна використовувати просто для стилізації, для цього є інший тег span. Не використовуйте цей тег для виділення важливості тексту або щоб підкреслити силу – для цього є тег strong. Використовуйте mark, коли хочете показати щось релевантний конкретному користувачу. Замітка з приводу доступності – підсвічування mark відображається в браузері в режимі високої контрастності Windows.

Зменшуємо важливість з допомогою small

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

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

Даний тег необхідно використовувати для підкреслення меншої важливості тексту. Інформація меншої важливості зазвичай використовується в футері веб-сайту або в сайдбарі (подалі від основного вмісту.

Практичні приклади

В цілому, тег small говорить браузеру «Саме ось цей контент за великим рахунком не так важливий». Приміром, у футері тег можна використовувати для виділення авторського права:

Designed and developed by Simon Codrington.
© 2016 My Company — All rights reserved

Тег small навіть можна використовувати всередині звичайного контенту для виділення менш важливою його частини. Наприклад, у списку товарів біля ціни продукту можна додати підпис «без податку»:

Вовна Llama Print Jumper

$65.99 — Excludes tax

A warm, woolly jumper made from 100% llamas.
You will love the warmth.

Add to cart

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

Кращі практики та основні аспекти

Не можна знизити важливість виділення контенту, якщо до нього застосовано теги strong чи em. Тег small змінить візуальну складову елемента (в залежності від браузера), але не торкнеться семантику.

Цитування за допомогою q і blockquote

Ви швидше за все використовуєте стилізовані div або span для виділення цитат, але краще використовувати q або blockquote. Обидва тега призначені для зовнішнього цитування (коли ви цитуєте), однак принцип використання у них відрізняється.

По специфікації тег q потрібно використовувати для виділення «короткої рядкової цитати в тексті. А тег blockquote використовується для великих шматків тексту. На практиці ж тег q використовується для маленьких цитат, а blockquote для всіх інших. Пам’ятайте, що теги потрібно використовувати тільки для цитат або ресурсів. Дані теги не можна використовувати для стилізації (для цього є span).

Практичні приклади

Розглянемо, як можна використовувати обидва тега. Якщо у вас є маленька цитата, використовуйте q:

Try our latest sandwich!

Come and try our latest, biggest and tastiest
sandwich. John Smith told us he hasn’t eaten
anything as good in his whole life!

Якщо цитата більше або більш складна, її можна обернути тегом blockquote:

Infuse your life with action.
Don’t wait for it to happen.
Make it happen. Make your own
future. Make your own hope.
Make your own love. And
whatever your beliefs, honor
your creator, not by passively
waiting for grace to come down
from upon high, but by doing
what you can to make grace
happen… yourself, right now,
right down here on Earth.
Bradley Whitford — Author

У прикладі вище довгу цитату ми поклали в тег blockquote і використовували атрибут cite посилання на ресурс) і тег cite (опис ресурсу).

Кращі практики та основні аспекти

Обидва елемента підтримують атрибут cite і тег cite. За допомогою атрибута cite вказується посилання на джерело (тобто посилання на сайт, звідки взята цитата). А тег cite використовується для зазначення назви роботи, звідки взята цитата. З приводу правильного використання тегу й атрибуту cite ведуться суперечки, але описані мною способи застосування завжди добре працювали.

Вставка, видалення і виправлення з допомогою ins, del, і s

Теги ins, del і s корисні, коли ви працюєте з контентом, який був змінений або ж було змінено його релевантність. Тег ins застосовується до тексту, який нещодавно був доданий в документ – новий контент. Даний тег можна використовувати для виділення доданого тексту або для виділення тексту, чия релевантність була змінена.

Тег del застосовується до віддаленого з тексту документа – віддалений контент. Навіть якщо ви виділяєте віддалений контент, він все ще існує в документі у вигляді запису про те, що було видалене.

У цих двох тегів є необов’язковий атрибут cite, який використовується для додавання посилання, де пояснюються всі зміни. Також є атрибут datetime, де вказується, коли були зроблені зміни. Дата повинна бути задана у вигляді рядка часу, яку, на жаль, не так просто зрозуміти. Можна схитрувати і скористатися timestamp generator.
Ці атрибути корисні, якщо ви хочете вказати контекст додавання або видалення чого-небудь. Побачити їх можна в логах оновлень і списку змін, де автор перераховує всі зміни і подробиці.

Принцип роботи тега s майже той самий, але замість виділення тексту, який більше неправильний тег використовується для того, щоб браузер зрозумів, що виділений текст більше не цікавий, і, як правило, за ним йде текст заміни (наприклад, новий контент в тезі ins). Часто цей тег на сторінках можна дізнатися за зачеркнутому тексту. Але його можна використовувати лише для стилізації (для цього є span).

Практичні приклади

Уявіть, що у вас є список змін в плагіні, який ви самі розробили. На сторінці логів з допомогою тега ins можна виділити останні оновлення.

Latest Changes

Outlined below are the latest changes

Версія 1.X branch

Версія 1.0.1 — August 2012

Версія 1.0.2 — November 2012

Version 2.X branch

Версія 2.0.0 — January 2013

В іншому прикладі тег del використовується в програмі для нотаток. Тег застосовується в тих випадках, коли контент більше не існує на сторінці (і він не був замінений чим-небудь).

  • Pick up the groceries
  • Collect the kids from school
  • Cook dinner
  • Work on fancy side projects

Видно, що два завдання виконані, і вони були викреслені з допомогою тега del. Так ми показуємо користувачеві і браузеру, що контент більше не існує. Обом пунктам був доданий атрибут datetime , з допомогою якого записується дата виконання завдань. Тег s найкраще використовувати, коли контент був видалений а потім оновлений, наприклад, під час редагування документа:

WordPress 4.4 Updates

WordPress 4.4 (code-named
Bobby Brown
John Brown) was released
to the public on the 8th of December 2015.

There were several changes in V4.4
including the following

  • New default theme —
    Twenty Fifteen
    Twenty Sixteen
  • Responsive image support (image elements
    in the content now support based display
    rendering)
  • Additional embed object support such as
    Cloudup, Reddit Comments etc

У наведеному вище прикладі ми внесли невеликі виправлення, вказуючи URL в тезі s де це можливо.

Упорядкування варіантів з допомогою optgroup

Тег – один з найстаріших, але як не дивно розробники про нього дуже часто забувають. optgroup використовується всередині тега select для створення категорій елементів списку options. Якщо у вас десятки або сотні опцій в полі select, дуже зручно було б розподілити їх за категоріями.

Тег optgroup повинен бути всередині select і у нього має бути два атрибути: label – назва, яку видно, коли список розкритий, і атрибут disabled, який потрібен, коли в списку можна вибрати жоден з елементів. Сам тег optgroup можна вибрати і стилізувати (принаймні, щоб це було кроссбраузерно).

Практичні приклади

optgroup відмінно працює в будь-якому випадку, коли використовується тег select. Наприклад, розглянемо список цін на комп’ютери в інтернет-магазині.

Select the price range of your next computer
$100 — $300
$301 — $500
$501 — $700
$701 — $1200
$1201 — $1600
$1600 — $2500
$2501 — $3200

Нижче наведено приклад з атрибутом disabled, коли не можна вибрати жоден з пунктів категорії (але людей це не сильно зупинить, вони можуть просто видалити його з верстки, так що не дуже покладайтеся на нього). У прикладі нижче ви не зможете вибрати пункти в розділі «West Coast – Australia».

Vacation Destinations
New South Wales
Queensland
Tasmania
Australian Capital Territory
Victoria
Western Australia
Northern Territory
South Australia

Попередньо задані опції за допомогою datalist

Одна з найбільш крутих речей у тега select, як і у radio / checkbox инпут типів це те, що він обмежує кількість можливих попередньо заданих опцій користувачами.

Тепер для різних input’ів можна використовувати тег datalist для створення відповідного списку опцій. В різних браузерах даний компонент виглядає трохи по-різному, але скрізь він відображається у вигляді стрілки випадаючого списку праворуч від поля, яка показує, що у даного елемента є опції. При натисканні на цей пункт зазвичай випадають опції. Користувач може почати вбивати назву, і якщо є відповідні опції, то вони здадуться знизу (наприклад, у полі з опцією Chrome ви пишіть «Chr», тоді «Chrome» відобразиться знизу). Елемент ще в стадії розробки, але вже працює.

Практичні приклади

Якщо ви хочете створити список URL-адрес, які користувач може вибрати, можна створити datalist і пов’язати його з вашим полем input:

Select your favorite website!

Замітки і основні аспекти

Тег datalist буде виконувати перевірку на основі атрибута type тега input. Наприклад, якщо ви вибрали type=»email» і прив’язали datalist до тегу, то опції повинні відповідати типу email. Тег використовує розумну обробку, яка полегшить вам контроль за значеннями.

Тег datalist досить добре підтримується в браузерах, однак Apple вирішили зовсім відмовитися від нього (і в десктопної версії і iOS). Microsoft підтримує даний тег з IE10 і далі (в мобільному IE підтримка відсутня). Якщо підтримка відсутня, елементи input повернуться в нормальний режим.

Невелике попередження – цей компонент трохи забагованный. Наприклад, якщо позначити input атрибутом required і не вбити значення, форма не буде відправлятися поки не буде вибрано значення (як очікується). Але якщо ви вручну заб’єте значення (навіть якщо воно невірно) і відправите форму, це не викличе помилку – просто нічого не станеться.

Висновок

Сподіваюся, ви дізналися про один або два корисних тега з цієї статті і тепер можете використовувати їх у своїх майбутніх сайтах! У загальному і цілому, семантика даних елементів зрозуміла. Деякі будуть наполягати, що елемент Х потрібно використовувати способом Z, щоб це було «правильно». Деякі з тегів ще в розробці і в майбутньому вам доведеться шукати найкраще для них застосування.

Ми завжди дуже цікавимося тегом input, і якщо ви знаєте якісь корисні рідко використовуються теги, ми б хотіли дізнатися, як ви їх використовуєте.