Según el W3C, el atributo ID en HTML es un identificador único para el elemento.
Esta es una descripción muy simple de un atributo muy poderoso. El atributo ID puede realizar varias acciones para 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, puede estar seguro de que sólo tendrá que cambiar el estilo de un elemento de su página Web cuando realice el cambio de estilo utilizando una propiedad ID. La desventaja de usar un ID para propósitos de estilo es que tiene un nivel muy alto de especificidad, lo que puede hacer que sea muy difícil si necesita anular un estilo por alguna razón más adelante en una hoja de estilo. Debido a esto, las prácticas actuales de la Web se inclinan hacia el uso de clases y selectores de clase en lugar de IDs y selectores de IDs para propósitos generales de estilismo.
- Anclas con nombre para enlazar a : Los navegadores Web le permiten apuntar a ubicaciones precisas en sus documentos Web apuntando al ID al final de la URL. Simplemente añada el id al final de la URL de la página, precedido por un signo de numeral (#). También puede enlazar a estos anclajes con la propia página añadiendo el signo de numeral (#) y el nombre de ID en el atributo href para el elemento. Por ejemplo, si tiene una división con un ID de contacto, puede enlazarla en esa página con #contact.
- Una referencia para scripts : Si escribe alguna función Javascript, querrá usar el atributo ID para poder hacer cambios en el elemento preciso de la página con sus scripts.
- Otro procesamiento : El id le permite procesar sus documentos Web de la forma que necesite. Por ejemplo, puede extraer el HTML en una base de datos y el atributo ID identifica los campos.
Reglas para usar el atributo ID
Hay algunas reglas que debe seguir para tener un documento válido que utilice el atributo id en cualquier parte del documento:
- El ID 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 ID debe ser único dentro del documento. Por qué?
Uso del atributo ID
Una vez que haya identificado un elemento único de su sitio Web, puede utilizar hojas de estilo para darle estilo a ese único elemento.
Contáctenos
Hay algo de contenido de texto aquí
div#contact-section { background: #0cf;}
-o sólo-
#contact-section { background: #0cf;}
Cualquiera de esos dos selectores funcionaría. La primera (div#contact-section) tendría como objetivo una división con un atributo ID de «sección de contacto». La segunda (#contact-section) seguiría apuntando al elemento con un ID de «contact-section», sólo que no sabría que lo que está buscando es una división. El resultado final del estilo sería exactamente el mismo.
También puede enlazar a ese elemento específico sin añadir ninguna etiqueta.
Haga referencia a ese párrafo en sus scripts con el método JavaScript «getElementById»:
document.getElementById(«sección de contacto»)
Los atributos ID siguen siendo muy útiles en HTML, a pesar de que los selectores de clase los han reemplazado para la mayoría de los propósitos generales de estilismo. La capacidad de usar el atributo ID como un gancho para los estilos, al mismo tiempo que se utilizan como anclajes para los enlaces o como destino para los scripts, significa que todavía ocupan un lugar importante en el diseño web hoy en día.
