MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

HTML Atributo de identificación


El atributo HTML id se utiliza 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 de identificación (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 utiliza para señalar una declaración de estilo específica en una hoja de estilo. JavaScript también lo utiliza para acceder y manipular el elemento con la identificación específica.

La sintaxis de id es: escriba un carácter almohadilla (#), seguido de un nombre de id. Luego, defina las propiedades CSS entre llaves {}.

En el siguiente ejemplo tenemos un elemento <h1> que apunta al nombre de identificación "myHeader". Este elemento <h1> tendrá un estilo de acuerdo con la definición de estilo #myHeader en la sección de encabezado:

Ejemplo

<!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>
Inténtalo tú mismo »

Nota: ¡El nombre de identificación distingue entre mayúsculas y minúsculas!

Nota: El nombre de identificación debe contener al menos un carácter, no puede comenzar con un número y no debe contener espacios en blanco (espacios, tabulaciones, etc.).


Diferencia entre clase e identificación

Un nombre de clase puede ser usado por múltiples elementos HTML, mientras que un nombre de identificación solo debe ser usado por un elemento HTML dentro de la página:

Ejemplo

<style>
/* Dale estilo al elemento con la identificación "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Diseñe todos los elementos con el nombre de la clase "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Un elemento con una identificación única -->
<h1 id="myHeader">My Cities</h1>

<!-- Múltiples elementos con la misma clase -->
<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>
Inténtalo tú mismo »

Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS.


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 resultar útiles si su página es muy larga.

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

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

Ejemplo

Primero, cree un marcador con el atributo id:

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

Luego, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde la misma página:

Ejemplo

<a href="#C4">Saltar al Capítulo 4</a>
Inténtalo tú mismo »

O agregue un enlace al marcador ("Saltar al Capítulo 4"), desde otra página:

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

Usando el atributo id en JavaScript

JavaScript también puede utilizar el atributo id para realizar algunas tareas para ese elemento específico.

JavaScript puede acceder a un elemento con una identificación específica con el método getElementById():

Ejemplo

Utilice el atributo id para manipular texto con JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Inténtalo tú mismo »

Consejo: Estudie JavaScript en el capítulo HTML JavaScript o en nuestro Tutorial de JavaScript..


Resumen del capítulo

  • El atributo id se utiliza para especificar una identificación única para un elemento HTML
  • El valor del atributo id debe ser único dentro del documento HTML
  • CSS y JavaScript utilizan el atributo id para diseñar/seleccionar un elemento específico
  • El valor del atributo id distingue entre mayúsculas y minúsculas
  • El atributo id también se utiliza para crear marcadores HTML
  • JavaScript puede acceder a un elemento con una identificación específica con el método getElementById()

HTML Ejercicios

Ponte a prueba con ejercicios

Ejercicio:

Agregue el atributo HTML correcto para que el elemento H1 sea rojo.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 >My Home Page</h1>

</body>
</html>



Comentarios