Attributs HTML : aperçu des principaux attributs

Les attributs HTML enregistrent des informations supplémentaires dans une balise HTML. Pour cela, ils sont simplement ajoutés dans le code. En plus des attributs universels, d’événement et de données, il existe de nombreux attributs individuels.

Les attributs HTML sont utilisés pour enregistrer des informations supplémentaires 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 insensibles à la casse. Même si leurs valeurs ne doivent plus nécessairement être placées entre apostrophes, cette façon d’écrire est tout de même recommandé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 correspondants, consultez notre article détaillé sur a href.

Quels sont les attributs HTML disponibles ?

Il existe de nombreux attributs HTML différents, mais depuis l’introduction de HTML5, certaines options ne sont plus disponibles. Les attributs HTML peuvent être répartis en cinq groupes différents :

  • Les attributs universels classiques, qui peuvent être utilisés dans presque tous les éléments et conservent un rôle constant. Ils n’ont toutefois aucun effet sur certains éléments.
  • Les attributs spécifiques qui concernent des éléments individuels et définissent des paramètres pour ceux-ci.
  • Les attributs en vigueur depuis l’introduction de HTML5 ; ceux-ci créent en partie de nouvelles possibilités ou remplacent 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 utilisateurs effectuent une certaine action.
  • Les attributs de données, qui peuvent contenir des informations, mais qui ne sont pas reconnaissables par les utilisateurs.

Attributs universels classiques

Les attributs universels classiques sont autorisés dans la majorité des balises HTML. Ce sont les plus connus :

Attributs HTML Description Exemple
id Sert à identifier 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éterminer par exemple la couleur, la police ou la taille de la police. style="color: blue; font-size: 2em"
title Contient des informations supplémentaires 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éfilement d’un texte de gauche à droite ou inversement. <html dir="ltr">exemple</html>

Attributs HTML spécifiques

Il existe de nombreux attributs HTML spécifiques pour la définition d’éléments individuels. Voici les plus courants :

Attributs HTML Description Exemple
alt Affiche un texte alternatif lorsqu’une image ne peut pas être chargée ou affichée. <img src="https://www.ionos.fr/digitalguide/voiturerouge.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.pagedexemple.fr" title="Plus d’informations ici">
hreflang Définit la langue du document lié. <a href="https://www.pagedexemple.fr" lang="fr" hreflang="en">Informations en anglais</a>
target Définit l’endroit où un lien doit être ouvert. <a href="https://www.pagedexemple.fr" target="_blank">
rel Définit la relation entre la cible et les documents liés. <a rel="nofollow" href="https://www.pagedexemple.fr/">page d’exemple</a>
src Définit l’origine d’un élément. <img src="https://www.ionos.fr/digitalguide/voiturerouge.jpg" alt="La voiture rouge>
autoplay Assure la lecture automatique d’un contenu multimédia ; la plupart des navigateurs peuvent toutefois désactiver 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’introduction de HTML5 et HTML 5.1, certains attributs HTML ont été ajoutés. Il s’agit entre autres de :

Attributs HTML Description Exemple
contenteditable Définit si le contenu d’un élément peut être édité ; les valeurs possibles sont true et false. <p contenteditable="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 autorisées sont auto, eager et lazy. <img src="https://www.ionos.fr/digitalguide/voiturerouge.jpg" alt="La voiture rouge" loading="lazy"
spellcheck Définit si un correcteur orthographique doit être activé ; les valeurs autorisées sont true et false. <p contenteditable="true" spellcheck="false">

Attributs d’événements

Il existe de nombreux attributs HTML différents qui déclenchent des événements dans un navigateur. Les attributs HTML suivants ne sont donc qu’une petite sélection des différents événements qui peuvent être intégrés au HTML via JavaScript.

Attributs HTML Description Exemple
onclick Déclenche un événement en JavaScript 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 JavaScript dès qu’une recherche est saisie dans le masque de recherche. <input type="recherche" onsearch="Exemple de fonction ( ) ">
onerror Peut déclencher un JavaScript en cas d’erreur. <img src="https://www.ionos.fr/digitalguide/voiturerouge.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 JavaScript dès que l’on a sélectionné 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 mentionnés ci-dessus, il existe des attributs propres qui peuvent uniquement être évalués via un script ou utilisés avec CSS. Il est ainsi possible de fournir des informations qui ne sont pas destinées à être présentées visuellement. Ces attributs HTML commencent toujours par data-. Vous pouvez les définir avec setAttribute et les lire avec getAttribute. Les moteurs de recherche n’évaluent pas non plus ces attributs HTML. Seules les lettres minuscules, 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 importants pour presque tous les sites Web

Si vous apprenez le HTML, vous remarquerez rapidement que les attributs HTML sont essentiels à la création d’un site Web optimal et entièrement fonctionnel. 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’utilisation quotidienne. Les informations enregistrées veillent à ce que tous les aspects de votre nouveau site Web fonctionnent en parfaite harmonie. Leur utilisation est particulièrement 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écessaires pour établir votre présence en ligne. Nos experts peuvent également créer un site Web sur mesure Choisissez le modèle le mieux adapté à vos besoins !

Cet article vous a-t-il été utile ?