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`.

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.

1 Por qué importan los atributos globales 2 id vs class sin confusiones 3 Uso sensato de title y hidden 4 data-* en proyectos reales

🧪 Aprende probando

Ejemplo Ejemplo guiado: bloque de curso reutilizable Mira cómo combinar `id`, `class` y `data-*` en un componente simple y mantenible.

⌄

🏁 Retos

Reto Reto: corrige id y class Haz que el código respete unicidad de id y reutilización con class.

⌄

🧰 Recursos

Enlaces útiles

MDN - Atributos globales web.dev - Learn HTML (attributes) MDN - data-*

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 07

Historia y estructura básica del documento HTML

Lección 09

Semántica HTML: estructura con header, main, section

›