Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ What Does It All Mean/ Даты и время. HTML5. Up and Running. Марк Пилгрим

Даты и время

Дата публикации: 12.03.2011

Это интересно, не так ли? Конечно, это не так захватывающе, как мчаться голым на лыжах с вершины Эвереста и распевать гимн. Но все же, наблюдать какими шагами идет развитие семантики, достаточно интересно. Итак, продолжим апгрейдить наш пример кода:

<div class="entry">
	<p class="post-date">October 22, 2009</p>
	<h2>Travel day</h2>
</div>

Все та же старая история. Общий шаблон — обозначение даты публикации статьи — и опять разметка не имеет никакого смысла: используем тег общего назначения и добавляем ему класс. Само собой этот код будет валидным и в HTML5. Но в HTML5 для таких случаев есть специальный элемент <time>:

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

Элемент <time> состоит из трех частей:

  • метки для машин;
  • текст для пользователя;
  • опциональный флаг pubdate.

В данном примере атрибут datatime определяет только дату, без времени. Формат (yyyy-mm-dd): 4-цифры для года, две — для месяца, и две для дня. Цифры должны быть разделены тире.

Если хочешь указать и время, добавляй букву T после даты. Время указывается в 24-часовом формате с указанием смещения по часовому поясу:

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
	October 22, 2009 1:59pm EDT
</time>

Формат даты/времени достаточно гибкий. В HTML5 спецификации есть ряд примеров реального использования.

Заметь, я изменил содержимое между <time> и </time> на машиночитаемый текст. Но это не обязательно. В тексте можно написать что угодно, а для машин используется атрибут datetime. Такой код будет корректным:

<time datetime="2009-10-22" pubdate>Прошлый вторник</time>

И даже такой:

<time datetime="2009-10-22" pubdate></time>

Последняя составляющая — это атрибут pubdate. Это логический атрибут, и если он нужен, просто добавляем его в код:

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

Если тебе не нравятся «голые» атрибуты, можно написать так:

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

Что же означает этот атрибут? Есть два варианта. 1-й: если он используется внутри элемента <article> — тогда это дата публикации статьи. 2-й: если он используется вне <article> — тогда это дата публикации всего документа.

В итоге, код из нашего примера станет таким:

<article>
	<header>
		<time datetime="2009-10-22" pubdate>October 22, 2009</time>
		<h1><a href="#"rel="bookmark"title="link to this post">Travel day</a></h1>
	</header>
	<p>Lorem ipsum dolor sit amet...</p>
</article>

Update 12.10.12

Атрибут pubdate более не актуален. Вместо используется itemprop=»published» в рамках используемой схемы микроданных.

Куда дальше

>содержание

Показать комментарии