- Les attributs HTML sont des mots spéciaux qui fournissent des informations supplémentaires sur les éléments ou les attributs sont le modificateur de l’élément HTML.
- Chaque élément ou balise peut avoir des attributs qui définissent le comportement de cet élément.
- Les attributs doivent toujours être appliqués avec la balise de début.
- L’attribut doit toujours être appliqué avec sa paire nom / valeur.
- nom et les valeurs des attributs sont sensibles à la casse et le W3C recommande de les écrire en minuscules uniquement.
- Vous pouvez ajouter plusieurs attributs dans un élément HTML, mais vous devez laisser un espace entre deux attributs.
Syntaxe
<element attribute_name="value">contenu</element>
Exemple
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> C’est un exemple d’attribut</h1>
<p style="height: 50px; color: blue">Il va ajouter un style à un élément</p>
<p style="color: red">Il va modifier la couleur de texte</p>
</body>
</html>
Résultat :
Explication de l’exemple ci-dessus:
<p style="height: 50px; color: blue">Il va ajouter un style à un élément</p>
Dans la déclaration ci-dessus, nous avons utilisé des balises de paragraphe dans lesquelles nous avons appliqué l’attribut style. Cet attribut est utilisé pour appliquer la propriété CSS sur tout élément HTML. Il fournit une hauteur à un élément de paragraphe de 50px et le change en bleu.
<p style="height: 50px; color: blue">Il va ajouter un style à un élément</p>
Dans la déclaration ci-dessus, nous avons à nouveau utilisé l’attribut style dans une balise de paragraphe, qui devient rouge.
L’attribut title
Description: l’attribut title est utilisé comme info-bulle de texte dans la plupart des navigateurs. Il affiche son texte lorsque l’utilisateur déplace le curseur sur un lien ou un texte. Vous pouvez l’utiliser avec n’importe quel texte ou lien pour afficher la description de ce lien ou de ce texte. Dans notre exemple, nous prenons cela avec une balise de paragraphe et une balise de titre.
Exemple
Avec la balise <h1>:
<h1 title="C’est une balise titre">Ceci un exemple d’attribut</h1>
Avec la balise <p>:
<p title = "Ceci est une balise de paragraphe"> Déplacez le curseur sur le paragraphe pour afficher une description</p>
Code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="C’est une balise titre">Ceci est un exemple d’attribut</h1>
<p title="Ceci est une balise de paragraphe">Déplacez le curseur sur le paragraphe pour afficher une description</p>
</body>
</html>
Résultat :
L’attribut href
Description: l’attribut href est l’attribut principal de la balise <a> anchor. Cet attribut donne l’adresse du lien qui est spécifiée dans ce lien. L’attribut href fournit le lien hypertexte. S’il est vide, il restera sur la même page.
Exemple
<a href="https://w3tutoriels.com/html/">Ceci est un lien</a>
L’attribut src
L’attribut src est l’un des attributs importants et obligatoires de l’élément <img>. C’est la source de l’image qui doit être affichée sur le navigateur. Cet attribut peut contenir une image dans le même répertoire ou dans un autre répertoire. Le nom ou la source de l’image doit être correct, sinon le navigateur n’affichera pas l’image.
Exemple
<img src="arbres.jpg" height="500" width="700">
Résultat :
Simples guillemets ou doubles?
Dans ce chapitre, vous avez vu que, nous avons utilisé un attribut avec des guillemets doubles, mais certaines personnes peuvent utiliser des guillemets simples en HTML. Donc, l’utilisation de guillemets simples avec l’attribut HTML est également autorisée. Les deux déclarations suivantes sont absolument correctes.
<a href="https://w3tutoriels.com">Un lien HTML.</a> <a href='https://w3tutoriels.com'>Un lien HTML.</a>
EN HTML5, vous pouvez également ne pas utiliser de guillemets autour des valeurs d’attribut.