HTML

Atributos globales en HTML: id, class, title, hidden y data-*

Aprende a usar atributos globales con criterio profesional para estructurar mejor tu HTML, conectar CSS/JS y evitar anti-patrones.

¿Cuánto sabes de HTML?

📘 Teoría

Por qué importan los atributos globales

No son detalle técnico: son el pegamento entre HTML, CSS, JS y testing. 🔧

Cuando una base HTML escala, necesitas convenciones. Los atributos globales te ayudan a localizar elementos, aplicar estilos coherentes y vincular lógica sin convertir el marcado en un caos.

La clave es usar cada atributo para su propósito: si mezclas responsabilidades, acabas con código frágil y difícil de mantener.

id

Identificador único para anclas o referencias puntuales.

class

Agrupación reusable para estilos y comportamiento.

data-*

Metadatos de dominio (estado, tipo, variante, etc.).

id vs class sin confusiones

Regla práctica de profe: `id` para uno, `class` para muchos. ✅

`id` debe ser único dentro del documento. Es perfecto para enlaces internos (`#contacto`) o elementos singulares.

`class` se repite y es ideal para componentes: botones, cards, alerts, bloques de layout. En CSS moderno, class suele ser tu herramienta principal.

No reutilices un mismo id en dos nodos.
No uses id por defecto para estilado masivo.
Prefiere class con nombres claros: `card-curso`, `btn-secundario`.

Ejemplo correcto

<nav id="menu-principal" class="nav nav--sticky">
  <a class="nav-link" href="#temario">Temario</a>
  <a class="nav-link" href="#faq">FAQ</a>
</nav>

<section id="temario" class="bloque bloque--destacado">
  <h2>Temario del curso</h2>
</section>

Uso sensato de title y hidden

Útiles, pero con contexto. No son comodines. 🎯

`title` puede aportar ayuda contextual breve, pero no debe contener información crítica porque no todos los usuarios la perciben igual.

`hidden` oculta un elemento visual y semánticamente del flujo normal. Úsalo para estados de UI controlados, no como parche de diseño.

data-* en proyectos reales

Tu mejor aliado para pasar contexto al JS sin acoplarte a clases visuales.

Con `data-*` puedes indicar estado, tipo o categoría sin depender de texto visible ni de clases de estilo.

Esto mejora tests y evita que un cambio de diseño rompa lógica de interacción.

Usa nombres explícitos: `data-course-id`, `data-role`, `data-state`.
Evita guardar JSON gigante en atributos.
Mantén los datos cerca del elemento que los usa.

Patrón limpio con data-*

<article class="card-curso" data-course-id="html-01" data-level="basico" data-state="abierto">
  <h3>HTML desde cero</h3>
  <button type="button" data-action="inscribirse">Inscribirme</button>
</article>