Как сделать время в html

Для отображения времени на веб-странице в HTML можно использовать тег <time>.

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

<p>Текущее время: <time datetime="2021-10-14T13:30">13:30</time></p>

В атрибуте datetime указывается дата и время в формате ISO 8601. Этот атрибут необходим для машинного чтения времени на странице, поэтому его следует указывать всегда.

Если необходимо отобразить только время без указания даты, можно использовать атрибут datetime со значением T:

<p>Текущее время: <time datetime="T13:30">13:30</time></p>

Также можно использовать JavaScript для динамического обновления времени на странице:

<p>Текущее время: <time id="currentTime"></time></p>

<script>
  var timeElement = document.getElementById('currentTime');
  setInterval(function () {
    var currentTime = new Date();
    timeElement.textContent = currentTime.toLocaleTimeString();
  }, 1000);
</script>

В этом примере мы используем JavaScript для обновления содержимого элемента <time> каждую секунду. Вместо статического значения времени мы выводим текущее время, полученное с помощью объекта Date().

Вопрос «время в HTML» обычно про одно из трёх: разметить дату на странице, вывести текущее время или дать пользователю выбрать время в форме.

Разметить дату и время

Тег <time> с атрибутом datetime в машинном формате:

<p>Вебинар начнётся <time datetime="2026-10-20T19:00+03:00">20 октября в 19:00</time></p>

Пользователь видит текст внутри тега, а поисковики и браузерные расширения читают точное значение из datetime. Формат: ГГГГ-ММ-ДД для даты, ЧЧ:ММ для времени, T между ними.

Показать текущее время

HTML не умеет обновлять время сам, это делает JavaScript:

<p>Сейчас <span id="clock"></span></p>

<script>
  const clock = document.getElementById('clock');

  function tick() {
    clock.textContent = new Date().toLocaleTimeString('ru-RU');
  }

  tick();
  setInterval(tick, 1000);
</script>

toLocaleTimeString('ru-RU') выводит время в формате 14:05:09 по часовому поясу пользователя. Без секунд:

new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });

Дата словами: new Date().toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' }) → 15 октября.

Поле выбора времени в форме

<label>
  Удобное время звонка
  <input type="time" name="call_time" min="09:00" max="18:00">
</label>

Браузер покажет поле с выбором часов и минут. min и max ограничивают диапазон. Другие поля:

Значение приходит на сервер в формате 14:30 независимо от того, как браузер показал его пользователю.

Теги и формы разбирают в бесплатном курсе «Введение в HTML и CSS».