El Atributo ID en HTML Explicado!! [y marcadores de enlaces]

El atributo id

• El atributo id especifica un identificador único para un elemento HTML
• El valor del id se usa en CSS y JavaScript para aplicar estilos o tareas sobre el elemento
• En CSS se usa el # para seleccionar el elemento

See the Pen HTML | 1.23 - El atributo id - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Diferencias entre id y class

• Un elemento HTML sólo puede tener un id y este debe ser único en todo el documento
• Un elemento HTML puede tener muchas clases al mismo tiempo

See the Pen HTML | 1.23 - El atributo id - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Marcadores con ID y enlaces

• Los marcadores en HTML sirven para saltar a una parte específica de la página web.
• Son útiles en webs muy largas.
• Cuando clicas sobre el enlace la página hace scroll a la localización del marcador

See the Pen HTML | 1.23 - El atributo id - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Usando el atributo id en JavaScript

En JavaScript podemos acceder a un elemento usando el id a través del método getElementById()

See the Pen HTML | 1.23 - El atributo id - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.