Atributo id HTML

HTML id La propiedad se utiliza para especificar un id único para el elemento HTML.

En un documento HTML no pueden existir varios elementos con el mismo id.

Uso de la propiedad id

id La propiedad especifica el ID único del elemento HTML. id El valor de la propiedad debe ser único en el documento HTML.

id La propiedad se utiliza para apuntar a declaraciones de estilo específicas en la hoja de estilo. JavaScript también puede usarla para acceder y operar con elementos que tienen un ID específico.

La sintaxis de id es: escribir un signo de número (#) seguido de un nombre de id. Luego, definir las propiedades CSS entre corchetes {}.

}} <h1> que apunta al nombre de id "myHeader". En el siguiente ejemplo tenemos <h1> Los elementos se basarán en el elemento #myHeader Las definiciones de estilo se utilizan para establecer estilos:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Mi Encabezado</h1>
</body>
</html>

Pruebe usted mismo

Nota:El nombre del id es sensible a mayúsculas y minúsculas!

Nota:El id debe contener al menos un carácter y no puede contener caracteres de espacio (espacios, tabuladores, etc.).

Diferencias entre Clase y ID

Un mismo nombre de clase puede ser utilizado por varios elementos HTML, mientras que un nombre de id solo puede ser utilizado por un elemento HTML en la página:

Ejemplo

<style>
/* Estilos para el elemento con el id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Estilos para todos los elementos con la clase "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementos con un id único -->
<h1 id="myHeader">Mis Ciudades</h1>
<!-- Elementos con el mismo nombre de clase -->
<h2 class="city">Londres</h2>
<p> Londres es la capital de Inglaterra.</p>
<h2 class="city">París</h2>
<p>París es la capital de Francia.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo es la capital de Japón.</p>

Pruebe usted mismo

Consejo:Por favor, en nuestro Tutoriales de CSS para aprender más sobre CSS.

Implementación de marcadores HTML mediante ID y enlace

Los marcadores HTML se utilizan para permitir que los lectores salten a partes específicas de la página web.

Si la página es larga, los marcadores pueden ser muy útiles.

Para usar el marcador, debe crearlo primero y luego agregarle un enlace.

Luego, cuando se hace clic en el enlace, la página se desplazará a la posición con el marcador.

Ejemplo

Primero, use id Propiedad para crear marcadores:

<h2 id="C4">Capítulo 4</h2>

Luego, en la misma página, agregar un enlace a este marcador ("Saltar al capítulo 4"):

Ejemplo

<a href="#C4">Saltar al capítulo 4</a>

Pruebe usted mismo

O, en otra página, agregar un enlace a este marcador ("Saltar al capítulo 4"):

<a href="html_demo.html#C4">Saltar al capítulo 4</a>

Usar la propiedad id en JavaScript

JavaScript también puede usar la propiedad id para ejecutar ciertas tareas en elementos específicos.

JavaScript puede usar getElementById() Método para acceder a elementos con un id específico:

Ejemplo

Usar la propiedad id para manejar texto con JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "¡Que tengas un buen día!";
}
</script>

Pruebe usted mismo

Consejo:Por favor, en JavaScript HTML En este capítulo, o en nuestro Tutoriales de JavaScript Aprender JavaScript aquí.

Resumen de este capítulo

  • id Propiedad para especificar un id único para elementos HTML
  • id El valor de la propiedad debe ser único en el documento HTML
  • CSS y JavaScript pueden usar id Propiedad para seleccionar elementos o establecer estilos específicos para elementos
  • id El valor de la propiedad distingue entre mayúsculas y minúsculas
  • id Las propiedades también se pueden usar para crear marcadores HTML
  • JavaScript puede usar getElementById() Método para acceder a elementos con un id específico