Les attributs HTML en­re­gistrent des in­for­ma­tions sup­plé­men­taires dans une balise HTML. Pour cela, ils sont sim­ple­ment ajoutés dans le code. En plus des attributs uni­ver­sels, d’événement et de données, il existe de nombreux attributs in­di­vi­duels.

Les attributs HTML sont utilisés pour en­re­gis­trer des in­for­ma­tions sup­plé­men­taires sur les éléments dans une balise HTML. Ils se composent d’un nom et d’une valeur. Les attributs HTML se trouvent dans la balise ouvrante et sont in­sen­sibles à la casse. Même si leurs valeurs ne doivent plus né­ces­sai­re­ment être placées entre apos­trophes, cette façon d’écrire est tout de même re­com­man­dée afin d’éviter les erreurs. Voici comment les attributs HTML sont intégrés dans le code :

<Élément Nom de l’attribut="Valeur de l’attribut"/>

Si vous souhaitez insérer un lien sur un site Web, vous pouvez le faire à l’aide de la balise

et de l’attribut href. Voici le résultat :

<!DOCTYPE html>
<html>
<head>
<title>Exemple de titre</title>
</head>
<body>
<a href="https://www.exemple.fr">Cliquez ici pour accéder à la page d’exemple</a>
</body>
</html>
Conseil

Pour en savoir plus sur les liens internes et externes via HTML et les attributs cor­res­pon­dants, consultez notre article détaillé sur a href.

Quels sont les attributs HTML dis­po­nibles ?

Il existe de nombreux attributs HTML dif­fé­rents, mais depuis l’in­tro­duc­tion de HTML5, certaines options ne sont plus dis­po­nibles. Les attributs HTML peuvent être répartis en cinq groupes dif­fé­rents :

  • Les attributs uni­ver­sels clas­siques, qui peuvent être utilisés dans presque tous les éléments et con­ser­vent un rôle constant. Ils n’ont toutefois aucun effet sur certains éléments.
  • Les attributs spé­ci­fiques qui con­cer­nent des éléments in­di­vi­duels et dé­fi­nis­sent des pa­ra­mètres pour ceux-ci.
  • Les attributs en vigueur depuis l’in­tro­duc­tion de HTML5 ; ceux-ci créent en partie de nouvelles pos­si­bi­li­tés ou rem­pla­cent d’anciens attributs HTML.
  • Les attributs d’événement, qui dé­clenchent un événement défini pour un élément dès que les uti­li­sa­teurs ef­fec­tuent une certaine action.
  • Les attributs de données, qui peuvent contenir des in­for­ma­tions, mais qui ne sont pas re­con­nais­sables par les uti­li­sa­teurs.

Attributs uni­ver­sels clas­siques

Les attributs uni­ver­sels clas­siques sont autorisés dans la majorité des balises HTML. Ce sont les plus connus :

Attributs HTML Des­crip­tion Exemple
id Sert à iden­ti­fier de manière précise un élément HTML. id="exemple"
class Permet d’attribuer un élément à une ou plusieurs classes. class="autos"
style Définit le style d’un élément HTML et peut ainsi dé­ter­mi­ner par exemple la couleur, la police ou la taille de la police. style="color: blue; font-size: 2em"
title Contient des in­for­ma­tions sup­plé­men­taires sur le contenu d’un élément ; celles-ci s’affichent par exemple dans une fenêtre séparée lorsqu’on passe la souris sur l’élément. title="exemple de texte"
lang Définit la langue de base d’un document. <html lang="fr">
dir Définit le sens de dé­fi­le­ment d’un texte de gauche à droite ou in­ver­se­ment. <html dir="ltr">exemple</html>

Attributs HTML spé­ci­fiques

Il existe de nombreux attributs HTML spé­ci­fiques pour la dé­fi­ni­tion d’éléments in­di­vi­duels. Voici les plus courants :

Attributs HTML Des­crip­tion Exemple
alt Affiche un texte al­ter­na­tif lorsqu’une image ne peut pas être chargée ou affichée. <img src="https://www.ionos.fr/digitalguide/voi­tu­re­rouge.jpg" alt="Voiture de sport rouge à un feu.">
height Définit la hauteur d’un élément en px. <img alt="la voiture rouge" height="220">
width Définit la largeur d’un élément en px. <img alt="la voiture rouge" width="220">
href Définit l’URL d’un lien. <a href="https://www.pa­ge­dexemple.fr" title="Plus d’in­for­ma­tions ici">
hreflang Définit la langue du document lié. <a href="https://www.pa­ge­dexemple.fr" lang="fr" hreflang="en">In­for­ma­tions en anglais</a>
target Définit l’endroit où un lien doit être ouvert. <a href="https://www.pa­ge­dexemple.fr" target="_blank">
rel Définit la relation entre la cible et les documents liés. <a rel="nofollow" href="https://www.pa­ge­dexemple.fr/">page d’exemple</a>
src Définit l’origine d’un élément. <img src="https://www.ionos.fr/digitalguide/voi­tu­re­rouge.jpg" alt="La voiture rouge>
autoplay Assure la lecture au­to­ma­tique d’un contenu mul­ti­mé­dia ; la plupart des na­vi­ga­teurs peuvent toutefois dé­sac­ti­ver ce paramètre. <video autoplay>
poster Définit une image d’aperçu lorsque vous intégrez une vidéo en HTML. <video controls poster="apercu.png">

