¿Qué es un 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 #precio aplica 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 #precio desplaza 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.