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:
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
idse utiliza para especificar una identificación única para un elemento HTML - El valor del atributo
iddebe ser único dentro del documento HTML - CSS y JavaScript utilizan el atributo
idpara diseñar/seleccionar un elemento específico - El valor del atributo
iddistingue entre mayúsculas y minúsculas - El atributo
idtambién se utiliza para crear marcadores HTML - JavaScript puede acceder a un elemento con una identificación específica con el método
getElementById()
