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>
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"> |
Définit la langue du document lié. | <a href="https://www.pagedexemple.fr" lang="fr" hreflang="en">Informations en anglais</a> | |
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.
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 !
Articles similaires
Exemple de titre pour votre site Web
La balise HTML style est le meilleur moyen de concevoir l’apparence des différents éléments d’un site Web et de construire ainsi la page de manière optimale. Vous apprendrez ici à quoi sert exactement la balise style, comment elle est structurée et quels attributs HTML sont compatibles. Vous pouvez ainsi facilement intégrer la balise dans votre code.
_target : définir des liens à cibler en HTML
Si vous souhaitez intégrer des liens sur votre site Web, vous pouvez utiliser l’attribut HTML target pour définir le lien ainsi que l’endroit où il doit s’ouvrir. Vous décidez ainsi si les utilisateurs restent sur votre site Internet ou passent au suivant. Vous apprendrez dans cet article détaillé comment utiliser _target et ce à quoi vous devez faire attention.
Élément HTML div : tout ce qu’il faut savoir sur le conteneur div
La balise div n’ayant pas de caractéristiques sémantiques propres, son utilisation n’est recommandée depuis l’introduction de HTML5 que lorsqu’aucun élément plus approprié n’est disponible. Vous apprendrez ici tout ce qu’il faut savoir sur le conteneur div, comment l’utiliser à l’aide d’exemples pratiques et pourquoi div en HTML ne joue pratiquement plus aucun rôle.
Qu’est-ce que le HTML (Hyper Text Markup Language) ?
Comment créer un site Web unique qui vous ressemble ? Grâce au langage de balisage HTML, c’est possible. La particularité du HTML : ce langage Open Source gratuit propose une syntaxe claire et intuitive. Il permet aux débutants de faire leurs premiers pas dans l’univers de la programmation de manière optimale. Nous vous expliquons ce dont le HTML est capable et comment il fonctionne.
