HTML-тег <время>

HTML-тег <time> представляет собой определённый момент времени, промежуток времени или повторяющийся момент времени в документе. Он используется для придания семантического значения данным, связанным со временем, делая их пригодными для машинного чтения и улучшая доступность для таких приложений, как календари, планировщики мероприятий и поисковые системы.

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

Базовый синтаксис HTML-тега <time>

Базовая структура тега <time> : 

<time datetime="YYYY-MM-DDThh:mm:ssTZD">Human-readable time</time>

Здесь атрибут datetime используется для указания машиночитаемого формата времени.

Пример конкретного момента времени

В следующем примере тег <time> используется для указания даты события: 

<!DOCTYPE html>
<html>
    <body>
        <p>The event will take place on <time datetime="2024-12-25">December 25, 2024</time>.</p>
    </body>
</html>

Объяснение: Атрибут datetime указывает дату в машиночитаемом формате( 2024-12-25 ), тогда как текст внутри тега <time> предоставляет версию, удобную для чтения человеком.

Пример продолжительности

Тег <time> также может представлять длительность с помощью атрибута datetime : 

<!DOCTYPE html>
<html>
    <body>
        <p>The estimated travel time is <time datetime="PT2H30M">2 hours and 30 minutes</time>.</p>
    </body>
</html>

Объяснение: Атрибут datetime использует формат ISO 8601( PT2H30M ) для представления длительности 2 часа 30 минут.

Пример повторяющегося времени

Повторяющиеся события также можно разметить с помощью тега <time> : 

<!DOCTYPE html>
<html>
    <body>
        <p>The team meeting is held every <time datetime="2024-12-12T10:00:00">Thursday at 10:00 AM</time>.</p>
    </body>
</html>

Объяснение: Атрибут datetime указывает повторяющееся время с использованием определенного формата даты и времени.

Стилизация тега <time> с помощью CSS

Вы можете стилизовать тег <time> чтобы визуально подчеркнуть время или дату: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            time {
                font-weight: bold;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <p>The deadline is <time datetime="2024-12-31">December 31, 2024</time>.</p>
    </body>
</html>

Результат: время или дата, отображаемые тегом <time> выделены жирным шрифтом и синим цветом для выделения.

Атрибуты HTML-тега <time>

  • datetime: Задаёт машиночитаемый формат времени или даты. Поддерживает форматы ISO 8601 для дат( YYYY-MM-DD ), времени( hh:mm:ss ), продолжительности( PT1H30M ) и других.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Практическое применение тега <time>

  • Планирование мероприятий: отметьте даты и время мероприятий для ясности и поисковой оптимизации.
  • Доступность: предоставьте машиночитаемые форматы времени для программ чтения с экрана и вспомогательных технологий.
  • Динамические приложения: используйте атрибут datetime для систем календаря, напоминаний или программного обеспечения для планирования.
  • SEO: Улучшите видимость в поисковых системах, отметив важные даты и время в структурированных форматах.