HTML Academy · Урок

time address и mark

Семантически размечайте даты, контактные данные и выделенный текст

«time address и mark» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент времени

Элемент <time> размечает даты и время в формате, понятном машинам:

<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
  <time datetime="2025-01-15">Jan 15</time> to
  <time datetime="2025-01-20">Jan 20</time>.
</p>

Форматы атрибута datetime

Атрибут datetime должен содержать допустимую строку даты и времени:

<time datetime="2025-01-15">January 15</time>        <!-- date -->
<time datetime="14:30">2:30 PM</time>               <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time>        <!-- week -->
<time datetime="2025-01">January 2025</time>         <!-- year-month -->
<time datetime="P3D">3 days</time>                  <!-- duration -->

Зачем нужен элемент времени

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

Поисковые системы понимают дату вашего содержимого
Браузеры и приложения могут добавлять её в календарь
Программы чтения с экрана правильно произносят даты
JavaScript может разобрать атрибут datetime и отформатировать его для отображения

Динамическое форматирование дат

Используйте JavaScript, чтобы форматировать даты из атрибута datetime:

<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>

<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>

Элемент контактных данных

Элемент <address> размечает контактную информацию для ближайшего <article> или <body>:

<address>
  <p>Jane Smith</p>
  <p><a href="mailto:jane@example.com">jane@example.com</a></p>
  <p><a href="tel:+15555550100">(555) 555-0100</a></p>
  <p>123 Main Street, New York, NY 10001</p>
</address>

Контактные данные статьи

Используйте address внутри статьи, чтобы разметить контактную информацию автора:

<article>
  <h2>HTML Guide</h2>
  <address>
    Written by
    <a href="mailto:jane@example.com" rel="author">Jane Smith</a>
  </address>
  <p>Content...</p>
</article>

Для чего не предназначен элемент адреса

Элемент <address> предназначен только для контактной информации, а не для произвольных адресов:

<!-- BAD: address for a location with no contact info -->
<address>
  Empire State Building, New York
</address>

<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>

<!-- GOOD: address for contact information -->
<address>
  <a href="mailto:support@example.com">Contact Support</a>
</address>

Элемент выделения

Элемент  выделяет текст, который важен в данном контексте:

<p>
  Search results for "HTML5":
  The <mark>HTML5</mark> specification was finalized in 2014.
  <mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->

Оформление выделения

Изменяйте стандартный жёлтый цвет выделения:

mark {
  background-color: #fef08a;
  color: inherit;  /* keep text color from parent */
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* High contrast mode: */
@media (forced-colors: active) {
  mark {
    background-color: Highlight;
    color: HighlightText;
  }
}

Выделение, важность и акцент

Как выбрать элемент для выделения:

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

Поиск и выделение

Практическая реализация: выделение поисковых запросов в результатах:

function highlightText(text, query) {
  if (!query) return text;
  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escaped})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
//   highlightText(result.title, searchQuery);

Быстрая проверка

Для чего используется машиночитаемый атрибут datetime?

Итоги: время, контактные данные и выделение

Строчные семантические элементы:

<time datetime=""> — машиночитаемые даты и время
<address> — контактная информация для ближайшей статьи или страницы
 — выделение, важное в данном контексте (например, поисковых запросов)
datetime использует формат ISO 8601: YYYY-MM-DD, HH:MM
Стандартное оформление mark: жёлтый фон; его можно изменить с помощью CSS

Часто задаваемые вопросы

Урок «time address и mark» бесплатный?

Да — полный текст урока «time address и mark» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «time address и mark»?

Семантически размечайте даты, контактные данные и выделенный текст Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «time address и mark»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy