@selezn

Как сделать машиночитаемые «Часы работы» в HTML?

63d22db2e5507332921193.png
Есть элемент макета с указанным на нем временем работы кампании, как правильно обернуть промежуток работы в тег <time> или другие теги, чтобы сделать время работы машиночитаемым?
  • Вопрос задан
  • 286 просмотров
Решения вопроса 1
vabka
@vabka
Токсичный шарпист
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Ещё можно добавить микроразметку через itemProp
https://schema.org/LocalBusiness

Получится что-то типа
<time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa 7:00-18:00"> Mon. - Sat. 7:00 am - 6:00 pm</time>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Sozdavan
Вы можете использовать HTML-элементы time и span для создания машиночитаемых часов работы в HTML. Элемент «time» можно использовать для указания времени начала и окончания события, а элемент «span» можно использовать для переноса часов работы в определенный день. Вот пример:
<p>Opening Hours:</p>
<ul>
  <li>Monday - Friday: <time>9:00</time> - <time>17:00</time></li>
  <li>Saturday: <span class="closed">Closed</span></li>
  <li>Sunday: <time>10:00</time> - <time>16:00</time></li>
</ul>


В этом примере часы работы каждого дня заключены в элемент «li», а время начала и окончания указано с помощью элемента «time». Элемент «span» используется для обозначения того, что магазин закрыт в субботу. Вы также можете использовать атрибут datetime, чтобы указать дату и время в машиночитаемом формате, например:
<p>Opening Hours:</p>
<ul>
  <li>Monday - Friday: <time>9:00</time> - <time>17:00</time></li>
  <li>Saturday: <span class="closed">Closed</span></li>
  <li>Sunday: <time>10:00</time> - <time>16:00</time></li>
</ul>


В этом примере часы работы каждого дня заключены в элемент «li», а время начала и окончания указано с помощью элемента «time». Элемент «span» используется для обозначения того, что магазин закрыт в субботу. Вы также можете использовать атрибут datetime, чтобы указать дату и время в машиночитаемом формате, например:
<time datetime="2022-09-12T09:00">9:00</time>

Рекомендуется также включать aria-label для специальных возможностей и поисковых систем:
<time datetime="2022-09-12T09:00" aria-label="Open at 9:00">9:00</time>


Кроме того, вы можете использовать элемент «meta» с атрибутом «itemprop», чтобы указать часы работы вашего веб-сайта в машиночитаемом формате:
<meta itemprop="openingHours" content="Mo-Fr 09:00-17:00">


Также важно использовать правильный формат для атрибута контента, который можно найти в документации Schema.org для спецификации часов работы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы