El atributo id en HTML sirve para poder identificar de manera única elementos específicos en un documento HTML. Esto permite que puedan ser manipulados mediante CSS o JavaScript.

Compra y registra tu dominio ideal
  • Certificado SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una configuración DNS simplificada gratis

¿Qué es el HTML ID?

El ID en HTML es un atributo HTML que se utiliza para la identificación única de un elemento HTML. Un ID debe ser único en todo el documento HTML; un documento HTML en el que dos elementos comparten un ID no es sintácticamente correcto. El atributo id se usa frecuentemente en combinación con CSS o JavaScript para aplicar estilos específicos o realizar acciones concretas en un elemento determinado.

Nota

Si deseas aprender HTML, nuestro tutorial para principiantes de HTML te puede ayudar.

¿Para qué se necesita un ID en HTML?

El ID en HTML puede ser muy útil. Se utiliza siempre que una acción deba aplicarse a un solo elemento. Casos importantes para el uso del atributo id incluyen:

  • Diseño de la página web con CSS: con un ID, puedes aplicar reglas de CSS a un solo elemento HTML. Esto es útil cuando deseas resaltar un elemento específico.
  • Interacción con JavaScript: en JavaScript, se pueden usar los ID para acceder a elementos HTML específicos y cambiar sus propiedades o contenido. Esto es una parte fundamental del desarrollo web dinámico.
  • Hipervínculos y anclas: los ID se pueden usar para crear puntos de anclaje dentro de una página, permitiendo saltar directamente a una sección específica de la página al hacer clic en un enlace con el ID correspondiente.
Consejo

Con el atributo id, se le puede asignar una ID a cualquier elemento HTML.

Sintaxis del ID en HTML

Para definir un ID en HTML, debes añadir el atributo id al elemento correspondiente y especificar el nombre de ID deseado. Observa el siguiente ejemplo de código:

<p id="Testid">A este párrafo se le ha asignado la ID “Testid”.</p>
HTML

Mediante el atributo id, se ha asignado la ID “Testid” al párrafo HTML. La utilidad de los ID en HTML se puede ilustrar con este ejemplo más detallado:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        #header { 
            background-color: blue; 
            padding: 20px; 
            text-align: center; 
        } 
    </style> 
</head> 
 
<body> 
<h1 id="header">Un ejemplo de ID en HTML</h1> 
<p>El header es un ejemplo de uso de ID en HTML.</p> 
</body> 
</html>
HTML

A la cabecera HTML se le asigna la ID “header”. Como CSS está incrustado en el código HTML, las reglas de CSS correspondientes para la ID “header” se aplican a la cabecera.

Diferencias entre ID y clase en HTML

Tanto el atributo id como el atributo class se utilizan para identificar y estilizar elementos HTML, pero tienen diferentes características y usos.

  • Unicidad: un ID debe ser único dentro del documento, mientras que una clase HTML se puede aplicar a varios elementos, permitiendo que un grupo de elementos se manipule simultáneamente.
  • Especificidad: los ID tienen una mayor especificidad que las clases. El ID en HTML tiene prioridad cuando se aplican tanto el ID como una clase al mismo elemento HTML. En caso de estilos contradictorios, la clase puede ser sobrescrita por el ID.
  • Referencia en CSS: para referenciar ID en CSS, se debe usar el símbolo de almohadilla (#). Para referenciar clases, necesitas usar el punto (.).
¿Le ha resultado útil este artículo?
Ir al menú principal