Использование тега <time> для семантического HTML

Введение

В этом лабораторном занятии вы познакомитесь с семантическим тегом HTML5 <time> и узнаете, как эффективно использовать его для представления дат и времени в веб-документах. Лабораторная работа сосредоточена на понимании ключевых характеристик тега <time>, таких как предоставление машинно-читаемых временных данных при сохранении текста, удобного для чтения человеком, а также демонстрации его применения в различных HTML-контекстах.

С использованием пошагового подхода вы создадите HTML-файл, добавите теги <time> с атрибутами datetime и поймете, как этот семантический элемент повышает доступность веб-страниц и предоставляет структурированную информацию о датах и времени. К концу лабораторной работы у вас будет практический опыт использования тега <time> для улучшения семантического значения временных данных на веб-страницах.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") css/BasicStylingGroup -.-> css/text_styling("Text Styling") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills css/selectors -.-> lab-451085{{"Использование тега для семантического HTML"}} css/properties -.-> lab-451085{{"Использование тега для семантического HTML"}} html/lang_decl -.-> lab-451085{{"Использование тега для семантического HTML"}} css/text_styling -.-> lab-451085{{"Использование тега для семантического HTML"}} html/text_head -.-> lab-451085{{"Использование тега для семантического HTML"}} javascript/dom_select -.-> lab-451085{{"Использование тега для семантического HTML"}} javascript/dom_manip -.-> lab-451085{{"Использование тега для семантического HTML"}} javascript/dom_traverse -.-> lab-451085{{"Использование тега для семантического HTML"}} end

Основы тега

На этом этапе вы узнаете о теге HTML5 <time> — семантическом элементе, предназначенном для представления дат и времени в машинно-читаемом формате. Тег <time> помогает повысить доступность веб-страниц и предоставляет структурированную информацию о временных данных.

Ключевые характеристики тега <time> включают:

Представляет определенный период времени
Может содержать текст, удобный для чтения человеком
Поддерживает машинно-читаемый атрибут datetime
Улучшает семантическое значение информации о дате и времени на веб-страницах

Вот простой пример, иллюстрирующий использование тега <time>:

<p>The conference is scheduled for <time>2023-09-15</time>.</p>

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

Другой пример, показывающий различные способы использования тега <time>:

<article>
  <h2>Lab Publication</h2>
  <p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>

Атрибут datetime предоставляет стандартизированный машинно-читаемый формат даты, в то время как видимый текст остается удобным для пользователя.

Создание HTML-файла с использованием тега

На этом этапе вы создадите HTML-файл, демонстрирующий использование тега <time>. Вы будете использовать WebIDE для создания и редактирования HTML-документа в директории ~/project.

Сначала перейдите в директорию проекта и создайте новый HTML-файл с именем event-schedule.html:

cd ~/project

Откройте WebIDE и создайте новый файл с именем event-schedule.html. Затем добавьте следующее HTML-содержимое:

touch event-schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
    </article>
  </body>
</html>

Пример вывода при просмотре в веб-браузере:

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

В этом примере показано, как использовать тег <time> внутри абзаца для представления определенной даты. Тег добавляет семантическое значение дате, что упрощает для браузеров и вспомогательных технологий понимание временной информации.

Добавление атрибута datetime к тегу

На этом этапе вы узнаете, как улучшить использование тега <time> путем добавления атрибута datetime. Атрибут datetime предоставляет машинно-читаемый формат для дат и времени, делая контент более доступным и семантически значимым.

Откройте файл event-schedule.html в WebIDE и измените существующий тег <time>, добавив атрибут datetime:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>
        The annual tech conference will be held on
        <time datetime="2023-09-15">September 15, 2023</time>.
      </p>

      <h3>Session Timing</h3>
      <p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
    </article>
  </body>
</html>

Атрибут datetime имеет несколько преимуществ:

Предоставляет стандартизированный, машинно-читаемый формат даты и времени
Позволяет использовать отображаемый текст, отличный от фактического значения даты и времени
Поддерживает различные форматы, такие как полные даты, времена и комбинации даты и времени

Примеры форматов для атрибута datetime:

Полная дата: 2023-09-15
Время: 09:00
Дата и время: 2023-09-15T09:00
С указанием часового пояса: 2023-09-15T09:00Z

Пример вывода при просмотре в веб-браузере:

Upcoming Tech Conference

Conference Details
The annual tech conference will be held on September 15, 2023.

Session Timing
Morning keynote starts at 9:00 AM.

Исследование тега с атрибутом pubdate

На этом этапе вы узнаете о атрибуте pubdate, специальном булевом атрибуте для тега <time>, который указывает дату публикации статьи или блогового поста. Хотя сейчас он считается устаревшим в HTML5, понимание его исторического использования дает представление о семантическом HTML.

Откройте файл event-schedule.html в WebIDE и измените содержимое, добавив пример блогового поста с атрибутом pubdate:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Blog Post</title>
  </head>
  <body>
    <article>
      <h1>Latest Tech Insights</h1>
      <header>
        <h2>HTML5 Semantic Elements</h2>
        <p>
          Published on
          <time datetime="2023-06-20" pubdate>June 20, 2023</time>
        </p>
      </header>

      <p>In this article, we explore the semantic meaning of HTML5 tags...</p>

      <footer>
        <p>
          Updated on
          <time datetime="2023-06-22">June 22, 2023</time>
        </p>
      </footer>
    </article>
  </body>
</html>

Основные моменты о атрибуте pubdate:

Это булев атрибут (значение не требуется)
Указывает дату публикации статьи
Устарел в HTML5, но все еще поддерживается многими браузерами
Обычно используется внутри тегов <article>

Пример вывода при просмотре в веб-браузере:

Latest Tech Insights

HTML5 Semantic Elements
Published on June 20, 2023

In this article, we explore the semantic meaning of HTML5 tags...

Updated on June 22, 2023

Примечание: Хотя атрибут pubdate сейчас считается устаревшим, он демонстрирует эволюцию семантического HTML и важность предоставления машинно-читаемой информации о дате.

Проверка реализации тега

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

Откройте файл event-schedule.html в WebIDE и обновите его полным примером:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Event Showcase</title>
  </head>
  <body>
    <article>
      <h1>Web Development Conference</h1>

      <section>
        <h2>Event Details</h2>
        <p>
          Conference Date:
          <time datetime="2023-09-15">September 15, 2023</time>
        </p>
        <p>
          Start Time:
          <time datetime="09:00">9:00 AM</time>
        </p>
      </section>

      <section>
        <h2>Blog Post</h2>
        <article>
          <h3>HTML5 Semantic Elements</h3>
          <p>
            Published on
            <time datetime="2023-06-20" pubdate>June 20, 2023</time>
          </p>
          <p>
            Last Updated:
            <time datetime="2023-06-22">June 22, 2023</time>
          </p>
        </article>
      </section>
    </article>
  </body>
</html>

Основной список проверки реализации:

Несколько тегов <time> в разных контекстах
Использование атрибута datetime для машинно-читаемых дат
Включение текста даты, удобного для чтения человеком
Демонстрация использования атрибута pubdate
Семантическая структура HTML с использованием тегов <article> и <section>

Пример вывода при просмотре в веб-браузере:

Web Development Conference

Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM

Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023

Резюме

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

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