HTML Attributs

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 d'ouverture
  • Les attributs viennent généralement par paires nom/valeur, comme : nom="valeur"

L'attribut href

La <a> balise définit un hyperlien. L'attribut href spécifie l'URL de la page vers laquelle le lien mène :

Exemple

<a href="https://www.formation-ti.org">Visitez formation-ti.org</a>
Essayez-le vous-même »

Vous en apprendrez plus sur les liens dans notre chapitre sur les liens HTML .

L'attribut src

La <img> balise est utilisée pour intégrer une image dans une page HTML. L'attribut src spécifie le chemin de l'image à afficher :

Exemple

<img src="img_girl.jpg">
Essayez-le vous-même »

Il existe deux façons de spécifier l'URL dans l'attribut src :

1. URL absolue - Lien vers une image externe hébergée sur un autre site Web. Exemple : src="https://www.formation-ti.org/images/img_girl.jpg" .

Remarques : Les images externes peuvent être protégées par des droits d'auteur. Si vous n'obtenez pas la permission de les utiliser, vous pourriez enfreindre les lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; elles peuvent être soudainement supprimées ou modifiées.

2. URL relative - Lien 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".

Conseil : Il est presque toujours préférable d'utiliser des URL relatives. Elles ne se casseront pas si vous changez de domaine.

Les attributs width et height

La <img> balise doit également contenir les attributs width et height , qui spécifient la largeur et la hauteur de l'image (en pixels) :

Exemple

<img src="img_girl.jpg" width="500" height="600">
Essayez-le vous-même »

L'attribut alt

L'attribut requis alt pour la <img> balise spécifie un texte alternatif pour une image, si celle-ci ne peut pas être affichée pour une raison quelconque. Cela peut être dû à une connexion lente, à une erreur dans l'attribut src , ou si l'utilisateur utilise un lecteur d'écran.

Exemple

<img src="img_girl.jpg" alt="Fille avec une veste">
Essayez-le vous-même »

Exemple

Voyez ce qui se passe si nous essayons d'afficher une image qui n'existe pas :

<img src="img_typo.jpg" alt="Fille avec une veste">
Essayez-le vous-même »

Vous en apprendrez plus sur les images dans notre chapitre sur les images HTML .

L'attribut style

L'attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, et plus encore.

Exemple

<p style="color:red;">Ceci est un paragraphe rouge.</p>
Essayez-le vous-même »

Vous en apprendrez plus sur les styles dans notre chapitre sur les styles HTML .

L'attribut lang

Vous devez toujours inclure l'attribut lang à l'intérieur de la balise <html> , pour déclarer la langue de la page Web. Cela 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>

Des 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 title

L'attribut title définit des informations supplémentaires sur un élément.

La valeur de l'attribut title sera affichée comme une info-bulle lorsque vous survolez l'élément :

Exemple

<p title="Je suis une info-bulle">Ceci est un paragraphe.</p>
Essayez-le vous-même »

Nous suggérons : Toujours utiliser des attributs en minuscules

La norme HTML n'exige pas des noms d'attributs en minuscules.

L'attribut title (et tous les autres attributs) peut être écrit avec des majuscules ou des 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.

Sur formation-ti.org, nous utilisons toujours des noms d'attributs en minuscules.

Nous suggérons : Toujours mettre des guillemets autour des valeurs d'attribut

La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.

Cependant, le W3C recommande des guillemets dans HTML, et exige des guillemets pour des types de documents plus stricts comme XHTML.

Bon :

<a href="https://www.formation-ti.org/html/">Visitez notre tutoriel HTML</a>

Mauvais :

<a href=https://www.formation-ti.org/html/>Visitez notre tutoriel HTML</a>

Parfois, vous devez utiliser des guillemets. Cet exemple ne va pas afficher correctement l'attribut title, car il contient un espace :

Exemple

<p title="Description de formation-ti.org">
Essayez-le vous-même »

Sur formation-ti.org, nous utilisons toujours des guillemets autour des valeurs d'attribut.

Guillemets 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">
Essayez-le vous-même »

Résumé du chapitre

  • Tous les éléments HTML peuvent avoir des attributs
  • L'attribut href de <a> spécifie l'URL de la page vers laquelle le lien mène
  • L'attribut src de <img> spécifie le chemin de l'image à afficher
  • Les attributs width et height de <img> fournissent des informations de taille pour les images
  • L'attribut alt de <img> fournit un texte alternatif pour une image
  • L'attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, et plus encore
  • L'attribut lang de la balise <html> déclare la langue de la page Web
  • L'attribut title définit des informations supplémentaires sur un élément

Référence des attributs HTML

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 .

Vidéo : Attributs HTML