Site Web

• Permettent de repérer ou regrouper des éléments pour le style ou le JavaScript.

• Exemples :

  • id="monID" → identifiant unique pour un élément

  • class="maClasse" → permet de regrouper plusieurs éléments

  • name="champNom" → utile pour les formulaires

• Modifient l’apparence ou l’affichage d’un élément.

• Exemples :

  • style="color:red;" → applique du CSS directement

  • hidden → masque l’élément

  • width="200" / height="100" → dimensions pour <img>, <video>

• Spécifient la source ou la description d’un contenu.

• Exemples :

  • src="image.jpg" → source d’une image ou d’une vidéo

  • href="https://exemple.com" → URL d’un lien

  • alt="Description" → texte alternatif pour les images

• Contrôlent le comportement des champs et boutons de formulaire.

• Exemples :

  • type="text" / type="checkbox" → type de champ

  • placeholder="Nom" → texte indicatif dans un champ

  • checked → coche par défaut

  • disabled → champ ou bouton désactivé

  • required → champ obligatoire

• Définissent le comportement des liens ou ressources externes.

• Exemples :

  • target="_blank" → ouvre le lien dans un nouvel onglet

  • rel="noopener" → sécurise les liens externes

• Permettent de déclencher des actions sur des événements utilisateur.

• Exemples :

  • onclick="alert('Hello')" → exécute une action au clic

  • onmouseover="changerCouleur()" → au survol de l’élément

• Stockent des informations supplémentaires pour le JavaScript ou le CSS.

• Exemple :

  • data-user="123" → attribut personnalisé accessible via JS

• Contrôlent la lecture de vidéos et audios.

• Exemples :

  • controls → affiche les contrôles de lecture

  • autoplay → lecture automatique

  • loop → lecture en boucle

  • muted → son coupé

ces attributs permettent de rendre le contenu et les applications web accessibles. Il existe deux type d'attributs.

• role → décrit la fonction de l’élément.

• aria-* → décrit l’état ou les informations supplémentaires.

Indispensable pour l’accessibilité, surtout pour les utilisateurs de lecteurs d’écran.

Exemples :

• role="button" → Indique qu’un élément se comporte comme un bouton

  <div role="button">Cliquez</div>

• role="navigation" → Déclare une zone de navigation

  <nav role="navigation">Menu</nav>

• role="region" → Région importante pour le lecteur d’écran

  <section role="region" aria-labelledby="titre">...</section>

• role="list" → Indique une liste accessible

  <ul role="list"><li role="listitem">Item</li></ul>

• role="listitem" → Indique un élément de liste

  <li role="listitem">Item 1</li>

• aria-label → Fournit un nom/accessibilité pour un élément

  <button aria-label="Fermer la fenêtre">*</button>

• aria-labelledby → Lie un élément à un texte qui en décrit le contenu

  <section aria-labelledby="titre">...</section>

• aria-hidden → Indique qu’un élément doit être ignoré par les lecteurs d’écran

  <div aria-hidden="true">Décoratif</div>

• aria-required="true" → Indique qu’un champ de formulaire est obligatoire

  <input type="text" aria-required="true">

• aria-disabled="true" → Indique qu’un élément est désactivé

  <button aria-disabled="true">Envoyer</button>