|
• |
Astuces HTML |
• |
Attributs globaux HTML5 |
• |
|
En HTML5 il existe une liste d'attributs globaux, qui s'applique à toutes les balises, à l'exception :
- des commentaires <!-- -->,
- des doctypes <!doctype>.
Liste des attributs
 | contenteditable | Définit si le contenu de l'élément peut être édité | | | |  |
L'attribut contenteditable permet d'autoriser ou d'interdire l'édition d'un élément. Cette fonctionnalité répond à la demande du web participatif avec des interfaces WYSIWYG. Elle prend tous sont sens dans le cas d'un wiki ou d'un forum par exemple.
 | Cet attribut ne rajoute pas de barre de mise en forme (avec boutons gras, italic, souligné, insertion d'images, alignement du texte, ...). Pour cela un script complémentaire sera nécessaire. |
Liste des valeurs possibles
Valeur | Description |
false | indique que l'élément n'est pas éditable (valeur par défaut) |
true | indique que l'élément est éditable |
 | contextmenu | Définit un menu contextuel | | | |  |
 | La description de cet attribut n'est pas encore disponible ! |
 | draggable | DnD : Rend un élément déplaçable | | | |  |
 | La description de cet attribut n'est pas encore disponible ! |
 | dropzone | DnD : Définit l'éffet du déplacement | | | |  |
 | La description de cet attribut n'est pas encore disponible ! |
 | hidden | Spécifie si l'objet est visible | | | |  |
 | La description de cet attribut n'est pas encore disponible ! |
 | spellcheck | Utilisation de la correction orthographique intégrée du navigateur | | | |  |
L'attribut spellcheck permet d'autoriser ou ou d'interdire la correction orthographique automatique d'un élément. Elle prend tous sont sens dans le cas d'un formulaire par exemple.
Liste des valeurs possibles
Valeur | Description |
true | La correction orthographique est activée (valeur par défaut). |
false | La correction orthographique est désactivée. |
 | accesskey | touche d'accessibilité | |  |  |  |
L'attribut accesskey assigne une clé d'accès à un élément, un raccourci clavier. Ainsi, si on définie une clé d'accès sur un lien par exemple, et que l'utilisateur utilise cette clé, elle le conduira directement sur le document ciblé par le lien. Il prend donc pour valeur un caractère.
 | Il faut combiner la clé d'accès avec la touche ALT pour Windows, CTRL pour Mac. |
L'exemple ci-dessous renvoie sur la page d'index du site lorsque vous appuyez sur le touche 'I' de votre clavier :
<a href=
"http://webmasterhelp.fr/index.php" accesskey=
"i"> Alt + I
</a> ⇨
Alt + I
 | Sous Windows : - Internet Explorer : Alt + clé d'accès puis Entrée - FireFox : Shift + Alt + clé d'accès - Chrome : Alt + clé d'accès |
 | class | Liste de classes auquel appartient l'élément | |  |  |  |
L'attribut class permet d'assigner un élément à un nom de classe ou à un ensemble de noms de classe. Un nom de classe peut-être attribué à plusieurs éléments d'un même document. Un élément peut faire parti de plusieurs classes dont les noms sont séparés par des espaces blancs.
L'attribut class peut être utilisé comme selecteur d'une feuille de style (lorsqu'on souhaite appliquer un style à un ou plusieurs éléments), interaction avec un script concernant un ou plusieurs éléments...
 | dir | Sens de lecture du texte | |  |  |  |
L'attribut dir permet de déterminer le sens de la lecture et de l'écriture d'un texte.
Liste des valeurs possibles
Valeur | Description |
ltr | (left to right) de gauche à droite |
rtl | (right to left) de droite à gauche |
 | id | Identifiant unique de la balise | |  |  |  |
L'attribut id permet de donner un nom, d'identifier un élément du document. Ce nom doit être unique dans le document.
L'id peut se voir attribuer plusieurs rôles : sélecteur d'une feuille de style, ancre cible de liens hypertextes, interaction avec un script, nom d'un élément OBJECT déclaré, élément d'un formulaire dont on souhaite récupérer les données...
Cet attribut spécifie dans quelle langue de base sont écrits les valeurs d'attribut et le contenu textuel d'un élément. La valeur par défaut de cet attribut est inconnue.
Le but de l'attribut lang est de permettre aux agents utilisateurs de représenter un contenu de façon plus pertinente en suivant les pratiques culturelles en usage dans une langue donnée. Il permet également de prêter assistance aux moteurs de recherche, aux synthétiseurs de paroles, aux vérificateurs d'orthographe et de grammaire et d'aider les navigateurs à choisir un jeu de guillemets, prendre des décisions sur les coupures de mots...
 | style | Feuille de style associée à l'élément | |  |  |  |
L'attribut style permet de renseigner des informations de style de l'élément concerné. La valeur de cet attribut est déterminé par le language de feuille de style par défaut du document contenant l'élément, comme le montre l'exemple CSS suivant :
<font style="color:MediumVioletRed; font-style:italic;">Texte</font> => Texte
 | tabindex | Position dans la séquence de la touche tab | |  |  |  |
 | La description de cet attribut n'est pas encore disponible ! |
L'attribut title permet de fournir à l'utilisateur des informations consultatives concernant l'élément sur lequel il se place : la valeur de cet attribut est donc une chaine de caratères qui apparaît à titre informatif au survol de l'élément concerné.