Tag HTML <data>

A tag <data> é um elemento HTML que vincula um trecho de conteúdo visível a uma versão legível por máquina do mesmo valor. O texto amigável ao usuário permanece dentro do elemento, enquanto a forma precisa e compatível com scripts é armazenada no atributo value.

Isso é útil quando seus scripts precisam de dados em um formato específico que você não deseja exibir ao usuário. Por exemplo, imagine uma lista de produtos. Cada produto tem um ID interno, mas você quer que os clientes vejam apenas o nome do produto. Você coloca o ID no atributo value e o nome legível entre as tags, para que JavaScript possa ler o ID enquanto o usuário lê o nome:

<data value="1545325112">Coca-Cola 500ml</data>

Aqui 1545325112 é o valor legível por máquina (o ID do produto) e Coca-Cola 500ml é o que o usuário vê.

Quando usar <data>

<data> é uma das várias formas de anexar dados legíveis por máquina ao conteúdo. Escolher a opção certa é importante:

• Use <data> quando houver um trecho de texto visível que tenha um equivalente natural legível por máquina — um ID de produto, número de pedido, SKU, valor de enum ou uma avaliação expressa como número. O elemento é um verdadeiro elemento HTML, portanto a relação entre texto e valor faz parte da semântica do documento.
• Use um atributo personalizado data-* (por exemplo, data-product-id="1545325112") quando o valor pertence a qualquer elemento e você simplesmente precisa de um lugar para que seus scripts possam lê-lo. data-* é mais flexível porque pode ser colocado em qualquer tag e usar qualquer nome de atributo, mas não carrega um significado padronizado.
• Use microdata (itemprop) ou JSON-LD quando o objetivo é expor dados estruturados a mecanismos de busca (schema.org). <data> por si só não informa ao Google o que o valor significa.

Um padrão comum é combinar <data> com microdata, usando itemprop para nomear a propriedade e value para carregar o número preciso:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> vs <time>

O elemento <time> é um irmão especializado de <data>. A fronteira semântica é simples:

• Use <time> apenas para datas, horas, durações e fusos horários (ele tem seu próprio atributo datetime e um formato de análise definido).
• Use <data> para qualquer outro tipo de valor legível por máquina — IDs, preços, quantidades, códigos e assim por diante.

Portanto, <time datetime="2026-06-17">June 17</time> está correto, mas você nunca envolveria um ID de produto em <time>.

Lendo o valor com JavaScript

<data> é representado pela interface HTMLDataElement, cuja propriedade value reflete o atributo value. Assim, você pode lê-lo diretamente:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

Tanto el.value quanto el.getAttribute("value") retornam a string legível por máquina; textContent fornece o rótulo legível por humanos.

Acessibilidade

Tecnologias assistivas, como leitores de tela, anunciam o conteúdo de texto visível, não o atributo value. Um usuário de leitor de tela ouve "Coca-Cola 500ml", nunca "1545325112".

Por isso, o texto visível deve ser sempre significativo por conta própria. Nunca oculte dentro de value informações que o usuário precisa esperando que os leitores de tela as apresentem. Trate value estritamente como dados para scripts, e mantenha todo o significado voltado ao usuário no texto do elemento.

Suporte a navegadores e SEO

Todos os navegadores modernos interpretam <data>, mas não há nenhuma renderização visual ou comportamental especial — ele é exibido exatamente como um <span>. Seu propósito é puramente semântico.

Pelo mesmo motivo, <data> não é um substituto para dados estruturados. Os mecanismos de busca não interpretam um atributo value isolado como dados schema.org. Se você precisa de resultados enriquecidos, use microdata adequado (itemprop) ou, mais comumente hoje em dia, JSON-LD.

Sintaxe

A tag <data> vem em pares. O conteúdo é escrito entre as tags de abertura (<data>) e fechamento (</data>).

Exemplo da tag HTML <data>:

Tag HTML <data>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Atributos

A tag <data> também suporta os Atributos Globais e os Atributos de Evento.

Prática