¿Qué es un ID?
En HTML, un ID es un atributo que asigna un nombre único a un elemento de la página. Ese nombre permite aplicarle estilos con CSS, localizarlo y controlarlo con JavaScript, y enlazar directamente a él. Cada ID debe aparecer una sola vez por página para identificar un único elemento.
Más sobre los ID
Un ID se añade dentro de la etiqueta de apertura de un elemento, por ejemplo, <section id="precio">. Cualquier elemento de HTML puede tener uno.
¿Para qué se usa un ID?
Ese único nombre sirve en tres lugares:
- Para aplicar estilos con CSS. El selector
#precioaplica reglas a ese elemento. - Para controlarlo con JavaScript. Un código como
document.getElementById("precio")encuentra el elemento para que un script pueda leerlo o modificarlo. - Para saltar mediante enlaces. Una URL que termina en
#preciodesplaza la página directamente hasta ese elemento. Así funcionan los enlaces de una tabla de contenido.
ID o clase: ¿cuál es la diferencia?
Un ID identifica un elemento; una clase etiqueta un grupo. Usa un ID para algo que aparece una sola vez por página, como un encabezado o un formulario de registro. Usa una clase para elementos repetidos, como botones o tarjetas, de modo que una regla les dé estilo a todos. Un elemento puede tener ambos. En CSS, #nombre selecciona un ID y .nombre selecciona una clase. Si las reglas entran en conflicto, el selector de ID tiene mayor especificidad.
Reglas para crear buenos ID
Tres reglas mantienen los ID fiables. Usa cada ID una sola vez por página. Evita los espacios, porque un ID con espacios no es válido en HTML y complica el selector #nombre de CSS; usa guiones, como en id="tabla-precio". Además, distingue entre mayúsculas y minúsculas: #Precio y #precio son nombres distintos para CSS y JavaScript. Elige nombres cortos, en minúsculas y suficientemente descriptivos para reconocerlos más adelante.
Preguntas Frecuentes
- La mayoría de los desarrolladores aplica estilos con clases y reserva los ID para JavaScript y destinos de enlaces. Como un selector de ID tiene mayor especificidad que uno de clase, basar los estilos en ID puede dificultar cambios posteriores.
- La página puede mostrarse, pero el HTML no es válido y aparecen fallos:
document.getElementByIddevuelve solo la primera coincidencia, los enlaces saltan a la primera aparición y las etiquetas de formulario pueden asociarse al campo equivocado. - Añade un ID al elemento de destino y agrega
#seguido de ese ID al enlace. En la misma página basta conhref="#precio". Desde otra página, usa la URL completa, por ejemplo,ejemplo.com/planes#precio. - No de forma directa: el nombre del ID no es una señal de posicionamiento. Sin embargo, los ID permiten enlaces a secciones y Google puede mostrar accesos del tipo «saltar a» en páginas largas, sobre todo cuando una tabla de contenido enlaza a esas secciones.
Diseño Web Personalizado
Obtén un sitio web único y compatible con dispositivos móviles que haga brillar tu marca. Comparte tu visión con nosotros y nos encargaremos del resto.
Diseño Web Personalizado