Attributs HTML
Les attributs HTML sont utilisés dans la balise d’ouverture. Ils fournissent des informations supplémentaires sur les éléments HTML. Un attribut fournit des métadonnées pour un élément ou modifie son comportement. L’attribut a un nom, suivi du signe égal (=) et d’une valeur placée entre guillemets ("").
Syntaxe
Syntaxe des attributs HTML
html
<tag attribute="value">Your Text</tag>L’attribut href
La balise HTML <a> crée un lien, dont l’adresse est définie dans l’attribut href. Dans l’exemple ci-dessous, nous avons utilisé la balise <a> avec l’attribut href. Entre les guillemets, nous avons écrit l’adresse de la page vers laquelle nous irons après avoir cliqué sur le lien.
Exemple de la balise HTML <a> avec l’attribut href :
Exemple d’attribut
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com">Click here and go to the homepage.</a>
</body>
</html>Résultat
Cliquez et allez à la page d’accueil
L’attribut id
L’attribut id HTML définit un identifiant unique pour chaque élément.
Exemple de la balise HTML <div> avec l’attribut id :
Exemple de la balise div avec l’attribut "id"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#text {
font-family: sans-serif;
font-size: 20px;
line-height: 28px;
color: #777777;
}
</style>
</head>
<body>
<h2>Example of the div tag with the "id" attribute</h2>
<div id="text">Here is some text for the div tag with the "id" attribute.</div>
</body>
</html>L’attribut style
L’attribut style définit la mise en forme d’un élément, comme la couleur, la taille, la police, etc.
Exemple de la balise HTML <p> avec l’attribut style :
Exemple de la balise p avec l’attribut "style" :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example of the p tag with the style attribute</h2>
<p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
</body>
</html>L’attribut start
L’attribut start définit la valeur de départ du premier élément d’une liste ordonnée.
Exemple de la balise HTML <ol> avec l’attribut start :
Exemple de la balise ol avec l’attribut "start"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the ol tag with the "start" attribute:</h1>
<ol>
<li>List Item</li>
<li>List Item </li>
<li>List Item </li>
</ol>
<ol start="30">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
</body>
</html>Attributs multiples
Vous pouvez ajouter plus d’un attribut à l’élément HTML. Veillez à les séparer par un espace.
L’ordre dans lequel les attributs sont placés n’a pas d’importance.
Syntaxe
Exemple d’attributs HTML
html
<tag attribute1="value" attribute2="value">Your text</tag>Exemple de la balise HTML <img> avec les attributs src, width, height et alt :
Exemple de la balise img HTML avec plusieurs attributs
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading</h1>
<p>This is Aleq's photo</p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Attributs de contenu et attributs IDL
En HTML, nous avons deux groupes d’attributs : l’attribut de contenu et l’attribut IDL (Interface Definition Language).
L’attribut de contenu est défini à partir du contenu (le code HTML) et vous pouvez l’obtenir via element.setAttribute() ou element.getAttribute(). Certains attributs de contenu, comme readonly, disabled, required, sont aussi appelés attributs booléens. La valeur d’un attribut booléen est true s’il est présent et false s’il est absent.
Les attributs IDL sont ceux qui peuvent être lus ou définis avec des propriétés JavaScript comme element.foo. Les attributs IDL reflètent les attributs de contenu. Ils utilisent toujours l’attribut de contenu et renvoient une valeur lorsque vous les lisez, en enregistrant quelque chose dans l’attribut de contenu lors de la définition.
La liste des attributs HTML les plus utilisés :
| Attribute | Description | Example |
|---|---|---|
| alt | Définit un texte alternatif lorsque l’élément d’origine n’est pas affiché. | alt="HTML Attributes" |
| height | Définit la hauteur de l’élément. | height="250" |
| href | Définit l’URL d’un lien. | href="https://www.w3docs.com/" |
| hreflang | Définit la langue du document lié. | hreflang="en" |
| id | Définit un identifiant unique pour un élément HTML. | id="example" |
| lang | Définit la langue du document (utilisé dans la balise <html>). | <html lang="en-US"> |
| rel | Définit la relation entre les documents cible et lié. | rel="nofollow" |
| shape | Définit la forme de l’élément. | shape="circle" |
| span | Définit le nombre de colonnes occupées par un élément <col> ou <colgroup>. | span="2" |
| src | Définit la source de l’élément. | src="https://example.com/image.jpg" |
| start | Définit la valeur de départ d’une liste ordonnée (utilisé dans la balise <ol>). | <ol start="30"> |
| style | Définit un style CSS pour un élément HTML (taille, police, couleur, etc.). | style="color:red;text-align:right" |
| target | Définit où ouvrir le lien. | target="_blank" |
| wrap | Définit si le texte doit être renvoyé à la ligne ou non. | wrap="hard" |
| width | Définit la largeur de l’élément. | width="120" |
Voir aussi une liste des attributs globaux HTML qui peuvent être utilisés avec n’importe quel élément HTML.
La liste complète des attributs HTML :
| Attribute | Belongs to | Description |
|---|---|---|
| accept | <input> | Définit les types de fichiers acceptés par le serveur (uniquement pour type="file"). |
| accept-charset | <form> | Définit les encodages de caractères utilisés pour l’envoi du formulaire. |
| accesskey | Global Attributes | Définit une touche de raccourci qui activera un élément. |
| action | <form> | Définit où les données du formulaire doivent être envoyées lorsqu’il est soumis. |
| align | HTML5 ne prend pas en charge cet attribut. | Définit l’alignement par rapport aux éléments voisins. CSS peut être utilisé à la place de cet attribut. |
| alt | <area>, <img>, <input> | Définit un texte alternatif si l’élément d’origine ne s’affiche pas. |
| async | <script> | Définit que le script est exécuté de manière asynchrone. Il est utilisé uniquement pour les scripts externes. |
| autocomplete | <form>, <input> | Définit si l’autocomplétion des éléments <form> ou <input> doit être activée. |
| autofocus | <button>, <input>, <select>, <textarea> | Définit que l’élément doit automatiquement recevoir le focus au chargement de la page. |
| autoplay | <audio>, <video> | Définit que l’audio ou la vidéo commencera à être lu lorsqu’il sera prêt. |
| bgcolor | HTML5 ne prend pas en charge cet attribut. | Définit la couleur d’arrière-plan d’un élément. CSS peut être utilisé à la place de cet attribut. |
| border | HTML5 ne prend pas en charge cet attribut. | Définit la largeur de la bordure d’un élément. CSS peut être utilisé à la place de cet attribut. |
| charset | <meta>, <script> | Définit l’encodage des caractères. |
| checked | <input> | Définit qu’un élément <input> doit être présélectionné au chargement de la page (pour type="checkbox" ou type="radio"). |
| cite | <blockquote>, <del>, <ins>, <q> | Définit une URL expliquant la citation, ou le texte supprimé ou inséré. |
| class | Global Attributes | Définit un ou plusieurs noms de classe pour un élément. |
| color | HTML5 ne prend pas en charge cet attribut. | Définit la couleur du texte d’un élément. CSS peut être utilisé à la place de cet attribut. |
| cols | <textarea> | Définit la largeur visible d’une zone de texte. |
| colspan | <td>, <th> | Définit le nombre de colonnes qu’une cellule de tableau doit occuper. |
| content | <meta> | Donne la valeur liée à l’attribut http-equiv ou name. |
| contenteditable | Global Attributes | Définit si le contenu d’un élément peut être modifié ou non. |
| controls | <audio>, <video> | Définit que les contrôles audio ou vidéo doivent être affichés (par exemple un bouton lecture ou pause, etc.). |
| coords | <area> | Définit les coordonnées de la zone. |
| data | <object> | Définit l’URL de la ressource qui sera utilisée par l’objet. |
| data-* | Global Attributes | Stocke des données personnalisées privées à la page ou à l’application. |
| datetime | <del>, <ins>, <time> | Définit la date et l’heure. |
| default | <track> | Définit que la piste sera activée si les préférences de l’utilisateur n’indiquent pas qu’une autre piste serait plus appropriée. |
| defer | <script> | Définit que le script est exécuté lorsque l’analyse de la page est terminée. Cet attribut est utilisé uniquement pour les scripts externes. |
| dir | Global Attributes | Définit la direction du texte pour le contenu d’un élément. |
| dirname | <textarea>, <input> | Définit que la direction du texte sera envoyée. |
| disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Définit que l’élément spécifié ou le groupe d’éléments doit être désactivé. |
| download | <a>, <area> | Définit que la cible sera téléchargée lorsqu’un utilisateur clique sur l’hyperlien. |
| draggable | Global Attributes | Définit si un élément est déplaçable ou non. |
| dropzone | Global Attributes | Définit si les données glissées sont copiées, déplacées ou liées lorsqu’elles sont déposées. |
| enctype | <form> | Définit comment les données du formulaire doivent être encodées lorsqu’elles sont envoyées au serveur. Cet attribut est utilisé uniquement pour method="post". |
| for | <label>, <output> | Spécifie à quel(s) élément(s) de formulaire une étiquette ou un calcul est lié. |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Définit le nom du formulaire auquel l’élément appartient. |
| formaction | <button>, <input> | Définit où envoyer les données du formulaire lorsqu’il est soumis. Cet attribut est utilisé uniquement pour type="submit". |
| headers | <th>, <th> | Définit une ou plusieurs cellules d’en-tête auxquelles une cellule est associée. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Définit la hauteur de l’élément. |
| hidden | Global Attributes | Définit qu’un élément n’est pas pertinent. |
| high | <meter> | Définit la borne supérieure de la plage représentée par l’élément <meter>. |
| href | <a>, <area>, <base>, <link> | Définit l’URL de la page vers laquelle mène le lien. |
| hreflang | <a>, <area>, <link> | Définit la langue du document lié. |
| http-equiv | <meta> | Donne à l’attribut content un en-tête HTTP pour l’information ou la valeur. |
| id | Global Attributes | Définit un identifiant unique pour un élément. |
| ismap | <img> | Définit une image comme carte d’image côté serveur. |
| kind | <track> | Définit le type de piste textuelle. |
| label | <track>, <option>, <optgroup> | Définit le titre de la piste textuelle. |
| lang | Global Attributes | Définit la langue du contenu d’un élément. |
| list | <input> | Fait référence à un élément <datalist> contenant des options prédéfinies pour un élément <input>. |
| loop | <audio>, <video> | Définit que l’audio ou la vidéo recommencera à chaque fin de lecture. |
| low | <meter> | Définit la plage considérée comme une valeur basse. |
| max | <input>, <meter>, <progress> | Définit la valeur maximale. |
| maxlength | <input>, <textarea> | Définit le nombre maximal de caractères qu’un élément peut contenir. |
| media | <a>, <area>, <link>, <source>, <style> | Définit pour quel média ou appareil le document lié est optimisé. |
| method | <form> | Définit la méthode HTTP qui doit être utilisée lors de l’envoi des données du formulaire. |
| min | <input>, <meter> | Définit une valeur minimale. |
| multiple | <input>, <select> | Définit que l’utilisateur peut saisir plus d’une valeur. |
| muted | <audio>, <video> | Définit que la sortie audio de la vidéo doit être coupée. |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Définit le nom de l’élément. |
| novalidate | <form> | Définit que le formulaire ne doit pas être validé lorsqu’il est soumis. |
| onabort | <audio>, <embed>, <img>, <object>, <video> | Script qui s’exécute lors d’une interruption. |
| onafterprint | <body> | Script qui s’exécute après l’impression du document. |
| onbeforeunload | <body> | Script qui s’exécute lorsque le document est sur le point d’être déchargé. |
| onblur | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément perd le focus. |
| oncanplay | <audio>, <embed>, <object>, <video> | Script qui s’exécute lorsqu’un fichier est prêt à être lu. |
| oncanplaythrough | <audio>, <video> | Script qui s’exécute lorsqu’un fichier peut être lu jusqu’à la fin sans pause pour le tamponnage. |
| onchange | Tous les éléments visibles. | Script qui s’exécute lorsque la valeur de l’élément est modifiée. |
| onclick | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément est cliqué. |
| oncontextmenu | Tous les éléments visibles. | Script qui s’exécute lorsqu’un menu contextuel est déclenché. |
| oncopy | Tous les éléments visibles. | Script qui s’exécute lorsque le contenu de l’élément est copié. |
| oncuechange | <track> | Script qui s’exécute lorsque le repère dans un élément <track> change. |
| oncut | Tous les éléments visibles. | Script qui s’exécute lorsque le contenu de l’élément est coupé. |
| ondblclick | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément est double-cliqué. |
| ondrag | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément est déplacé par glisser-déposer. |
| ondragend | Tous les éléments visibles. | Script qui s’exécute à la fin d’une opération de glisser-déposer. |
| ondragenter | Tous les éléments visibles. | Script qui s’exécute lorsqu’un élément a été déplacé vers une cible de dépôt valide. |
| ondragleave | Tous les éléments visibles. | Script qui s’exécute lorsqu’un élément quitte une cible de dépôt valide. |
| ondragover | Tous les éléments visibles. | Script qui s’exécute lorsqu’un élément est déplacé au-dessus d’une cible de dépôt valide. |
| ondragstart | Tous les éléments visibles. | Script qui s’exécute au début d’une opération de glisser-déposer. |
| ondrop | Tous les éléments visibles. | Script qui s’exécute au début d’une opération de glisser-déposer. |
| ondurationchange | <audio>, <video> | Script qui s’exécute lorsque la durée du média change. |
| onemptied | <audio>, <video> | Script qui s’exécute lorsqu’un événement inattendu se produit et que le fichier devient indisponible. |
| onended | <audio>, <video> | Script qui s’exécute lorsque le média atteint la fin. |
| onerror | <audio>, <video>, <embed>, <object>, <script>, <style>, <body> | Script qui s’exécute lorsqu’une erreur se produit. |
| onfocus | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément reçoit le focus. |
| onhashchange | <body> | Script qui s’exécute lorsque l’ancre change. |
| oninput | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément reçoit une saisie utilisateur. |
| oninvalid | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément est invalide. |
| onkeydown | Tous les éléments visibles. | Script qui s’exécute lorsqu’un utilisateur appuie sur une touche. |
| onkeypress | Tous les éléments visibles. | Script qui s’exécute lorsqu’un utilisateur appuie sur une touche. |
| onkeyup | Tous les éléments visibles. | Script qui s’exécute lorsqu’un utilisateur relâche une touche. |
| onload | <body>, <iframe>, <input>, <img>, <script>, <style>, <link> | Script qui s’exécute lorsque le chargement est terminé. |
| onloadeddata | <audio>, <video> | Script qui s’exécute lorsque les données du média sont chargées. |
| onloadedmetadata | <audio>, <video> | Script qui s’exécute lorsque les métadonnées sont chargées. |
| onloadstart | <audio>, <video> | Script qui s’exécute lorsque le fichier commence à se charger, avant que quoi que ce soit ne soit réellement chargé. |
| onmousedown | Tous les éléments visibles. | Script qui s’exécute lorsqu’un bouton de la souris est enfoncé sur un élément. |
| onmousemove | Tous les éléments visibles. | Script qui s’exécute tant que le pointeur de la souris se déplace au-dessus d’un élément. |
| onmouseout | Tous les éléments visibles. | Script qui s’exécute lorsqu’un pointeur de souris quitte un élément. |
| onmouseup | Tous les éléments visibles. | Script qui s’exécute lorsqu’un bouton de la souris est relâché au-dessus d’un élément. |
| onmouseover | Tous les éléments visibles. | Script qui s’exécute lorsqu’un pointeur de souris se déplace au-dessus d’un élément. |
| onmousewheel | Tous les éléments visibles. | Script qui s’exécute lorsqu’une molette de souris défile au-dessus d’un élément. |
| onoffline | <body> | Script qui s’exécute lorsque le navigateur commence à fonctionner hors ligne. |
| ononline | <body> | Script qui s’exécute lorsque le navigateur commence à fonctionner en ligne. |
| onpagehide | <body> | Script qui s’exécute lorsqu’un utilisateur quitte une page. |
| onpageshow | <body> | Script qui s’exécute lorsqu’un utilisateur accède à une page. |
| onpaste | Tous les éléments visibles. | Script qui s’exécute lorsque du contenu est collé dans un élément. |
| onpause | <audio>, <video> | Script qui s’exécute lorsque le média est mis en pause. |
| onplay | <audio>, <video> | Script qui s’exécute lorsque le média commence à être lu. |
| onplaying | <audio>, <video> | Script qui s’exécute lorsque le média est en cours de lecture. |
| onpopstate | <body> | Script qui s’exécute lorsque l’historique des fenêtres change. |
| onprogress | <audio>, <video> | Script qui s’exécute lorsque le navigateur est en train de récupérer les données du média. |
| onratechange | <audio>, <video> | Script qui s’exécute lorsque la vitesse de lecture change. |
| onreset | <form> | Script qui s’exécute lorsqu’un bouton de réinitialisation dans un formulaire est cliqué. |
| onresize | <body> | Script qui s’exécute lorsque la fenêtre du navigateur est redimensionnée. |
| onscroll | Tous les éléments visibles. | Script qui s’exécute lorsque la barre de défilement d’un élément est en cours de défilement. |
| onsearch | <input> | Script qui s’exécute lorsque l’utilisateur écrit quelque chose dans un champ de recherche. |
| onseeked | <audio>, <video> | Script qui s’exécute lorsque l’attribut seeking est défini sur false, indiquant que la recherche est terminée. |
| onseeking | <audio>, <video> | Script qui s’exécute lorsque l’attribut seeking est défini sur true et indique que la recherche est active. |
| onselect | Tous les éléments visibles. | Script qui s’exécute lorsque l’élément est sélectionné. |
| onstalled | <audio>, <video> | Script qui s’exécute lorsque le navigateur ne peut pas récupérer les données du média pour certaines raisons. |
| onstorage | <body> | Script qui s’exécute lorsqu’une zone Web Storage est mise à jour. |
| onsubmit | <form> | Script qui s’exécute lorsqu’un formulaire est soumis. |
| onsuspend | <audio>, <video> | Script qui s’exécute lorsque la récupération des données du média s’arrête avant son chargement complet. |
| ontimeupdate | <audio>, <video> | Script qui s’exécute lorsque la position de lecture a changé. |
| ontoggle | <details> | Script qui s’exécute lorsque l’élément <details> est ouvert ou fermé. |
| onunload | <body> | Script qui s’exécute lorsqu’une page a été déchargée. |
| onvolumechange | <audio>, <video> | Script qui s’exécute chaque fois que le volume d’une vidéo ou d’un audio est modifié. |
| onwaiting | <audio>, <video> | Script qui s’exécute lorsque le média est en pause, mais qu’il est en même temps censé continuer. |
| onwheel | Tous les éléments visibles. | Script qui s’exécute lorsque la molette de la souris défile vers le haut ou vers le bas au-dessus d’un élément. |
| open | <details> | Définit que les détails doivent être visibles. |
| optimum | <meter> | Définit quelle valeur est la valeur optimale pour la jauge. |
| pattern | <input> | Définit une expression régulière par rapport à laquelle la valeur d’un élément <input> est vérifiée. |
| placeholder | <input>, <textarea> | Définit un court indice décrivant la valeur attendue de l’élément. |
| poster | <video> | Définit une image qui sera affichée pendant le téléchargement de la vidéo, ou jusqu’à ce que l’utilisateur appuie sur le bouton de lecture. |
| preload | <audio>, <video> | Définit si et comment l’audio ou la vidéo doit être chargé lorsque la page se charge. |
| readonly | <input>, <textarea> | Définit que l’élément est en lecture seule. |
| rel | <a>, <area>, <link> | Définit la relation entre les documents actuel et lié. |
| required | <input>, <textarea>, <select> | Définit que l’élément doit être rempli avant que le formulaire ne soit soumis. |
| reversed | <ol> | Définit que l’ordre de la liste doit être décroissant. Par exemple 5,4,3... |
| rows | <textarea> | Définit le nombre visible de lignes dans une zone de texte. |
| rowspan | <td>, <th> | Définit le nombre de lignes qu’une cellule de tableau doit occuper. |
| sandbox | <iframe> | Active un ensemble supplémentaire de restrictions pour le contenu à l’intérieur d’un élément <iframe>. |
| scope | <th> | Définit si une cellule d’en-tête est l’en-tête d’une colonne, d’une ligne ou d’un groupe de colonnes ou de lignes. |
| selected | <option> | Définit qu’une option doit être présélectionnée au chargement de la page. |
| shape | <area> | Définit la forme de la zone. |
| size | <input>, <select>, <embed>, <iframe> | Définit la largeur, en caractères (pour <input>) ou le nombre d’options visibles (pour <select>). |
| sizes | <link>, <img>, <source> | Définit la taille de la ressource liée. |
| span | <col>, <colgroup> | Définit le nombre de colonnes à occuper. |
| spellcheck | Global Attributes | Définit si la grammaire et l’orthographe de l’élément doivent être vérifiées ou non. |
| src | <img>, <source>, <audio>, <video>, <script>, <track>, <embed>, <iframe> | Définit l’URL du fichier multimédia. |
| srcdoc | <iframe> | Définit le contenu HTML de la page qui doit être affichée dans l’élément <iframe>. |
| srclang | <track> | Définit la langue des données textuelles de la piste. |
| srcset | <img>, <source> | Définit l’URL de l’image qui peut être utilisée dans différentes situations. |
| start | <ol> | Définit la valeur de départ d’une liste ordonnée. |
| step | <input> | Définit les intervalles numériques autorisés pour un champ de saisie. |
| style | Global Attributes | Définit un style CSS en ligne pour un élément. |
| tabindex | Global Attributes | Définit l’ordre de tabulation d’un élément. |
| target | <a>, <area>, <base>, <form> | Définit la cible où le document lié doit être ouvert ou où le formulaire doit être soumis. |
| title | Global Attributes | Définit des informations supplémentaires sur un élément. |
| translate | Global Attributes | Définit si le contenu textuel de l’élément doit être traduit par le navigateur ou les outils de traduction. |
| type | <embed>, <input>, <object>, <a>, <button>, <link>, <menu>, <object>, <script>, <source>, <style> | Définit le type d’élément. |
| usemap | <object>, <img> | Définit une image comme carte d’image côté client. |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Définit la valeur de l’élément. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Définit la largeur de l’élément. |
| wrap | <textarea> | Définit comment le texte dans une zone de texte doit être renvoyé à la ligne lorsqu’il est soumis dans un formulaire. |
Voir aussi une liste des attributs globaux HTML qui peuvent être utilisés avec n’importe quel élément HTML.
Practice
Which of the following statements about HTML attributes are true?