El atributo id es usado para especificar un único id para un elemento HTML. No se puede tener más de un elemento con el mismo id en un documento HTML.
Usar 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 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, define 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 id distingue entre mayúsculas y minúsculas!
Nota: El id debe contener al menos un carácter, no puede comenzar con un número y no debe contener espacios en blanco (espacios, tabulaciones, etc.).
Diferencias entre class e id
Un class puede ser utilizado por varios elementos HTML, mientras que un id solo debe ser utilizado por un elemento HTML dentro de la página.
Ejm
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>Un nombre de clase puede ser usado por múltiples elementos HTML,
mientras que un id sólo puede ser utilizado por un elemento</p>
<!-- 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>
</body>
</html>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 debes crearlo y luego preparar un enlace. Luego, cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.
Ejm
Primero creamos un identificador con el atributo id
<h2 id="C4">Chapter 4</h2>
Después añadimos un enlace al identificador en la misma página.
<a href="#C4">Jump to Chapter 4</a>
También podemos añadir un enlace al identificador de otra página de la siguiente manera.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Usando id en Javascript
JavaScript también puede usar 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().
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>