HTML Attributs
Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML.
HTML Attributs
- 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 sont généralement présentés sous forme de paires nom/valeur telles que : name="value"
L'attribut href
La balise <a> définit un lien hypertexte. L'attribut href spécifie l'URL de la page vers laquelle le lien mène :
Vous en apprendrez plus sur les liens dans notre chapitre Liens HTML.
L'attribut src
La balise <img> est utilisée pour intégrer une image dans une page HTML. L'attribut src précise le chemin d'accès à l'image à afficher :
Il existe deux manières de spécifier l'URL dans l'attribut src :
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 protégées par le droit d'auteur. Si vous n'obtenez pas l'autorisation de l'utiliser, vous risquez de violer les lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; il peut être soudainement 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 actuelle. Exemple : src="img_girl.jpg". Si l'URL commence par une barre oblique, elle sera relative au domaine. Exemple : src="/images/img_girl.jpg".
Astuce : Il est presque toujours préférable d'utiliser des URL relatives. Ils ne se briseront pas si vous changez de domaine.
Les attributs de largeur et de hauteur
La balise <img> doit également contenir la width et la height attributs, qui précisent la largeur et la hauteur de l'image (en pixels) :
L'attribut alt
L'attribut alt requis pour la balise <img> spécifie un texte alternatif pour une image, si l'image pour une raison quelconque ne peut pas être affichée. Cela peut être dû à une connexion lente, ou à une erreur dans l'attribut src, ou encore si l'utilisateur utilise un lecteur d'écran.
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">
Try it Yourself »
Vous en apprendrez plus sur les images dans notre chapitre Images HTML.
L'attribut de style
L'attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc.
Vous en apprendrez plus sur les styles dans notre chapitre Styles HTML.
L'attribut lang
Vous devez toujours inclure l'attribut lang dans la balise <html> 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'attribut lang. 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 des codes de langue HTML.
L'attribut du titre
L'attribut title définit des informations supplémentaires sur un élément.
La valeur de l'attribut title sera affichée sous forme d'info-bulle lorsque vous passerez la souris sur l'élément :
Nous vous suggérons de toujours utiliser des attributs minuscules
La norme HTML n'exige pas que les noms d'attributs soient 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 les attributs en minuscules en HTML et exige des attributs en minuscules pour les types de documents plus stricts comme XHTML.
Chez W3Schools, nous utilisons toujours des noms d'attributs en minuscules.
Nous vous suggérons : toujours citer les valeurs d'attribut
La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.
Cependant, le W3C recommande les guillemets en HTML et exige des guillemets pour les types de documents plus stricts comme le XHTML.
Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Mauvais:
<a href=https://www.w3schools.com/html/>Visitez notre tutoriel HTML</a>
Parfois, vous devez utiliser des guillemets. Cet exemple n'affichera pas correctement l'attribut title, car il contient un espace :
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 des 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">
Try it Yourself »
Résumé du chapitre
- Tous les éléments HTML peuvent avoir des attributs
- L'attribut
hrefde<a>spécifie l'URL de la page vers laquelle le lien mène - L'attribut
srcde<img>spécifie le chemin d'accès à l'image à afficher - Les attributs
widthetheightde<img>fournit des informations sur la taille des images - L'attribut
altde<img>fournit un texte alternatif pour une image - L'attribut
styleest utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc. - L'attribut
langde la balise<html>déclare la langue de la page Web - L'attribut
titledéfinit des informations supplémentaires sur un élément.
HTML Exercices
HTML Référence d'attribut
Une liste complète de tous les attributs pour chaque élément HTML, est répertoriée dans notre : Référence des attributs HTML.
HTML - Attributs - Vidéo W3Schools
Cette vidéo explique ce que sont les attributs HTML et comment ils fonctionnent.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
