Atributos data en HTML

Datos propios en un elemento, legibles desde CSS y desde scripts.

<ul id="steps">
  <li data-step-index="0" data-stars="3" data-lang="python">
    Variables
  </li>
  <li data-step-index="1" data-stars="1" data-lang="python">
    Strings
  </li>
  <li data-step-index="2" data-stars="0" data-locked="true">
    Flow control
  </li>
</ul>

Cómo funciona

1. Cualquier atributo que empiece con data- es válido y tuyo.
2. Los scripts los leen vía dataset, con guiones vueltos camelCase.
3. CSS puede seleccionarlos, que es como funcionan los hooks de temas.

El intento, en números

Líneas

11

Caracteres a escribir

247

Tokens

61

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 49 segundos.

Escribe este fragmento

Paso 2 de 2 en Contenido que se lee bien; paso 14 de 15 en HTML accesible.

← Anterior Siguiente →