Огляд HMTL5 елемента time

17

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

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

До появи HTML5 в нашому розпорядженні не було елемента для семантичної розмітки дати або часу. За останні роки інші рішення, найбільш відомі з них – Microformats і Microdata – спробували заповнити відсутність такого елементу для певних ситуацій (дата народження, публікація книги і т. д.). У цій статті я збираюся розглянути HTML5 елемент time, який допомагає вирішити тільки що позначену проблему.

Що таке елемент time?

Елемент time був представлений в специфікації HTML5 в 2009 році. Потім в 2011 році він був замінений елементом data. Потім елемент time знову з’явився в удосконаленому вигляді, що дозволяє використовувати нові формати дати/часу. Виходячи з цього, можна зробити висновок про те, що специфікації можуть бути досить суперечливими.

Елемент time являє дату і/або час за Григоріанським календарем. Він є рядковим елементом (як елементи span a) і повинен мати закриваючий тег (як елементи div і span). Коли ми використовуємо його в найпростішому вигляді, вміст даного елемента має представляти собою валідність (правильного формату) рядок із зазначенням дати та/або часу. Приклад використання представлений нижче:

2009-02-01

У даному прикладі я визначаю дату, зокрема 1ое лютого 2009 року. Формат представлення, використаний у коді (yyyy-mm-dd), повинен бути вам знаком, якщо ви хоч трохи знайомі з операційною системою Linux, але далі ми побачимо, що це не єдиний валідний формат.

У першому чорновому варіанті специфікацій, формат точних дат був одним з декількох доступних форматів, які ви могли використовувати. Наприклад, ви не могли б вказати на такі дати, як «Листопад 2014» або «476» (початок Середньовіччя). А це було важливим питанням для декількох випадків, таких як визначення дати написання картини або датування історичного події, тобто у випадках, коли точна дата невідома.

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

2014-01

Атрибут datetime

У специфікації елемента time також був стандартизований атрибут під назвою datetime. Зазначення дат в тому форматі, який описаний вище, підходить до деяким країнам/культурам, але є неприйнятним для інших. Наприклад, в Італії дати вказують форматі dd/mm/yyyy. Таким чином, дата, представлена в іншому форматі, може ввести жителів Італії в оману.

Дана задача може бути легко вирішена за допомогою атрибута datetime у елемента time. Це необов’язковий атрибут, який містить інформацію, представлену в машинному форматі, як у наведених прикладах, що дозволяє нам вказувати вміст елемента так, як нам подобається.

Фактично, якщо атрибут datetime не вказаний, вміст має бути представлено в одному з валідних форматів представлення дати/часу. А якщо вказаний, то вміст можна уявляти, як нам захочеться. Це здорово, т. до. дозволяє нам писати наступний код:

Наступна зустріч запланована на Жовтень.

Або навіть:

Наступна зустріч запланована на наступний місяць.

Згідно специфікації в обох прикладах дата представлена в форматі, непридатному для читання машиною, але такий запис є допустимою завдяки атрибуту datetime, який дійсно використовує валідний формат.

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

Il prossimo incontro è programmato per il mese prossimo.

В даному прикладі написано таке ж повідомлення, що й раніше, але вже на італійській мові.

Атрибут pubdate

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

Хороший заголовок

Вміст відмінною статті.

Стаття опублікована 5го вересня 2014 року

У цьому випадку 5ое вересня 2014 року стане датою публікації цієї «статті». Я був великим фанатом цього атрибута, після знайомства з ним, але, на жаль, він був прибраний з специфікації. Таке рішення створило велику проблему, оскільки багато людей (і я в тому числі) використовували дату публікації для визначення свіжості і релевантності статті або новини. Незважаючи на те, що ми все одно можемо отримати доступ до сторінки зі статтею і дізнатися дату публікації, нам потрібен стандартизований спосіб зазначення такої дати для її прочитання машиною.

В даний момент немає атрибута, що заміняє собою pubdate, але ви можете використовувати схему постингу в блогах, зокрема значення datePublished, як це показано нижче:

Хороший заголовок

Вміст відмінною статті.

Стаття опублікована 5го вересня 2014 року

Тепер, після того, як ви отримали повне уявлення про елементі time, давайте подивимося на кілька допустимих форматів. Валідні формати для вмісту елемента time при відсутності атрибута datetime, а також формати для самого атрибута datetime, описані далі в цій статті.

Валидное зазначення місяця

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

2014-09

Валидное зазначення дати (день місяця)

Це повинна бути рядок, що визначає точну дату yyyy-mm-dd. Наприклад:

2014-09-16

Валидное зазначення дати без зазначення року

Це повинна бути рядок, що визначає місяць і день, без зазначення року, у вигляді mm-dd. Наприклад:

06-29

Валидное вказівка часу

Це повинна бути рядок, що визначає час без дати і використовує 24-годинний формат, у вигляді HH:MM[:SS[.mmm]]:

H – це годинник

M – це хвилини

S – це секунди

m – це мілісекунди

Квадратні дужки вказують на необов’язкові параметри

Приклад наведено нижче:

день

Інший приклад:

18:20:30

Валидное вказівку поточної дати і часу

Даний формат представлений в специфікації W3C, але не у версії WHATWG. Це повинна бути точна дата і час у форматі yyyy-mm-ddTHH:MM[:SS[.mmm]] або yyyy-mm-dd HH:MM[:SS[.mmm]]. Наприклад:

Вівторок о 18:20

Валидное вказівку зміщення часових поясів

Це повинна бути рядок, що визначає зміщення часових поясів. Наприклад:

+01:00

Валидное вказівку світової дати і часу

Це повинна бути рядок, що визначає повну дату, включаючи час і часовий пояс. Наприклад:

2014-09-16T18:20:30+01:00

Валидное вказівку тижня

Це повинна бути рядок, що визначає тиждень року. Наприклад:

2014-W18

Валидное вказівку року

Це повинна бути рядок, що визначає рік. Наприклад:

цей рік

Валидное зазначення тривалості

Це повинні бути рядок, що визначає тривалість. Тривалість може починатися з префікса «P», що вказує на період (англ. Period), і префікс «D», який вказує на дні (англ. Days). Наприклад:

чотири дні

Якщо вам потрібно ще більше конкретизувати період, то після префікса «D» ви можете додати префікс «T», що вказує на час (англ. Time), префікс «H» для годинників (англ. Hours), префікс «M» для хвилин (англ. Minutes) і префікс «S» для секунд (англ. Seconds). Ось так:

чотири дні

Даний формат дозволить вам визначити один або більше компонентів тривалості часу.

Обмеження

Поточна версія специфікації встановлює деякі обмеження на те, що ви можете визначити за допомогою елемента time. Одне з таких обмежень полягає в тому, що ви не можете вказати діапазон дат. Тобто якщо ви пишете замітку про конференції, яка проходить протягом декількох днів, наприклад, з 26 липня 2014 року по 28 липня 2014 року, то вам потрібно буде використовувати два елемента time. Хороший приклад, що ілюструє цю ситуацію, можна знайти на сторінці з виступами на моєму сайті, де я використовую елемент time ось так:

26липня 2014-28 липня 2014

Інше обмеження полягає в тому, що ви не можете використовувати елемент для зазначення дати до нашої ери.

Браузерна підтримка

Спираючись на статтю про елементі time на сайті MDN, цей елемент підтримується в:

Chrome 33+

Firefox 22+

Internet Explorer 9+

Opera 22+

Safari 7+

Однак, не варто особливо турбуватися за його підтримку в старих браузерах. По суті, якщо браузер не підтримує даний елемент, то він просто відобразить її як незнайомий рядковий елемент.