13.2 Atributos id y class: propósito y uso correcto
En HTML, los atributos id y class sirven para identificar y agrupar elementos, facilitando estilos, manipulación con JavaScript y navegación interna. Aunque a primera vista parecen similares, cada uno tiene un propósito y unas reglas de uso muy definidas.
Propósito del atributo id
-
Identificador único: Un elemento con un mismo
iddebe existir una sola vez en todo el documento. - Anclas internas: Permite crear vínculos internos () y mejorar la usabilidad y accesibilidad.
-
Selección directa en JavaScript:
document.getElementById('mi-id')devuelve el elemento de forma inmediata. -
Alta especificidad en CSS: Los selectores con
#mi-idtienen mayor peso frente a las clases.
Propósito del atributo class
- Agrupación y reutilización: Permite asignar la misma clase a múltiples elementos.
- Múltiples clases por elemento: Se pueden encadenar varias clases separadas por espacios.
-
Flexibilidad en estilos y scripts:
document.getElementsByClassName('mi-clase')oquerySelectorAll('.mi-clase'). -
Facilita metodologías de naming como BEM (
bloque__elemento--modificador).
Diferencias y comparativa
| Atributo | Unicidad | Multiplicidad | Especificidad CSS | Selección JS |
|---|---|---|---|---|
id |
Único en todo el documento | Solo uno | Alta (#mi-id) |
getElementById() |
class |
Puede repetirse | Muchos | Media (.mi-clase) |
getElementsByClassName() / querySelectorAll() |
Buenas prácticas
- Usar
idsolo cuando realmente necesites unicidad o anclaje. - Asignar nombres significativos y en minúsculas, separando palabras con guiones (
mi-seccion). - Para estilos y scripts compartidos, emplear
classen lugar de generar docenas deid. - No duplicar
iden el mismo documento: rompe la validez y confunde selectores JS/CSS. - Seguir metodologías de nombrado (BEM, SMACSS) si el proyecto crece en complejidad.
Ejemplos prácticos
1. Uso de id para navegación interna
Creamos un ancla dentro de la misma página:
Introducción
Bienvenido al curso de HTML. Aquí se explica el propósito de id y class.
2. Uso de class para estilos agrupados
Asignamos una misma clase a varios elementos para compartir estilos:
- Primer elemento destacado
- Segundo elemento destacado
- Elemento sin destaque
3. Combinación de id y class
Un modal con un id para controlarlo y varias clases para gestionar su estado y diseño:
Contacto
4. Error común: IDs duplicados
No repetir un mismo id en distintos elementos. Esto provoca:
- Errores de validación.
- Selección impredecible en JavaScript.
- Especificidad CSS alterada.
...
En su lugar, se usarían clases o IDs distintos:
...
Conclusión
Los atributos id y class son fundamentales para estructurar, estilizar y manipular el DOM con JavaScript. Su uso correcto mejora la mantenibilidad, accesibilidad y claridad del código. Sigue las recomendaciones de unicidad, convención de nombres y metodologías de naming para obtener proyectos escalables y bien organizados.
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.