El atributo id es de vital importancia a la hora de trabajar nuestras páginas web con javaScript y también para aplicar estilos con css.
Este atributo no es más que una identificación única para cada elemento de nuestra página. Si un documento html fuera un país, el atributo id sería su dni. Este valor no debe repetirse ya que aunque la página web se va a renderizar sin ningún problema, de seguro generará errores con la interactividad.
Un aspecto importante es el de mencionar que a nivel de diseño básico, de seguro, no necesitarás hacer uso del atributo en ningún momento, cuando tengas la oportunidad de trabajar con un framework o librería como React o Vue, tendrás que usarlo obligatoriamente.
Vamos a aplicar estilos a un elemento div, para ello vamos a asignar un id en lugar de una clase que es lo que observarás la mayoría de las veces cuando se tratar de aplicar estilos:
Podrás observar que para aplicar el estilo css usamos el caracter hash(#) en lugar del punto(.) como hacemos con las clases. Además, en el elemento div puedes ver que colocamos el atributo id.
¿Debo usar clases o id para aplicar estilos a los elementos de mi pagina web?
Recuerda que usamos las clases cuando vamos a aplicar el mismo estilo a varios elementos html, en cambio, usarás id cuando vayas a aplicar estilos a un elemento específico.
Marcadores
Tengo plena certeza de que si has leído muchos blogs habrás notado que en los contenidos que son muy extensos hay un índice de contenido el cual te lleva directamente a la sección que quieres sin tener necesidad de hacer scroll en la pantalla.
Este método lo logramos usando el atributo id en conjunto con los links. básicamente creamos hipervínculos dentro de la misma página web.
A cada sección de la página a la que queremos hacer un salto le aplicamos un id y dentro del índice insertamos hipervínculos que tendrán como destino en su atributo href el id de la sección destino precedida por el símbolo hash(#). Si te sonó a japonés medieval, analiza el siguiente ejemplo: