Anatomie d’une balise
Une page HTML est constituée d’un ensemble de balises sémantiques, visant à aider les utilisateurs à mieux comprendre la hiérarchisation des contenus.
Elles suivent toutes la même spécification.
Le tag
Le tag correspond au nom de la balise. Il en existe plusieurs dizaines qui répondent à différents cas d’utilisation, que nous étudierons un peu plus loin dans cette formation.
On parle alors de balise ouvrante <h1> et de balise fermante </h1>, qui permettent de délimiter le début et la fin d’une balise.
AttentionCertaines balises sont dites “auto-fermantes”, et donc ne possèdent pas de balise fermante à proprement parler. Dans ce cas précis, la balise s’écrira de la manière suivante :
<img />. Le slash est optionnel, mais permet de repérer visuellement qu’il s’agit d’une balise auto-fermante.
Les attributs
Chaque élément HTML peut posséder un ou plusieurs attributs, soit universels, soit propres à lui-même.
Les attributs sont obligatoirement placés à l’intérieur de la balise ouvrante, et doivent être séparés d’espaces :
Les attributs comme ci-dessus sont appelés “attributs booléens” car ils ne possèdent pas de valeur. Néanmoins il est tout à fait possible d’ajouter une valeur à un attribut de cette manière :
TILIl est possible d’omettre les guillemets autour de la valeur d’un attribut si et seulement si la valeur ne contient pas d’espaces. Pour autant, ce n’est recommandé par souci de cohérence globale.
Échapper les guillemetsDans le cas où la valeur de votre attribut contiendrait aussi des doubles guillemets
"", vous devrez remplacer les""qui entourent votre valeur d’attribut par des simples guillemets''.
Les catégories d'éléments
Chaque balise appartient à une typologie spécifique, qui influe sur son comportement au sein de la page. Auparavant il existait seulement deux typologies :
- les éléments de bloc, qui occupent par défaut 100% de la largeur du parent
- les éléments inline, qui occupent par défaut seulement la largeur de leur contenu
Mais par souci de mauvaise interprétation des concepts CSS du même nom, la spécification a revu ces termes et les a élargis : catégories de contenu.
L’important à retenir est qu’en fonction de la typologie d’un élément, il n’autorisera que certaines balises à l’intérieur de lui-même : par exemple, un élément <p> ne peut pas contenir un élément <section>.
Les event listeners
Il est possible d’écouter des événements JavaScript directement dans le HTML via des attributs on*. Il en existe une multitude, en fait autant que nativement en JS.
Néanmoins il est préférable de les utiliser avec parcimonie, et de préférer écouter les événements dans un fichier JavaScript pour respecter la chaîne de responsabilité et la “separation of concerns”.