El atributo id en HTML sirve para poder ide­n­ti­fi­car de manera única elementos es­pe­cí­fi­cos en un documento HTML. Esto permite que puedan ser ma­ni­pu­la­dos mediante CSS o Ja­va­S­cri­pt.

Compra y registra tu dominio ideal
  • Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis

¿Qué es el HTML ID?

El ID en HTML es un atributo HTML que se utiliza para la ide­n­ti­fi­ca­ció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 si­n­tá­c­ti­ca­me­n­te correcto. El atributo id se usa fre­cue­n­te­me­n­te en co­m­bi­na­ción con CSS o Ja­va­S­cri­pt para aplicar estilos es­pe­cí­fi­cos o realizar acciones concretas en un elemento de­te­r­mi­na­do.

Nota

Si deseas aprender HTML, nuestro tutorial para pri­n­ci­pia­n­tes 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 im­po­r­ta­n­tes 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 es­pe­cí­fi­co.
  • In­ter­ac­ción con Ja­va­S­cri­pt: en Ja­va­S­cri­pt, se pueden usar los ID para acceder a elementos HTML es­pe­cí­fi­cos y cambiar sus pro­pie­da­des o contenido. Esto es una parte fu­n­da­me­n­tal del de­sa­rro­llo web dinámico.
  • Hi­pe­r­ví­ncu­los y anclas: los ID se pueden usar para crear puntos de anclaje dentro de una página, pe­r­mi­tie­n­do saltar di­re­c­ta­me­n­te a una sección es­pe­cí­fi­ca de la página al hacer clic en un enlace con el ID co­rre­s­po­n­die­n­te.
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 co­rre­s­po­n­die­n­te y es­pe­ci­fi­car 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á in­cru­s­ta­do en el código HTML, las reglas de CSS co­rre­s­po­n­die­n­tes para la ID “header” se aplican a la cabecera.

Di­fe­re­n­cias entre ID y clase en HTML

Tanto el atributo id como el atributo class se utilizan para ide­n­ti­fi­car y estilizar elementos HTML, pero tienen di­fe­re­n­tes ca­ra­c­te­rí­s­ti­cas y usos.

  • Unicidad: un ID debe ser único dentro del documento, mientras que una clase HTML se puede aplicar a varios elementos, pe­r­mi­tie­n­do que un grupo de elementos se manipule si­mu­l­tá­nea­me­n­te.
  • Es­pe­ci­fi­ci­dad: los ID tienen una mayor es­pe­ci­fi­ci­dad 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 co­n­tra­di­c­to­rios, la clase puede ser so­bre­s­cri­ta por el ID.
  • Re­fe­re­n­cia en CSS: para re­fe­re­n­ciar ID en CSS, se debe usar el símbolo de al­moha­di­lla (#). Para re­fe­re­n­ciar clases, necesitas usar el punto (.).
Ir al menú principal