Статьи

Руководство по элементу времени HTML5

Октябрь 5, 2018

Время — одна из немногих известных вещей, которая бесконечна. Люди, а также животные и растения имели дело со временем с самого начала своего существования.

В Интернете эта потребность не отличается. Даже в этой среде нам нужно сообщить другим людям, что что-то произошло в определенный момент, в конкретную дату или в связи с другим установленным временем.

До HTML5 у нас не было элемента для семантической разметки даты или времени. В последние годы другие решения, в частности микроформаты и микроданные , пытались восполнить этот пробел для конкретных ситуаций (дата рождения, издание книги и т. Д.).

В этой статье я расскажу об элементе HTML5 <time>

Что такое элемент <time>

Элемент <time><data> Затем <time> Из этого вы можете видеть, что спецификации могут быть довольно спорными.

Элемент <time>григорианском календаре . Это встроенный элемент (например, <span><a><div><span> При использовании в простейшей форме содержимое элемента должно быть допустимой строкой даты и / или времени .

Пример показан ниже: 

 <!-- 1st February 2009 -->
<time>2009-02-01</time>

В приведенном выше коде я определяю дату, а именно 1 февраля 2009 года. Формат, используемый в коде ( yyyy-mm-dd

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

К счастью, этот тип даты теперь разрешен в спецификации. Итак, сегодня мы можем описать данный месяц года без дня: 

 <!-- January 2014 -->
<time>2014-01</time>

Атрибут datetime

Спецификация для элемента <time>datetime

Хотя написание дат в форматах, рассмотренных в предыдущем разделе, работает в некоторых странах / культурах, в других это не подходит Например, итальянцы пишут даты в формате dd/mm/yyyy Поэтому показ даты в другом формате может привести к путанице.

Эту проблему легко решить, используя атрибут datetime<time> Это необязательный атрибут, который содержит информацию в машиночитаемом формате, как показано в примерах, что позволяет нам писать содержимое элемента любым удобным для нас способом.

Фактически, если дата и время не указаны, содержимое должно быть в одном из допустимых форматов даты / времени, в противном случае мы можем использовать его по своему усмотрению. Это здорово, потому что позволяет нам писать код следующим образом: 

 datetime

Или даже: 

 The next meeting is scheduled for <time datetime="2014-10">October</time>.

Оба эти примера имеют содержимое даты, которое не машиночитаемо в соответствии со спецификацией, но они допустимы из-за наличия атрибута The next meeting is scheduled for <time datetime="2014-10">next month</time>.

На первый взгляд это может показаться странным. Но содержание элемента datetime Кроме того, этот факт учитывает интернационализацию дат. Например: 

 <time>

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

Атрибут <!-- Same message as before but in Italian -->
Il prossimo incontro è programmato per <time datetime="2014-10">il mese prossimo</time>.

Первые черновики спецификации определяли атрибут pubdatepubdate Этот атрибут был логическим значением, указывающим, что данная дата была датой публикации родительского элемента <time><article>

Например, вы можете написать: 

 <article>

В этом случае 5 сентября 2014 года будет датой публикации этой «статьи».

Я был большим поклонником этого атрибута с тех пор, как узнал об этом, но, к сожалению, он был удален из спецификации. Это решение создало большую проблему, потому что многие люди (включая меня) используют дату публикации, чтобы судить о свежести и актуальности статьи или новости. Несмотря на то, что вы все еще можете получить доступ к странице статьи и просмотреть дату публикации, нам нужен стандартный способ, чтобы машина могла прочитать дату.

На данный момент нет атрибута, который заменяет <article>
<h1>A good title</h1>
<p>This is the content of a great article.</p>
<footer>
<p>Article published on <time datetime="2014-09-05" pubdate>September the 5th, 2014</time>
</footer>
</article>схему BlogPosting и, в pubdatedatePublished 

 <article itemscope itemType="http://schema.org/BlogPosting">
  <h1 itemprop="headline">A good title</h1>
  <p itemprop="articleBody">This is the content of a great article.</p>

  <footer>
    <p>Article published on <time datetime="2014-09-05" itemprop="datePublished">5th September 2014</time>
  </footer>
</article>

Теперь, когда у вас есть полный обзор элемента <time>

Допустимые форматы для содержимого элемента <time>datetimedatetime

Действительный месяц

Это должна быть строка, указывающая конкретный месяц года в виде yyyy-mm Например: 

 <!-- September 2014 -->
<time>2014-09</time>

Действительная дата (день месяца)

Это должна быть строка, указывающая точную дату в виде yyyy-mm-dd Например: 

 <!-- 16th September 2014 -->
<time>2014-09-16</time>

Действительная годовая дата

Это должна быть строка, указывающая месяц и день без года в виде mm-dd Например: 

 <!-- 29th June -->
<time>06-29</time>

Действительное время

Это должна быть строка, указывающая время без даты и использующая 24-часовой формат, в формате HH:MM[:SS[.mmm]]

  • H
  • M
  • S
  • m
  • Квадратные скобки указывают на необязательные части

Пример этого формата показан ниже: 

 <!-- 16 hours and 10 minutes
    (or 4 hours and 10 minutes pm) -->
<time datetime="16:10">afternoon</time>

Другой пример: 

 <!-- 18 hours, 20 minutes, and 30 seconds
    (or 6 hours, 20 minutes, and 30 seconds) -->
<time>18:20:30</time>

Действительная Плавающая Дата и Время

Этот формат присутствует в спецификации W3C, но отсутствует в версии WHATWG. Это должна быть точная дата и время в формате yyyy-mm-ddTHH:MM[:SS[.mmm]]yyyy-mm-dd HH:MM[:SS[.mmm]] Например: 

 <!-- 16th September 2014 at 18 hours,
    20 minutes, and 30 seconds -->
<time datetime="2014-09-16T18:20:30">Tuesday at 18:20</time>

Действительное смещение часового пояса

Это должна быть строка, представляющая смещение часового пояса. Например: 

 <!-- GMT+1 (like Italy) -->
<time>+01:00</time>

Действительная глобальная дата и время

Это должна быть строка, представляющая полную дату, включая время и часовой пояс. Например: 

 <!-- 16th September 2014 at 18 hours,
    20 minutes, and 30 seconds in a 
    time zone of GMT+1 (like Italy) -->
<time>2014-09-16T18:20:30+01:00</time>

Действительная неделя

Это должна быть строка, представляющая неделю года. Например: 

 <!-- The 18th week of 2014 -->
<time>2014-W18</time>

Действительный год

Это должна быть строка, представляющая год. Например: 

 <!-- 2014 -->
<time datetime="2014">this year</time>

Допустимая строка продолжительности

Это должна быть строка, представляющая продолжительность. Длительность может начинаться с префикса «P», обозначающего «период», и использовать «D» для обозначения дней. Например: 

 <!-- A duration of four days -->
<time datetime="P4D">four days</time>

В случае, если вам нужно дополнительно указать период, после «D» вы можете добавить «T», обозначая «время», и использовать «H» для часов, «M» для минут и «S» для секунд. Как это: 

 <!-- A duration of four days,
    four hours, and three minutes -->
<time datetime="P4DT4H3M">four days</time>

Этот формат также позволяет вам указать один или несколько компонентов длительности времени .

Ограничения

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

 <time datetime="2014-06-28">26<span class="hidden">June 2014</span></time>-<time datetime="2014-06-28">28 June 2014</time>

Другое ограничение заключается в том, что вы не можете использовать элемент <time>наступления эры .

Поддержка браузера

На основе статьи элемента <time> этот элемент поддерживается в:

  • Chrome 33+
  • Firefox 22+
  • Internet Explorer 9+
  • Опера 22+
  • Safari 7+

Однако в старых браузерах не о чем беспокоиться. Фактически, в случае отсутствия поддержки этого элемента браузер просто отобразит его как неизвестный встроенный элемент.

Вывод

Если вы еще не начали использовать элемент <time>

Для получения дополнительной информации, вот некоторые соответствующие ссылки:

Эта статья также доступна на португальском языке на Tableless

36
Share: