Bienvenue dans ce nouvel article pour apprendre HTML par les bases ! Si vous ne l’avez pas fait, je vous invite à lire le premier article de cette série et ainsi pouvoir raccrocher les wagons ici. Dans ce premier chapitre, nous avons pu découvrir le concept des balises en HTML, les bases du sens sémantique et les outils pour vous permettre d’écrire du code HTML.
Aujourd’hui, nous en découvrirons davantage sur les balises et la notion d’attributs. Le MDN Web Docs de Mozilla propose une définition formelle de ce qu’est un attribut dans le cadre d’un élément HTML.
Les éléments HTML ont des attributs ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.
Référence des attributs HTML – Mozilla MDN Web Docs
Qu’est-ce qu’un attribut pour un élément HTML ?
Comme nous l’avons découvert précédemment, un élément HTML est constitué par une paire de balises entourant du contenu textuel. Sans être faux, cette explication n’est pas complète. En effet, certaines balises sont dites orphelines en ce sens qu’elles n’encadrent pas de contenu et possèdent une syntaxe un peu particulière. Par exemple, c’est le cas de la balise qui permet d’afficher des images. Découvrons-la tout de suite :
<img>
Cette balise orpheline indique la présence d’une image en HTML, elle se ferme directement, puisqu’elle n’a pas vocation à encadrer du contenu. De fait, elle représente un élément HTML à elle seule. Afin de préciser les paramètres de l’image à afficher, on se sert des attributs d’élément HTML.
Note : Les slashs à la fin d’une balise orpheline avant le chevron fermant ne sont plus recommandés. Ainsi, on écrira <img> et non plus <img /> ou encore <br> à la place de <br />
<img src="/chemin/vers/limage" alt="Le texte alternatif de l'image" title="Le titre de l'image">
src, alt et title sont les attributs spécifiques à la balise <img>. En ce sens que chaque balise possède ses propres attributs, même si certains d’entre-eux peuvent être communs à plusieurs balises. De manière plus formelle, voilà comment on pourrait décrire la syntaxe d’un élément HTML et de ses attributs.
<balise nomAttribut1="valeurAttribut1" nomAttribut2="valeurAttribut2" ...>Contenu</balise> <balise nomAttribut1="valeurAttribut1" nomAttribut2="valeurAttribut2">
La première définition concerne les balises fermantes, la seconde les balises orphelines. Outre cette nuance, on voit que la manière de déclarer un attribut reste la même. Le nom de l’attribut est suivi du signe = puis une paire de double quotes qui encadrent la valeur de l’attribut en question. Maintenant que nous avons introduit les attributs, découvrons l’utilité de ces derniers en détail.
À quoi servent les attributs HTML ?
Et bien, à indiquer des valeurs pardi ! En l’espèce, à enrichir l’élément HTML d’informations de contexte pour rendre son fonctionnement complet, ou enrichi. Concrètement, la balise <img> que nous avons découvert plus haut sera tout bonnement incapable de fonctionner si on ne lui indique pas le chemin de l’image. Dans d’autres cas, le fonctionnement de celle-ci ne sera pas empêché, mais ne sera pas complet. Allez, plutôt que cent discours, la preuve en image
Attributs de l’élément <img>
Ici, la balise <img> est enrichie de quatre de ses attributs : src, width, alt et class. Le premier est nécessaire à son fonctionnement comme nous l’avons indiqué. Il permet d’indiquer la source, comprenez, le chemin vers la ressource à afficher. Il peut s’agir -comme ici- d’une URI, d’un chemin absolu ou chemin relatif. Nous reviendrons sur cette notion qui a trait à l’organisation des fichiers. Grâce à cet attribut, la balise sait où se trouve ce qu’elle doit afficher.
L’attribut width (largeur en anglais) fournit une indication sur la largeur de l’élément. De fait, elle permet d’agir sur l’apparence de l’image affichée. Nous verrons que ce n’est pas l’unique manière de faire.
L’attribut alt permet d’indiquer un texte alternatif. Celui-ci doit décrire l’image affichée.
L’attribut class nous permet de préciser un ou des identifiants de classe. Nous allons bientôt découvrir l’intérêt majeur de cet attribut, sachez qu’il peut être mis en oeuvre sur de nombreuses balises, et que ses valeurs (si elles sont multiples, dans le cas de plusieurs classes), doivent être séparées par des espaces.
Cela fait beaucoup d’informations, rajoutons que certains de ces attributs sont obligatoires (ou requis) ou non :
- en raison de son caractère obligatoire pour le fonctionnement de l’élément, l’attribut src est required (ou mandatory), requis.
- afin d’indiquer un texte alternatif dans le cas où l’image ne pourrait être rendue (lien rompu par exemple) ou la page utilisée au moyen d’un lecteur d’écran, l’attribut alt est également mandatory.
- l’attribut width est quand à lui non-mandatory ou optionnel. Son absence n’aurait pas empêché l’affichage de l’image, celle-ci aurait simplement été rendue en taille réelle. Ici, on impose une contrainte de 300 pour restreindre la largeur de l’image. L’unité est obligatoirement le pixel dans ce cas, et on ne doit pas préciser cette unité entre les quotes. Cela nous permet de dire que les attributs attendent tous une valeur particulière. Dans le cas de width, il s’agit d’un entier.
- en l’absence de l’attribut qui gère la hauteur de l’image (height), le ratio original de l’image est conservé et la mise à l’échelle est faite automatiquement. Si on avait précisé la hauteur, on aurait contraint la déformation de l’image aux valeurs précisées dans les attributs.
Notion d’attributs universels
L’attribut class dont nous venons d’évoquer l’existence est un attribut de type universel en ce sens qu’il est commun à tous les éléments HTML. D’ailleurs, il est présent sur la balise <figure> qui suit. Comme nous l’avons déjà expliqué, l’attribut permet d’indiquer la classe à laquelle appartient l’élément afin de le manipuler en CSS ou en JavaScript.
Toutefois, une subtilité existe concernant les attributs universels. S’ils peuvent s’appliquer à tous les éléments HTML, cela ne veut pas dire pour autant qu’ils ont de l’effet sur chacun d’entre eux. C’est un peu bizarre, mais c’est comme ça. Il faut retenir que leur présence ne gênera pas la validité du code en levant une erreur.
Notion d’attributs spécifiques
Comme nous l’avons vu dans le cas de src pour <img>, certains attributs sont spécifiques à une ou des balises. Dans le cas de src, qui sert à indiquer le chemin vers une ressource, c’est facilement compréhensible. Cet attribut ne sera présent que sur les éléments qui requièrent une source externe. C’est le cas de <img>, <audio>, <video>, <script>…
De la même manière, dans l’exemple, l’élément HTML <blockquote>, qui permet de délimiter un bloc de citation, l’attribut cite fait le lien avec l’élément HTML <cite> qui suit l’élément. En l’espèce, cet attribut commun à quelques éléments similaires détermine l’URI de la source d’une citation.
Enfin, dans le dernier élément <p> de l’exemple CodePen ci-dessus. On découvre un élément HTML de lien hypertexte <a>. Cet élément est fondamental puisque c’est l’un des principe fondateur du web même. Pour définir la cible du lien en question, on aura recourt à l’attribut href. Cet attribut contient la ressource du lien et permet la navigation. En l’espèce, le texte encadré par l’élément devient cliquable grâce à celui-ci et à la présence de l’attribut et le clic dirige vers l’URL contenue en href. Dépourvue de cet attribut, l’élément n’est pas fonctionnel.
Les attributs HTML les plus courants
Découvrons quelques uns des attributs les plus courants, leurs valeurs type ainsi que le rôle qu’ils jouent. Impossible de tout détailler pour que cet article déjà long et riche reste aussi digeste que possible, il faut donc aller fouiller la documentation quand on tombe sur un attribut inconnu. D’ailleurs, c’est un excellent réflexe à acquérir quand l’on se pose des questions sur des aspects du développement.
| Nom attribut | Élement(s) concerné(s) | Rôle de l’attribut | Valeur type |
|---|---|---|---|
| id | Tous – universel | Définit un identifiant unique pour l’élément | id="identifiant" |
| class | Tous – universel | Définit une ou des classes pour l’élément | class="nomClasse1 nomClasse2" |
| href | <a>, <link>, <area>, <base> | Contient l’URL de la ressource liée | href="url/de/la/ressource" |
| target | <a>, <area>, <base>, <form> | Définit le comportement du navigateur au suivi du l’URL. Par exemple, il sera possible d’ouvrir la cible dans une nouvelle fenêtre (valeur « _blank », par défaut) ou dans la même fenêtre (valeur « _self », par défaut) | target="_blank|_self|_top|_parent|nomDuCadre" |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>,<source>, <track>, <video> | Indique l’emplacement de la ressource liée | src="url/de/la/ressource/" |
| method | <form> | Indique la méthode HTTP de traitement du formulaire. Accepte soit GET soit POST, et prend GET par défaut. | method="POST" |
| width, height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Indique la largeur (width) ou la hauteur (height) occupée à l’écran par l’élement | width="400" height="330"note : valeurs en pixel, uniquement des entiers naturels. |
| style | Tous – universel | Permet d’indiquer des directives CSS directement à l’intérieur de l’élément HTML | style="border: 1px solid black ;" |
| title | Tous – universel | Permet de donner un titre à l’élément qui sera généralement affichée par le navigateur sous la forme d’une infobulle | title="monTitre" |
| alt | <img>, <input> <area> | Affiche un titre alternatif lorsque l’élément ne peut être affiché | alt="monTitreAlternatif" |
Il existe énormément d’attributs et certains ne sont même plus utilisés aujourd’hui. On se référera toujours à la documentation officielle pour être sûr d’utiliser les attributs convenablement.
Ce qu’il faut retenir sur les attributs
- Les attributs des éléments HTML permettent d’indiquer des valeurs particulières pour enrichir le comportement de certains éléments, permettre leur manipulation ou tout simplement leur bon fonctionnement. Certains attributs ont des valeurs par défaut qui sont prises en compte si aucune autre valeur n’est précisée. C’est le cas de method pour un élément <form> par exemple.
- Il existe un grand nombre d’attributs donc certains sont obligatoires pour certains éléments spécifiques, d’autres sont optionnels.
- Les attributs peuvent être réservés à un élément en particulier ou commun à d’autres.
- Certains attributs sont dépréciés c’est à dire qu’ils fonctionnement encore, mais ne sont plus conformes aux spécifications de la norme actuelle HTML5.
- Le MDN Web Docs de la fondation Mozilla est l’endroit privilégié pour trouver les informations nécessaires sur les attributs.
Si vous avez des questions sur les attributs en HTML, n’hésitez pas à les poser en commentaire !
0 commentaires