Atributo id HTML

Definición y uso

id La propiedad especifica un id único para un elemento HTML. (Este valor debe ser único en el documento HTML).

id La propiedad se utiliza con mayor frecuencia para apuntar a estilos en hojas de estilo y para operar con elementos que tienen un id específico utilizando JavaScript (a través de HTML DOM).

id La propiedad también se puede usar como ancla de enlace (link anchor).

Véase también:

Tutorial de HTML:HTML id

Tutorial de HTML:Atributos HTML

Tutorial de CSS:Sintaxis CSS

Manual de referencia de CSS:CSS #id Selector

Manual de referencia de HTML DOM:Método getElementById() de HTML DOM

Manual de referencia de HTML DOM:Propiedad id de HTML DOM

Manual de referencia de HTML DOM:Objeto Style del DOM HTML

Ejemplo

Ejemplo 1

Usar la propiedad id para cambiar un texto mediante JavaScript:

<html>
<body>
<h1 id="myHeader">¡Hola Mundo!</h1>
<button onclick="displayResult()">Cambiar texto</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "¡Que tengas un buen día!";
}
</script>
</body>
</html>

Prueba personalmente

Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

<elemento id="id">

Valor de atributo

Valor Descripción
id

Asignar un id único al elemento. Reglas de nombramiento:

  • Debe contener al menos un carácter
  • No puede contener caracteres de espacio en blanco

Más ejemplos

Ejemplo 2

Usar la propiedad id para enlazar a un elemento con un id específico en la página:

<html>
<body>
<h2><a id="top">Un título</a></h2>
<p>Muchos, muchos textos ....</p>
<p>Muchos, muchos textos ....</p>
<p>Muchos, muchos textos ....</p>
<a href="#top">Volver al inicio</a>
</body>
</html>

Prueba personalmente

Ejemplo 3

Usar el atributo id para estilizar texto con CSS:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com es el mejor!</h1>
</body>
</html>

Prueba personalmente

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte