Uso del atributo id en HTML

El atributo id te permite asignar un identificador único a un elemento HTML. Es esencial para aplicar estilos con CSS, manipular con JavaScript o navegar dentro de la página.

¿Qué es el atributo id?

El id es un identificador único asignado a un elemento. Un id solo puede aparecer una vez por página. Este atributo suele ser un nombre corto y descriptivo.

<h2 id="section1">Introduction</h2>

Importancia de la unicidad

El atributo id solo puede aparecer una vez en un documento. Esto lo diferencia del atributo class, que puede usarse múltiples veces. Si dos elementos tienen el mismo id, puede causar errores en CSS o JavaScript.

Usar id en CSS

En CSS, el atributo id se indica con el símbolo #. Nos permite asignar estilos a un elemento específico, como colores, tamaños o diseños.

#main-title {
  color: blue;
  font-size: 24px;
}

<h1 id="main-title">Welcome to the site</h1>

Usar id en JavaScript

En JavaScript, puedes acceder a un elemento por su id usando el método getElementById. Esto te permite modificar contenido o estilo dinámicamente.

document.getElementById("main-title").innerText = "Hello!";

id en navegación interna

Cuando un enlace apunta a un id, el navegador se desplazará automáticamente al elemento correspondiente. Esto es útil para páginas largas, como FAQs o índices.

<a href="#contact">Go to contact section</a>

...

<h2 id="contact">Contact Us</h2>

Reglas para nombrar ids

Evita espacios y caracteres especiales al nombrar ids. Usa letras minúsculas, guiones o formato camelCase, por ejemplo: main-title o contactSection.