HTML5 елемент “time”

5 хв. читання

До HTML5 ми не було елемента, щоб мати можливість помічати дати або часу. В останні роки, багато хто намагався вигадати альтернативні способи помічати дату та час, але навіщо?

У цій статті ми поговоримо про HTML5 елемент <time>, який є рішенням цієї проблеми.

Про елемент

<time> був представлений в специфікації HTML5 ще в 2009 році. Але в 2011 році він був "забутий" на користь <data>. Потім <time> був відновлений та покращений, були додані нові формати дати/часу. З цього можна бачити, що характеристики можуть бути досить суперечливими.

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

Приклад:

    <time>2009-02-01</time>

У коді вище, я зазначаю дату 1 лютого 2009 року у такому форматі: РРРР-ММ-ДД. Цей спосіб повинен бути вам знайомий, якщо ви деякий час користувались Linux, але, як ми побачимо пізніше в цій статті, це не єдиний допустимий формат.

В початковій специфікації була невелика кількість допустимих форматів. Наприклад, Ви не могли б вказати дату "листопад 2014 р." або "476" (початок середньовіччя). В деяких випадках це була великою проблемою, наприклад при датуванні живопису або історичної події, коли точна дата невідома.

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

    <time>2014-01</time>

Атрибут datetime

Специфікація елемента <time> стандартизує атрибут, який називається datetime.

В багатьох країнах свій специфічний дата-формат. Наприклад, італійці пишуть дату у форматі ДД/ММ/РРРР. Тому, показуючи дату в іншому форматі, ми можемо заплутати користувача.

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

Якщо datetime не вказаний, вміст повинен знаходитися в одному з допустимих форматів дати/часу, в іншому випадку ми можемо використовувати, його як хочемо. Це здорово, тому що це дозволяє писати код, як показано нижче:

    Засідання призначено на <time datetime="2014-10">Жовтень</time>.

Атрибут Pubdate

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

    <article>
      <h1>Заголовок</h1>
      <p>Контент</p>
      <footer>
        <p>Дата публікації <time datetime="2014-09-20" pubdate="">20 вересня, 2014</time>
      </p></footer>
    </article>

На жаль, цей атрибут був видалений зі специфікації. Зараз не існує альтернативних атрибутів для його заміни. Проте, ви можете використовувати BlogPosting schema, а зокрема datePublished:

    <article itemscope="" itemtype="http://schema.org/BlogPosting">
      <h1 itemprop="headline">Заголовок/h1>
      <p>Контент</p>
     
      <footer>
        <p>Дата публікації <time datetime="2014-09-20" itemprop="datePublished">20 вересня, 2014</time>
      </p></footer>
    </h1></article>

Тепер, коли ви маєте повне уявлення про елемент <time>, давайте більш детально поговоримо про допустимі формати.

  1. Вказання місяця

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

    <time>2014-09</time>
  1. Дійсна дату (день місяця)

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

    <time>2014-09-16</time>
  1. Дата без вказання року

Це повинен бути рядок із зазначенням місяця і дня без року у вигляді ММ-ДД. Наприклад:

    <time>09-20</time>
  1. Допустимий Час

Це має бути рядок з зазначенням часу, без дати, в 24-годинному форматі, у вигляді ГГ:ХвХв[:СС[МсМсМс]], де:

Г - години
Хв - хвилини
С - секунди
Мс - мілісекунди
Квадратні дужки вказують на деталі, які є необов'язковими
Приклад:

    <time datetime="16:10"></time>

Або так:

    <time>18:20:30</time>
  1. Допустима плаваюча дата і час

Цей формат присутній в специфікації W3C, але не WHATWG версії. Це повинна бути точна дата і час у форматі РРРР-ММ-ДДT(t)ГГ:ХвХв[:СС[МсМсМс]] або РРРР-ММ-ДД ГГ:ХвХв[:СС[МсМсМс]]. Наприклад:

    <time datetime="2014-09-16T18:20:30">Вівторок, 18:20</time>
  1. Допустиме зміщення часового поясу

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

    <time>+01:00</time>
  1. Дійсна глобальна дата і час

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

    <time>2014-09-16T18:20:30+02:00</time>
  1. Тиждень
    <time>2014-W18</time>
  1. Рік
    <time datetime="2014">Рік</time>
  1. Тривалість
    <time datetime="P4D">чотири дні</time>

Або так:

    <time datetime="P4DT4H3M"></time>

Обмеження

  • не має можливості визначати часові проміжки, якщо подія (конференція, фестиваль) проходить на протязі декількох днів, то вам потрібно використати <time> два рази:
    <time datetime="2014-06-28">26<span class="hidden">June 2014</span></time>-<time datetime="2014-06-28">28 June 2014</time>
  • відсутня можливість представляти дату до нашої ери.

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

Елемент підтримується в:

  • Chrome 33+
  • Firefox 22+
  • Internet Explorer 9+
  • Опера 22+
  • Safari 7+
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 1.7K
Приєднався: 1 рік тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід