HTML5: id
Usando el atributo id
El atributo id especifica una identificación única para un elemento HTML (el valor debe ser único dentro del documento HTML).El valor de identificación puede ser utilizado por CSS y JavaScript para realizar ciertas tareas para un elemento único con el valor de identificación especificado.
En CSS, para seleccionar un elemento con un id específico, escriba un carácter almohadilla (#), seguido de la identificación del elemento:
Ejemplo
Use CSS para darle estilo a un elemento con el id "cabecera":
<style>
#cabecera {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center; } </style>
<h1 id="cabecera">My Header</h1>
#cabecera {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center; } </style>
<h1 id="cabecera">My Header</h1>
 |
| Vista en navegador del ejemplo anterior |
Consejo: El atributo id se puede usar en cualquier elemento HTML.
Nota: El valor de id distingue entre mayúsculas y minúsculas.
Nota: El valor de id debe contener al menos un carácter y no debe contener espacios en blanco (espacios, pestañas, etc.).
Diferencia entre clase e ID
Un elemento HTML solo puede tener un único id que pertenece a ese único elemento, mientras que un nombre de clase puede ser utilizado por múltiples elementos:<style>
/* Estilos del elemento con el id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center; }
/* Estilos de todos los elementos con la clase "city" */
.city {
background-color: tomato;
color: white;
padding: 10px; } </style>
<!-- Único elemento con id -->
<h1 id="myHeader">My Cities</h1>
<!-- Múltiples elementos con la clase "city" -->
<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>
 |
| Vista en navegador del ejemplo anterior |
Marcadores 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 su página web es muy larga.
Para hacer un marcador, primero debe crear el marcador y luego agregarle un enlace.
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 atributo id:<h2 id="C4">Capítulo 4</h2>
Luego, agregue un enlace al marcador ("Saltar al capítulo 4"), desde dentro de la misma página:
<a href="#C4">Saltar al capítulo 4</a>
O bien, 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>
Comentarios
Publicar un comentario