De acuerdo con la W3C, el atributo ID en HTML es un identificador único para el elemento. Proporciona una forma de identificar un área de una página web para estilos CSS, enlaces de anclaje y destinos para scripts.
¿Para qué se utiliza el atributo ID?
El atributo ID realiza varias acciones para las páginas web:
- Un selector de hojas de estilo: Esta es la función para la que la mayoría de la gente usa el atributo ID. Debido a que son únicos, aplicará estilo a un solo elemento en su página web cuando diseñe usando una propiedad de ID. La desventaja de usar una identificación para fines de estilo es que tiene un nivel muy alto de especificidad, lo que puede hacer que sea muy desafiante si necesita anular un estilo por alguna razón más adelante en un hoja de estilo. Debido a esto, las prácticas web actuales se inclinan hacia el uso de clases y selectores de clases en lugar de ID y selectores de ID para fines generales de estilo.
- Anclajes con nombre para enlazar a: navegadores web Apunte a ubicaciones precisas en sus documentos web apuntando al ID al final de la URL. Agregue la identificación al final de la URL de la página, precedida por una marca de almohadilla. Enlace a estos anclajes con la página en sí agregando la etiqueta hash y el nombre de ID en el href atributo para el elemento. Por ejemplo, para una división con un ID de contacto, vincularlo en esa página con #contacto.
- Una referencia para guiones: Si escribe alguna función de Javascript, use el atributo ID para que pueda realizar cambios en el elemento preciso en la página con sus scripts.
- Otro procesamiento: La identificación admite el procesamiento dentro de sus documentos web de la forma que necesite. Por ejemplo, puede extraer el HTML en una base de datos y usar el atributo ID para identificar campos.
Reglas para usar el atributo ID
Asegúrese de que sus atributos de identificación se ajusten a estos tres estándares:
- La identificación debe comenzar con una letra (a-z o A-Z).
- Todos los caracteres siguientes pueden ser letras, números (0-9), guiones (-), guiones bajos (_), dos puntos (:) y puntos (.).
- Cada identificación debe ser única dentro del documento.
Usando el atributo de ID
Después de identificar un elemento único de su sitio web, utilice hojas de estilo para diseñar solo ese elemento.
Por ejemplo, para identificar una identificación titulada contacto, utilice cualquiera de estos formularios:
div # contact {background: # 0cf;}
#contact {background: # 0cf;}
La primera muestra se dirige a una división con un atributo de ID de contacto. El segundo todavía apunta al elemento con un ID de contacto, simplemente no estipularía que es una división. El resultado final del estilo sería exactamente el mismo.
También puede vincular a ese elemento específico sin agregar etiquetas.
Haga referencia a ese párrafo en sus guiones con el getElementById Método JavaScript:
document.getElementById ("sección de contacto")
Los atributos de ID siguen siendo muy útiles en HTML, aunque selectores de clases los han reemplazado para la mayoría de los propósitos generales de estilo. El uso del atributo ID como un gancho para los estilos, al mismo tiempo que los usa como anclajes para enlaces u objetivos para scripts, significa que todavía tienen un lugar importante en el diseño web de hoy.