Nouveaux attributs depuis HTML5

Depuis l’in­tro­duc­tion de HTML5 et HTML 5.1, certains attributs HTML ont été ajoutés. Il s’agit entre autres de :

Attributs HTML Des­crip­tion Exemple
con­ten­te­di­table Définit si le contenu d’un élément peut être édité ; les valeurs possibles sont true et false. <p con­ten­te­di­table="false">
hidden Attribut universel qui peut masquer un élément. <p hidden> Ce texte sera masqué </p>
dropzone Définit si un élément est copié (copy), lié (link) ou déplacé (move) par glisser-déposer. <p dropzone="move">
draggable Attribut universel qui définit si le contenu d’un élément peut être glissé et déposé. <p draggable="false">
loading Définit la manière dont les médias externes sont chargés ; les valeurs au­to­ri­sées sont auto, eager et lazy. <img src="https://www.ionos.fr/digitalguide/voi­tu­re­rouge.jpg" alt="La voiture rouge" loading="lazy"
spell­check Définit si un cor­rec­teur or­tho­gra­phique doit être activé ; les valeurs au­to­ri­sées sont true et false. <p con­ten­te­di­table="true" spell­check="false">

Attributs d’évé­ne­ments

Il existe de nombreux attributs HTML dif­fé­rents qui dé­clenchent des évé­ne­ments dans un na­vi­ga­teur. Les attributs HTML suivants ne sont donc qu’une petite sélection des dif­fé­rents évé­ne­ments qui peuvent être intégrés au HTML via Ja­vaS­cript.

Attributs HTML Des­crip­tion Exemple
onclick Déclenche un événement en Ja­vaS­cript via un clic de souris. <button onclick="Exemple de fonction ( ) ">Cliquez ici</button>
onscroll Se déclenche lorsqu’on fait défiler l’élément. <div onscroll="Exemple de fonction ( ) ">
onkeydown Se déclenche lorsqu’on appuie sur une touche. <input type="texte" onkeydown=Exemple de fonction ( ) ">
onsearch Déclenche un Ja­vaS­cript dès qu’une recherche est saisie dans le masque de recherche. <input type="recherche" onsearch="Exemple de fonction ( ) ">
onerror Peut dé­clen­cher un Ja­vaS­cript en cas d’erreur. <img src="https://www.ionos.fr/digitalguide/voi­tu­re­rouge.jpg" onerror="Exemple de fonction ( ) ">
oncopy Se déclenche lorsqu’un texte est copié. <input type="texte" oncopy="Exemple de fonction ( ) " value="Copiez ce texte">
onselect Déclenche un Ja­vaS­cript dès que l’on a sé­lec­tionné un texte dans l’élément input. <input type="texte" onselect="Exemple de fonction ( ) " value="Exemple de texte">

Attributs de données

En plus des attributs HTML men­tion­nés ci-dessus, il existe des attributs propres qui peuvent uni­que­ment être évalués via un script ou utilisés avec CSS. Il est ainsi possible de fournir des in­for­ma­tions qui ne sont pas destinées à être pré­sen­tées vi­suel­le­ment. Ces attributs HTML com­men­cent toujours par data-. Vous pouvez les définir avec se­tAt­tri­bute et les lire avec ge­tAt­tri­bute. Les moteurs de recherche n’évaluent pas non plus ces attributs HTML. Seules les lettres mi­nus­cules, les chiffres, le tiret, le point et les deux points sont autorisés pour les attributs de données.

<article
id="Exemples d’éléments"
data-columns="5"
data-index-number="1385"
data-parent="html5">
</article>

En résumé : les attributs HTML sont im­por­tants pour presque tous les sites Web

Si vous apprenez le HTML, vous re­mar­que­rez ra­pi­de­ment que les attributs HTML sont es­sen­tiels à la création d’un site Web optimal et en­tiè­re­ment fonc­tion­nel. La meilleure façon de procéder, et la plus sûre, est d’utiliser les attributs HTML, surtout si vous avez besoin de fonctions qui s’écartent de l’uti­li­sa­tion quo­ti­dienne. Les in­for­ma­tions en­re­gis­trées veillent à ce que tous les aspects de votre nouveau site Web fonc­tion­nent en parfaite harmonie. Leur uti­li­sa­tion est par­ti­cu­liè­re­ment simple avec un éditeur HTML.

Conseil

Un site Web qui vous convient : avec l’outil de création de site Internet de IONOS, vous disposez de tous les outils né­ces­saires pour établir votre présence en ligne. Nos experts peuvent également créer un site Web sur mesure Choi­sis­sez le modèle le mieux adapté à vos besoins !

Aller au menu principal