Attributs HTML
Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML.
Attributs HTML
- Tous les éléments HTML peuvent avoir des attributs
- Les attributs fournissent des informations supplémentaires sur les éléments
- Les attributs sont toujours spécifiés dans la balise de début
- Les attributs viennent généralement dans des paires nom/valeur comme : nom="valeur"
L'attribut href
La <a>balise définit un lien hypertexte. L'
hrefattribut spécifie l'URL de la page vers laquelle le lien va :
Exemple
<a href="https://www.w3schools.com">Visit W3Schools</a>
Vous en apprendrez plus sur les liens dans notre chapitre Liens HTML .
L'attribut src
La <img>balise est utilisée pour intégrer une image dans une page HTML. L' srcattribut spécifie le chemin vers l'image à afficher :
Exemple
<img src="img_girl.jpg">
Il existe deux manières de spécifier l'URL dans l' src
attribut :
1. URL absolue - Liens vers une image externe hébergée sur un autre site Web. Exemple : src="https://www.w3schools.com/images/img_girl.jpg" .
Remarques : Les images externes peuvent être sous copyright. Si vous n'obtenez pas la permission de l'utiliser, vous enfreignez peut-être les lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; il peut soudainement être supprimé ou modifié.
2. URL relative - Liens vers une image hébergée sur le site Web. Ici, l'URL n'inclut pas le nom de domaine. Si l'URL commence sans barre oblique, elle sera relative à la page en cours. Exemple : src="img_fille.jpg". Si l'URL commence par une barre oblique, elle sera relative au domaine. Exemple : src="/images/img_fille.jpg".
Conseil : Il est presque toujours préférable d'utiliser des URL relatives. Ils ne se briseront pas si vous changez de domaine.
Les attributs largeur et hauteur
La <img>balise doit également contenir les
attributs widthet , qui spécifient la largeur et la hauteur de l'image (en pixels) :
height
Exemple
<img src="img_girl.jpg" width="500" height="600">
L'attribut alt
L' altattribut required pour la <img>
balise spécifie un texte alternatif pour une image, si l'image ne peut pas être affichée pour une raison quelconque. Cela peut être dû à une connexion lente, ou à une erreur dans l' srcattribut, ou si l'utilisateur utilise un lecteur d'écran.
Exemple
<img src="img_girl.jpg" alt="Girl
with a jacket">
Exemple
Voyez ce qui se passe si nous essayons d'afficher une image qui n'existe pas :
<img src="img_typo.jpg" alt="Girl
with a jacket">
Vous en apprendrez plus sur les images dans notre chapitre Images HTML .
L'attribut de style
L' styleattribut est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc.
Exemple
<p style="color:red;">This is a red paragraph.</p>
Vous en apprendrez plus sur les styles dans notre chapitre Styles HTML .
L'attribut lang
Vous devez toujours inclure l' langattribut à l'intérieur de la <html>balise, pour déclarer la langue de la page Web. Ceci est destiné à aider les moteurs de recherche et les navigateurs.
L'exemple suivant spécifie l'anglais comme langue :
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Les codes de pays peuvent également être ajoutés au code de langue dans l' lang
attribut. Ainsi, les deux premiers caractères définissent la langue de la page HTML, et les deux derniers caractères définissent le pays.
L'exemple suivant spécifie l'anglais comme langue et les États-Unis comme pays :
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Vous pouvez voir tous les codes de langue dans notre Référence de code de langue HTML .
Le titre Attribut
L' titleattribut définit des informations supplémentaires sur un élément.
La valeur de l'attribut title s'affichera sous forme d'info-bulle lorsque vous passerez la souris sur l'élément :
Exemple
<p title="I'm a tooltip">This is a paragraph.</p>
Nous vous suggérons de toujours utiliser des attributs en minuscules
La norme HTML n'exige pas de noms d'attributs en minuscules.
L'attribut title (et tous les autres attributs) peut être écrit en majuscules ou en minuscules comme title ou TITLE .
Cependant, le W3C recommande des attributs en minuscules dans HTML et exige des attributs en minuscules pour des types de documents plus stricts comme XHTML.
Chez W3Schools, nous utilisons toujours des noms d'attributs en minuscules.
Nous vous suggérons de toujours citer les valeurs d'attribut
La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.
Cependant, le W3C recommande des guillemets en HTML et exige des guillemets pour des types de documents plus stricts comme XHTML.
Bon:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Mal:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Parfois, vous devez utiliser des guillemets. Cet exemple n'affichera pas correctement l'attribut title, car il contient un espace :
Exemple
<p
title=About W3Schools>
Chez W3Schools, nous utilisons toujours des guillemets autour des valeurs d'attribut.
Citations simples ou doubles ?
Les guillemets doubles autour des valeurs d'attribut sont les plus courants en HTML, mais les guillemets simples peuvent également être utilisés.
Dans certaines situations, lorsque la valeur de l'attribut elle-même contient des guillemets doubles, il est nécessaire d'utiliser des guillemets simples :
<p title='John "ShotGun" Nelson'>
Ou vice versa:
<p title="John 'ShotGun' Nelson">
Résumé du chapitre
- Tous les éléments HTML peuvent avoir des attributs
- L'
hrefattribut de<a>spécifie l'URL de la page vers laquelle le lien va - L'
srcattribut de<img>spécifie le chemin vers l'image à afficher - Les attributs
widthet fournissent des informations sur la taille des imagesheight<img> - L'
altattribut de<img>fournit un texte alternatif pour une image - L'
styleattribut est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc. - L'
langattribut de la<html>balise déclare la langue de la page Web - L'
titleattribut définit des informations supplémentaires sur un élément
Exercices HTML
Référence des attributs HTML
Une liste complète de tous les attributs de chaque élément HTML est répertoriée dans notre : HTML Attribute Reference .