32-atributo de identificacion en html (ID)

El atributo id se utiliza para especificar una identificacion unica para cada elemento

El elemento id tiene que ser unico

Tambien es utilizado en javascript para aceder y manipular el elemento

igual que las classes el elemento id se le pone los estilos necessarios

en class usabamos un (.)punto, para identificarla

para identificar un elemento id usamos un (#)

Ejemplo de código

        <style>
#myHeader {
             background-color: lightblue;
             color: black;
             padding: 40px;
             text-align: center;
} 
</style>
    

...

ejemplo de un titulo con el id anterior

Soy un Titulo con el ID= myHeader

Atencion este atributo distingue entre mayusculas y minusculas

Nota La identificacion tiene que tener al menos un caracter

No puede ser iniciado por un numero

tanpoco puede contener espacios en blanco o tabulaciones

Diferencias entre clases y ID

El nombre de la class lo podemos usar varias veces en varios elementos html

el nombre del atributo id solo puede ser usado una sola vez

Ejemplo de estilos con ID y Class

        <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>
    

---

Marcadores con ID y enlaces

Los marcadores son muy utiles,para cuando queremos ir de un sitio al otro, sin mover nada

Si tenemos un titulo de una página o un parrafo marcado con un marcador

colocamos un link que nos lleve a dicho marcador y ya esta.

Ejemplo

Lo primero es crear el marcador con el atributo id

ejemplo del codigo

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

En seguida agregamos el enlace que nos lleve al marcador

ejemplo del codigo

<a href="#C4">Saltar al capitulo 4</a>

Si nos encontramos en otra página el codigo es el seguinte:

ejemplo del codigo

<a href="html_demo.html#C4">Saltar al capitulo 4</a>

Ir al indice