Atributo de identificación HTML
El atributo HTML idse usa para especificar una identificación única para un elemento HTML.
No puede tener más de un elemento con la misma identificación en un documento HTML.
Usando el atributo id
El idatributo especifica una identificación única para un elemento HTML. El valor del id
atributo debe ser único dentro del documento HTML.
El idatributo se utiliza para apuntar a una declaración de estilo específica en una hoja de estilo. También lo utiliza JavaScript para acceder y manipular el elemento con la identificación específica.
La sintaxis para id es: escriba un carácter hash (#), seguido de un nombre de id. Luego, defina las propiedades CSS entre llaves {}.
En el siguiente ejemplo, tenemos un <h1>elemento que apunta al nombre de identificación "myHeader". Este <h1>
elemento se diseñará de acuerdo con la #myHeader
definición de estilo en la sección principal:
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>
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 utilizado por varios elementos HTML, mientras que un nombre de identificación solo debe ser utilizado por un elemento HTML dentro de la página:
Ejemplo
<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>
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 que los lectores salten a partes específicas de una página web.
Los marcadores pueden ser útiles si su página es muy larga.
Para usar un marcador, primero debe crearlo y luego agregarle un vínculo.
Luego, cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.
Ejemplo
Primero, crea un marcador con el idatributo:
<h2 id="C4">Chapter 4</h2>
Luego, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde dentro de la misma página:
Ejemplo
<a href="#C4">Jump to Chapter 4</a>
O agregue un enlace al marcador ("Saltar al Capítulo 4"), desde otra página:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Usando el atributo id en JavaScript
idJavaScript también puede usar el atributo para realizar algunas tareas para ese elemento específico.
JavaScript puede acceder a un elemento con una identificación específica con el getElementById()método:
Ejemplo
Use el idatributo para manipular texto con JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Sugerencia: estudie JavaScript en el capítulo HTML JavaScript o en nuestro Tutorial de JavaScript .
Resumen del capítulo
- El
idatributo se usa para especificar una identificación única para un elemento HTML - El valor del
idatributo debe ser único dentro del documento HTML - El
idatributo es utilizado por CSS y JavaScript para diseñar/seleccionar un elemento específico - El valor del
idatributo distingue entre mayúsculas y minúsculas - El
idatributo también se usa para crear marcadores HTML - JavaScript puede acceder a un elemento con una identificación específica con el
getElementById()método