Historique des conversations
Chargement...
Chapitre 11 : Les attributs globaux en HTML
Chapitre 11 : Les attributs globaux en HTML
Qu’est-ce qu’un attribut global ?
Les attributs globaux sont des attributs que l’on peut utiliser sur presque toutes les balises HTML. Ils servent à ajouter des informations utiles au navigateur, au développeur ou à l'utilisateur.
Les principaux attributs globaux
id: identifiant unique pour une baliseclass: classe pour appliquer des styles CSSstyle: styles CSS en lignetitle: infobulle au survollang: langue du contenuhidden: cacher l’élémentdata-*: pour les données personnalisées (data attributes)
Exemples d’utilisation
<p id="intro" class="texte-important" style="color: red;" title="Paragraphe d'introduction">
Bonjour et bienvenue !
</p>Les attributs personnalisés : data-*
Utilisés pour stocker des données personnalisées dans le HTML, souvent exploitées avec JavaScript.
<div data-user-id="42" data-role="admin">
Utilisateur admin
</div>Résumé
Les attributs globaux améliorent la structuration, la personnalisation, l’accessibilité et l’interactivité des éléments HTML.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 11
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Classe
Atelier #1Ajoute une classe 'encadre' à un div.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<div class="encadre">Contenu</div>
#2 — Identifiant
Atelier #2Ajoute un identifiant unique 'header-main' à une balise header.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<header id="header-main">...</header>
#3 — Infobulle (Tooltip)
Atelier #3Utilise l'attribut title pour afficher 'Cliquez ici' au survol d'un lien.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<a href="#" title="Cliquez ici">Lien</a>
#4 — Langue
Atelier #4Indique que le contenu d'un paragraphe est en anglais.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<p lang="en">Hello World!</p>
#5 — Éditable
Atelier #5Rends le contenu d'un div modifiable par l'utilisateur (contenteditable).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<div contenteditable="true">Modifiez-moi !</div>