Время и даты (time)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 25
Автор
Рек. время прохождения 3 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
Тег `<time>` — это один из полезных семантических инструментов HTML5. Он помогает браузерам, поисковым системам и программам для чтения с экрана понимать, что определенный текст на странице является датой или временем. Это не меняет внешний вид текста для пользователя, но добавляет важный контекст "под капотом". Например, благодаря этому тегу браузер может предложить добавить событие в календарь, а поисковик — точнее понять, когда была опубликована статья. В этих заданиях мы попрактикуемся в использовании тега `<time>` и его главного атрибута `datetime`, чтобы вы научились правильно размечать любые даты и время — от простых до самых конкретных, с указанием часового пояса.
Список тем

Обозначаем дату

id: 37872_html-time-01

Сделайте так, чтобы дата '25 декабря 2023' стала семантически понятной для браузера и поисковых систем. Оберните дату в специальный тег, предназначенный для обозначения времени и дат.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>Празднование состоится <input1>25 декабря 2023</input1>.</p>
Чтобы семантически выделить дату или время, используется парный тег `<time>`. Вам нужно обернуть текст с датой в открывающий и закрывающий теги. В поле для ввода нужно указать только имя тега: `time`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавляем машиночитаемый формат

id: 37872_html-time-02

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

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>Статья опубликована <time input1="2023-10-26">26 октября 2023</time>.</p>
У тега `<time>` есть ключевой атрибут `datetime`. Он принимает дату и/или время в стандартизированном формате. В этом задании вам нужно просто вписать имя этого атрибута в тег.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем точную дату

id: 37872_html-time-03

В атрибуте `datetime` нужно указать полную дату в формате 'ГОД-МЕСЯЦ-ДЕНЬ' (YYYY-MM-DD). Заполните пропуск, чтобы дата '5 мая 2024 года' была корректно представлена для машины.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>Событие произошло <time datetime="input1">5 мая 2024 года</time>.</p>
Машиночитаемый формат для даты '5 мая 2024 года' — это '2024-05-05'. Обратите внимание, что месяц и день, если они состоят из одной цифры, дополняются нулем спереди (например, '05').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавляем время

id: 37872_html-time-04

Часто нужно указать не только дату, но и точное время. Дополните значение атрибута `datetime`, чтобы оно включало время '18:30'. Дату и время нужно разделить заглавной латинской буквой 'T'.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
h4 {
  margin-bottom: 5px;
}
p {
  margin-top: 0;
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<h4>Дедлайн сдачи проекта</h4>
<p><time datetime="2024-12-20Tinput1">20 декабря в 18:30</time></p>
Чтобы добавить время к дате в атрибуте `datetime`, используйте букву 'T' в качестве разделителя. Например: `2024-12-20T18:30`. Время указывается в 24-часовом формате.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Учитываем часовой пояс

id: 37872_html-time-05

Для событий, которые важны для аудитории из разных стран, необходимо указывать часовой пояс. Дополните значение `datetime` смещением для Московского времени (+03:00).

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>Трансляция начнется <time datetime="2025-01-15T21:00:00input1">15 января в 21:00 по Москве</time>.</p>
Смещение часового пояса добавляется в конец строки времени. Для Московского времени (UTC+3) нужно дописать `+03:00`. Полный формат будет выглядеть так: `2025-01-15T21:00:00+03:00`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Время без даты

id: 37872_html-time-06

Иногда нужно указать только время, например, в расписании на сегодня. Используйте тег `time` и атрибут `datetime`, чтобы семантически обозначить '10:00'.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>Завтрак подают в <input1 datetime="10:00">10:00</input1>.</p>
Если нужно указать только время, то в атрибуте `datetime` оно записывается в формате `HH:MM` или `HH:MM:SS`. В этом задании нужно обернуть текст `10:00` в тег `time`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ежегодное событие

id: 37872_html-time-07

Некоторые события происходят каждый год в один и тот же день. Чтобы обозначить такую повторяющуюся дату, в атрибуте `datetime` нужно указать 'МЕСЯЦ-ДЕНЬ' без года. Заполните атрибут для даты '1 сентября'.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
}
time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<p>День знаний отмечается <time datetime="input1">1 сентября</time>.</p>
Для ежегодных дат формат в `datetime` — `MM-DD`. Для 1 сентября это будет `09-01`. Не забывайте про ведущий ноль для месяца.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Итоговая задача: карточка новости

id: 37872_html-time-08

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

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f7f9;
  padding: 15px;
  margin: 0;
}
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
}
.card img {
  width: 100%;
  height: auto;
  display: block;
}
.card-content {
  padding: 15px;
}
.card-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #1e293b;
}
.card-content p {
  margin-bottom: 0;
  font-size: 0.9em;
  color: #64748b;
}
.card-content time {
  background-color: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  color: #0c4a6e;
}
HTML
<div class="card">
    <img src="https://naytikurs.ru/img/4j.jpeg" alt="Ночной город">
    <div class="card-content">
        <h3>Важное обновление системы</h3>
        <p>Опубликовано: <input1 input2="2024-08-10T11:45:00Z">10 августа, 11:45 UTC</input1></p>
    </div>
</div>
Вам нужно выполнить два действия: 1) В `input1` вписать имя тега — `time`. 2) В `input2` вписать имя атрибута, который хранит машиночитаемую дату, — `datetime`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру