El atributo id

El atributo HTML id se usa para especificar una identificación única para un elemento HTML. No puedes tener más de un elemento con el mismo id en un documento HTML.

Usando el atributo id

El atributo id especifica una identificación única para un elemento HTML. El valor del atributo id debe ser único dentro del documento HTML.

El atributo id se usa para señalar una declaración de estilo específica en una hoja de estilo. También es utilizado por JavaScript para acceder y manipular el elemento con la identificación específica.

La sintaxis para id en CSS es: escribir un carácter de hash (#), seguido de un nombre de id. Luego, defines las propiedades CSS entre llaves {}.

En el siguiente ejemplo tenemos un elemento <h1> que apunta al nombre de identificación “myHeader”. Este elemento <h1> se diseñará de acuerdo con la definición de estilo #myHeader en la sección de encabezado.

Ejm

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

<h1 id="myHeader">My Header</h1>

</body>
</html>

Nota: ¡El nombre de id distingue entre mayúsculas y minúsculas!

Nota: El id debe contener al menos un carácter y no debe contener espacios en blanco (espacios, tabulaciones, etc.).

Diferencias entre id y class

Varios elementos HTML pueden usar un nombre de class, mientras que un nombre de id solo debe ser usado por un elemento HTML dentro de la página.

Ejm

style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Marcadores HTML con ID y enlaces

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

Los marcadores pueden ser útiles si tu página es muy larga.

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

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

Ejm

Primero, crea un marcador con el atributo id.

Ejm

<h2 id="C4">Chapter 4</h2>

Luego, agrega un enlace al marcador (“Saltar al Capítulo 4”), desde la misma página.

Ejm

<a href="#C4">Jump to Chapter 4</a>

O bien, agrega un enlace al marcador (“Saltar al Capítulo 4”), desde otra página.

Ejm

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Usando el atributo id en Javascript

El atributo id puede también ser usado en Javascript para realizar algunas tareas para un elemento específico.

Javascript puede acceder a un elemento con un id específico mediante el método getElementById().

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Resumen

  • El atributo id es usado para especificar un único id para un elemento HTML.
  • El valor del atributo id debe ser único dentro del documento HTML.
  • El atributo id es utilizado por CSS y Javascript para dar estilo a un determinado elemento.
  • El valor del atributo id es case sensitive.
  • El atributo id es también usado para crear marcadores HTML.
  • Javascript puede acceder a un elemento con un id específico mediante el método getElementById().