HTML-тег <data>

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

Тег <data> состоит из двух частей:

  • Человекочитаемый контент, отображаемый на странице.
  • Машиночитаемое содержимое, указанное в атрибуте value .

Этот тег полезен в таких приложениях, как поисковая оптимизация(SEO), анализ данных или при работе с JavaScript для извлечения или обработки структурированных данных.

Базовый синтаксис тега <data>

Тег <data> записывается как: 

<data value="machine-readable-data">Human-readable content</data>

Атрибуты HTML-тега <data>

  • значение: обязательный атрибут, содержащий машиночитаемое содержимое, связанное с текстом, понятным человеку.

Базовый пример HTML-тега <data>

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <p>The price of the product is <data value="1000">$1,000</data>.</p>
    </body>
</html>

Пояснение: В этом примере понятный человеку текст $1,000 связан с машиночитаемыми данными 1000 . Программа или скрипт могут извлечь числовое значение для дальнейшей обработки.

Когда следует использовать тег <data>?

  • Ассоциация метаданных: когда вы хотите связать определенные метаданные с видимым контентом, например идентификаторы продуктов, даты или справочные номера.
  • SEO и доступность: поисковые системы и вспомогательные технологии могут лучше интерпретировать контент, если предоставлены машиночитаемые данные.
  • Приложения JavaScript: для хранения и обработки структурированных данных для динамической генерации контента или вычислений.

Расширенные примеры HTML-тега <data>

1. Пример с идентификаторами продуктов

Тег <data> может связать название продукта с уникальным идентификатором: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Product Example</h2>
        <p>Product: <data value="SKU12345">Wireless Mouse</data></p>
    </body>
</html>

Пояснение: понятное человеку название продукта Wireless Mouse связано с машиночитаемым SKU SKU12345 , которое можно использовать для отслеживания или поиска в базе данных.

2. Использование JavaScript для извлечения данных

Вы можете использовать JavaScript для извлечения машиночитаемых данных из тега <data> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>JavaScript Example</h2>
        <p>The discount is <data id="discount" value="10">10%</data></p>

        <script>
            const discountData = document.getElementById('discount');
            console.log('Machine-readable value:', discountData.value);
        </script>
    </body>
</html>

Пояснение: В этом примере JavaScript извлекает значение 10 из тега <data> и выводит его в консоль. Это полезно для динамических вычислений или взаимодействия с API.

3. Отображение дат в машиночитаемых форматах

Тег <data> можно использовать для предоставления форматов даты ISO 8601 наряду с датами, удобными для чтения человеком: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Date Example</h2>
        <p>Event Date: <data value="2024-12-31">December 31, 2024</data></p>
    </body>
</html>

Пояснение: Машиночитаемая дата 2024-12-31 (формат ISO 8601) сочетается с человекочитаемой датой December 31, 2024 , что улучшает совместимость со скриптами и системами, обрабатывающими даты.

Стилизация тега <data>

Как и другие встроенные элементы, тег <data> можно стилизовать с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            data {
                font-weight: bold;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Styled Data Tag</h2>
        <p>The temperature is <data value="25">25°C</data>.</p>
    </body>
</html>

Результат: текст внутри тега <data> отображается жирным шрифтом и синим цветом, что подчеркивает его значимость.

Заметки о теге <data>

  • Убедитесь, что атрибут value всегда содержит допустимое машиночитаемое содержимое, поскольку его основное предназначение — программное использование.
  • Тег <data> по умолчанию является встроенным элементом, поэтому с точки зрения макета он ведет себя как <span> .
  • Несмотря на свою полезность, тег <data> используется не так часто, как другие семантические теги, поэтому его применение может быть узкоспециализированным в зависимости от проекта.