31-El atributo "ID"

---

El atributo id en HTML es un identificador único asignado a un elemento. Este atributo permite que el elemento sea identificado de manera exclusiva dentro de la página y se utiliza comúnmente en CSS y JavaScript para aplicar estilos o manipular el elemento. Un valor de id debe ser único en la página y no debe repetirse en otros elementos

Temas tratados en esta entrada

• Cómo se usa el atributo id
• Diferencias entre el atributo id y el atributo class
• Marcados con id y sus enlaces
• El uso del atributo id en JavaScript
• Resumen del capítulo

---

El uso del atributo id

El atributo id en HTML se utiliza para asignar un identificador único a un elemento dentro del documento. Este identificador permite que el elemento sea referenciado específicamente en CSS o JavaScript. A diferencia del atributo class, un id debe ser único, lo que significa que no puede repetirse en otros elementos dentro de la misma página.

La sintaxis para el atributo id es simple; se especifica dentro de la etiqueta del elemento HTML. Aquí un ejemplo:

  <div id="miDiv">Contenido del div</div>
      

En este caso, id="miDiv" permite identificar de manera única este elemento <div>, y puede ser estilizado o manipulado con JavaScript fácilmente. Al usar el atributo id, también es posible crear enlaces internos que navegan directamente a un elemento específico.

Por ejemplo, este enlace:

  <a href="#miDiv">Ir a miDiv</a>
      

te llevará al elemento con el id="miDiv".

Ejemplo

A continuación, un ejemplo de cómo se usa el atributo id para identificar un elemento y crear un enlace interno.

Ejemplo: Usando el atributo id

Este <div> tiene un id que lo identifica como "miDiv":

  <div id="miDiv" class="bg-light p-3 border">Contenido del div con id "miDiv"</div>
      

Y este enlace:

  <a href="#miDiv">Ir a miDiv</a>
      

te llevará directamente al <div> con id="miDiv" cuando lo hagas clic.

---

...

Diferencias entre el atributo id y el atributo class

Tanto el atributo id como el atributo class se utilizan para identificar elementos en HTML, pero tienen diferencias clave que determinan cuándo deberías usar uno u otro.

1. Unicidad: El atributo id debe ser único dentro de la página, lo que significa que solo un elemento puede tener un determinado valor de id. En contraste, el atributo class se puede compartir entre varios elementos, permitiendo aplicar el mismo estilo o comportamiento a un grupo de elementos.

  <!-- id único -->
<div id="cabecera">Cabecera del sitio</div>

<!-- class compartida por varios elementos -->
<div class="seccion">Sección 1</div>
<div class="seccion">Sección 2</div>
      

2. Estilos y Scripts: Tanto id como class se pueden usar en CSS para aplicar estilos, pero id tiene una mayor especificidad, lo que significa que las reglas CSS que usan id tienen más peso que las que usan class. En JavaScript, el uso de id facilita la identificación y manipulación de un solo elemento específico, mientras que class se puede usar para seleccionar grupos de elementos.

  <style>
/* Usando id para aplicar estilo específico */
#miDiv {
    background-color: yellow;
    padding: 10px;
}

/* Usando class para aplicar estilo a múltiples elementos */
.miClase {
    background-color: green;
    color: white;
    padding: 10px;
}
</style>
      

3. Enlaces internos: El atributo id es muy útil para crear enlaces internos dentro de una página, ya que permite navegar directamente a un elemento específico. class no se usa para este propósito, ya que su función principal es agrupar elementos para estilización o manipulación.

  <a href="#cabecera">Ir a la cabecera</a>
      

Ejemplo

A continuación, varios ejemplos que ilustran las diferencias entre id y class.

Ejemplo 1: Usando id y class en CSS

Este ejemplo muestra cómo aplicar estilos específicos utilizando ambos atributos.

Elemento único con id "miDiv" (fondo amarillo)

Elemento con clase "miClase" 1 (fondo verde)

Elemento con clase "miClase" 2 (fondo azul)

<!-- HTML -->
<div id="miDiv">Elemento único con id "miDiv"</div>
<div class="miClase">Elemento con clase "miClase" 1</div>
<div class="miClase">Elemento con clase "miClase" 2</div>

