Atributos globales

8.1 Atributo id

Los atributos globales son aquellos que pueden ser utilizados con cualquier elemento HTML. Juegan un papel clave en la identificación, clasificación y gestión de los elementos de las páginas web.

El atributo id se utiliza para identificar de manera única un elemento en la página. El valor del atributo id debe ser único dentro de todo el documento HTML. Este atributo se utiliza a menudo para vincular con elementos CSS y JavaScript.

Sintaxis:

    
      <element id="unique-id">...</element>
    
  

Ejemplo de uso:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Título</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Ventajas:

• Identificación única: permite identificar de manera inequívoca elementos en la página
• Estilización: conveniente para aplicar estilos CSS
• Manipulación del DOM: fácil acceso a los elementos mediante JavaScript

8.2 Atributo class

El atributo class se utiliza para asignar uno o más clases a un elemento. Estas clases pueden ser utilizadas para aplicar estilos CSS y para manipulaciones con elementos usando JavaScript. A diferencia de id, los valores de class no tienen que ser únicos.

Sintaxis:

    
      <element class="class-1 class-2">...</element>
    
  

Ejemplo de uso:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Este texto está resaltado en amarillo.</p>
      <p class="bold">Este texto está en negrita.</p>
      <p class="highlight bold">Este texto está en negrita y resaltado en amarillo.</p>
    
  

Ventajas:

• Múltiples clases: permite definir múltiples clases para un solo elemento
• Agrupación de elementos: fácil aplicación de estilos a grupos de elementos
• Manipulación del DOM: facilita el trabajo con grupos de elementos vía JavaScript

8.3 Atributos data-*

Los atributos data-* permiten almacenar datos personalizados en los elementos HTML. Estos atributos comienzan con el prefijo data- y pueden tener cualquier valor. Se utilizan a menudo para almacenar información que puede ser útil para JavaScript.

Sintaxis:

    
      <element data-key="value">...</element>
    
  

Ejemplo de uso:

    
      <div data-user-id="12345" data-role="admin">
        Usuario con ID 12345, rol - administrador.
      </div>
    
  

    
// Encontramos el primer elemento en la página que tiene el atributo data-user-id
const userElement = document.querySelector('[data-user-id]');

// Obtenemos el valor del atributo data-user-id y lo mostramos en la consola
console.log(userElement.dataset.userId); // Salida: 12345

// Obtenemos el valor del atributo data-role y lo mostramos en la consola
console.log(userElement.dataset.role); // Salida: admin
    
  

Ventajas:

• Almacenamiento de datos: conveniente para almacenar y transmitir datos relacionados con los elementos
• Acceso a través de JavaScript: fácil acceso y modificación de datos a través de dataset API
• Flexibilidad: permite añadir cualquier dato sin romper el estándar HTML