Attributs globaux

8.1 Attribut id

Les attributs globaux sont des attributs qui peuvent être utilisés avec n'importe quel élément HTML. Ils jouent un rôle clé dans l'identification, la classification et la gestion des éléments des pages web.

L'attribut id est utilisé pour identifier de manière unique un élément sur une page. La valeur de l'attribut id doit être unique dans l'ensemble du document HTML. Cet attribut est souvent utilisé pour lier des éléments avec CSS et JavaScript.

Syntaxe :

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

Exemple d'utilisation :

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

    
      <div id="header">
        <h1>Titre</h1>
      </div>
    
  

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

Avantages :

• Identification unique : permet d'identifier de manière unique les éléments sur la page
• Stylisation : pratique pour appliquer des styles CSS
• Manipulation du DOM : accès facile aux éléments via JavaScript

8.2 Attribut class

L'attribut class est utilisé pour assigner une ou plusieurs classes à un élément. Ces classes peuvent être utilisées pour appliquer des styles CSS et pour manipuler les éléments avec JavaScript. Contrairement à id, les valeurs des classes n'ont pas besoin d'être uniques.

Syntaxe :

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

Exemple d'utilisation :

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Ce texte est surligné en jaune.</p>
      <p class="bold">Ce texte est en gras.</p>
      <p class="highlight bold">Ce texte est en gras et surligné en jaune.</p>
    
  

Avantages :

• Classes multiples : permet d'assigner plusieurs classes à un seul élément
• Groupement d'éléments : facile d'appliquer des styles à des groupes d'éléments
• Manipulation du DOM : permet de travailler facilement avec des groupes d'éléments via JavaScript

8.3 Attributs data-*

Les attributs data-* permettent de stocker des données personnalisées dans les éléments HTML. Ces attributs commencent par le préfixe data- et peuvent avoir n'importe quelle valeur. Ils sont souvent utilisés pour stocker des informations utiles pour JavaScript.

Syntaxe :

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

Exemple d'utilisation :

    
      <div data-user-id="12345" data-role="admin">
        Utilisateur avec ID 12345, rôle - administrateur.
      </div>
    
  

    
// Trouver le premier élément sur la page qui a l'attribut data-user-id
const userElement = document.querySelector('[data-user-id]');

// Obtenir la valeur de l'attribut data-user-id et l'afficher dans la console
console.log(userElement.dataset.userId); // Affiche : 12345

// Obtenir la valeur de l'attribut data-role et l'afficher dans la console
console.log(userElement.dataset.role); // Affiche : admin
    
  

Avantages :

• Stockage de données : pratique pour stocker et transmettre des données liées aux éléments
• Accès via JavaScript : accès et modification faciles des données via l'API dataset
• Flexibilité : permet d'ajouter n'importe quelle donnée sans enfreindre le standard HTML