<!-- CSS -->
#miDiv {
    background-color: yellow;
    padding: 10px;
}

.miClase {
    background-color: green;
    color: white;
    padding: 10px;
}
                

El elemento con id="miDiv" tiene un fondo amarillo, mientras que los elementos que comparten la clase miClase tienen un fondo verde y texto blanco.

Ejemplo 2: Manipulación con JavaScript

En este ejemplo, puedes cambiar el color de un elemento con id y aplicar negrita a los elementos con la clase grupo al hacer clic en el botón.

Elemento con id "especial"

Elemento del grupo 1

Elemento del grupo 2

---

Marcados con id y sus enlaces

El atributo id no solo se utiliza para identificar y manipular elementos de forma única dentro de una página, sino que también puede usarse para crear enlaces internos. Esto es útil cuando quieres que un usuario navegue rápidamente a una sección específica de la página.

Para crear un enlace a una parte específica de la página, primero asigna un id a un elemento HTML, y luego, puedes crear un enlace que apunte a ese id usando el símbolo de almohadilla (#) seguido del nombre del id. Esto permite que al hacer clic en el enlace, la página se desplace automáticamente a la sección correspondiente.

Ejemplo básico: si tienes una sección con id="contacto", puedes crear un enlace que apunte a esa sección de la siguiente manera:

        <a href="#contacto">Ir a la sección de Contacto</a>
      

Y el id se colocaría en el elemento correspondiente:

        <div id="contacto">Aquí va la sección de contacto</div>
      

Al hacer clic en el enlace, el navegador automáticamente llevará al usuario a la posición del elemento con el id especificado. Esto es útil en páginas largas o con muchos apartados.

Ejemplo

A continuación, un ejemplo de cómo se utilizan los id para crear enlaces internos hacia los temas de la lección:

Enlace para saltar al Tema 1:

Ir al Tema 1: Cómo se usa el atributo id

Enlace para saltar al Tema 2:

Ir al Tema 2: Diferencias entre el atributo id y el atributo class

Enlace para saltar al Tema 3:

Ir al Tema 3: Marcados con id y sus enlaces

---

El uso del atributo id en JavaScript

El atributo id se utiliza en HTML para identificar de forma única un elemento dentro del documento. En JavaScript, puedes utilizar este atributo para acceder y manipular ese elemento específico fácilmente.

Al utilizar document.getElementById("mi-id"), puedes seleccionar un elemento con un id específico. Esto es especialmente útil cuando necesitas cambiar estilos, contenido o responder a eventos.

Es importante recordar que cada id debe ser único en el documento para que no haya confusiones en la manipulación de los elementos.

Ejemplo

En este ejemplo, veremos cómo usar el atributo id para manipular un elemento HTML con JavaScript:

¡Hola, este es un mensaje!

Cuando se presiona el botón, el texto del <div> con id="mensaje" cambia a "El texto ha sido cambiado!".

Código del ejemplo

<div id="mensaje">¡Hola, este es un mensaje!</div>
<button onclick="cambiarTexto()">Cambiar texto</button>

<script>
function cambiarTexto() {
    document.getElementById("mensaje").innerHTML = "El texto ha sido cambiado!";
}
</script>
            

---

---

Resumen del Capítulo

En este capítulo, hemos explorado diversos aspectos del atributo id y cómo se utiliza en HTML y JavaScript:

• Cómo se usa el atributo id: Se utiliza para identificar de manera única un elemento dentro del documento HTML, permitiendo enlaces internos y manipulación a través de JavaScript.
• Diferencias entre id y class: Un id debe ser único en la página, mientras que un class puede ser utilizado por múltiples elementos.
• Marcados con id y sus enlaces: Aprendimos cómo usar el atributo id para crear enlaces internos que permiten saltar a diferentes secciones de la misma página.
• Uso del atributo id en JavaScript: El atributo id se puede utilizar para seleccionar y manipular elementos en el DOM, facilitando la interacción con el usuario mediante funciones de JavaScript.

Estos conceptos son fundamentales para el desarrollo web, ya que permiten estructurar el contenido y mejorar la interactividad de las páginas web. Al comprender y aplicar correctamente el uso de id y class, los desarrolladores pueden crear experiencias más dinámicas y eficientes para los usuarios.

---

Ir al índice

---