Anatomie d’une balise HTML

Ce qu’il faut absolument comprendre avant de se jeter dans le bain, c’est la structure standard d’une balise HTML. Tout d'abord, on va considérer que l'ensemble des balises respectent la même structure (ce qui n’est malheureusement pas vrai, il existe quelques exceptions que nous aurons l’occasion de voir tout au long de cette formation).

Structure classique d’une balise

La très grande majorité des balises s’ouvrent et se ferment à l’aide d’une balise dite ‘ouvrante’ <balise> et d’une balise ‘fermante’ </balise>. Les balises doivent toujours être rédigées en minuscules, on trouve malheureusement certains vieux tutoriels sur internet proposant du code rédigé avec des balises écrites en majuscules, qui témoigneront du temps qui passe.

On remarque également que la balise fermante possède un / en plus, situé avant le mot clé constituant la balise. (attention, la balise <balise> n’existe pas en HTML et ne me sert que d’exemple pour présenter la logique d’ouverture et de fermeture). Voici un réel usage avec la balise <p> :

<p>Je débute ma formation HTML</p>

Dans l’exemple ci-dessus, la balise <p> permet de rédiger un paragraphe sur une page web. On remarque que la balise s’ouvre et se ferme, et que le contenu à afficher se situe entre l’ouverture et la fermeture de la balise.

Un autre exemple légèrement différent avec cette fois une balise permettant de créer un lien :

<a href="https://ronan-hello.fr">Aller sur le site</a>

Cette balise <a> possède un attribut href qui a pour valeur "https://ronan-hello.fr". Il est possible d’ajouter des informations à une balise à l’aide d’attributs comme celui-ci. Certains attributs sont obligatoires, d’autres optionnels suivant les balises.

Vous retrouverez l’ensemble de ces informations sur la documentation du langage que vous pouvez consulter ici : https://developer.mozilla.org/fr/docs/Web/HTML. N’hésitez surtout pas à utiliser plusieurs ressources pour vous former.

<img src="https://ronan-hello.fr/images/chaton.webp" alt="Un chaton">

On remarque ici que la balise <img> qui permet d’afficher une image ne possède pas de balise fermante, mais deux attributs. Cette balise fait donc partie des exceptions. La balise image, dont le fonctionnement est détaillé dans un épisode qui lui est entièrement consacré, fonctionne en ajoutant le chemin vers l’image directement dans l’attribut src de la balise. L’attribut alt, quant à lui, sert à ajouter un texte alternatif qui s'affiche si le chemin de l’image n’est pas correct, et donc qu'elle ne s'affiche pas.

Il existe plusieurs exceptions dans les balises, par exemple, les balises <meta>, <input>, <link>, <br>, <hr> fonctionnent comme la balise <img>, elles ne possèdent pas de balise fermante. Il faudra donc bien faire attention lors de leur rédaction à ne pas commettre d’erreurs. A chaque fois que nous allons croiser ce type de balise, je ne manquerai pas de vous le signaler, ne vous en faites pas.

Des balises dans des balises

Nous avons vu très brièvement des structures de balises assez simple. mais comme vous pouvez vous en douter, ces balises ne sont pas seules dans une page web, il y’a des balises, plus génériques, qui ne servent qu'à définir une structure à votre page, à donner de la profondeur à vos documents.

On rédige un document HTML complet en imbriquant des balises HTML les unes dans les autres, comme ceci :

<div>
<h1>Mon super titre</h1>
<p>Un paragraphe de texte pour que vous compreniez la logique</p>
</div>

Ici, on remarque que la balise div possède deux balises enfants, la balise <h1> et la balise <p> qui sont au même niveau de profondeur. On va pouvoir affiner les zones de notre site en balisant proprement chaque élément, en imbriquant les informations les une dans les autres afin de leur donner du sens. Par exemple, le contenu textuel d’un article, (en réalité une balise <p>) peut se situer dans une balise <article> qui est probablement dans une autre balise <div> ou encore <main> et ainsi de suite. Il est bien entendu possible de mettre plusieurs balises sur un même niveau.

Imaginez une structure HTML légèrement plus étoffé que ce que l’on a pu voir jusqu’ici :

<main>
<section>
<div>
<h1>Mon super titre</h1>
<p>Un paragraphe de texte pour que vous compreniez la logique</p>
</div>
</section>
</main>

Très vite, la rédaction et la lecture des balises peut devenir un fouillis complexe (et encore, ici ce n’est rien croyez-moi), c’est pour cette raison que l’on indente le code. L’indentation est une technique qui vise à rendre le code plus lisible en espaçant les niveaux de profondeurs de balises à l’aide d’espaces ou de tabulations (ne rentrez pas dans ce débat, des générations de développeurs se battent pour savoir s’il faut mettre 4 espaces ou une tabulation… #teamTabulation). Le code précédent deviendra alors celui-ci, largement plus lisible et facile à maintenir sur le long terme :

<main>
    <section>
        <div>
            <h1>Mon super titre</h1>
            <p>Un paragraphe de texte pour que vous compreniez la logique</p>
        </div>
    </section>
</main>

Je vous vois déjà souffler à l’idée de maintenir votre indentation correctement, mais rassurez-vous, les logiciels que vous allez utiliser pour rédiger le code HTML s’occupent de tout cela pour vous ! Et si justement vous souhaitez savoir comment bien préparer votre ordinateur pour enfin commencer à coder votre première page web, je vous invite bien évidemment à lire la suite de cette formation HTML. Mais avant, nous devons parler d’attributs universels.

Les attributs universels

Nous avons pu voir que certaines balises possèdent des attributs, qui leur permettent d’avoir des comportements différents, d’aller plus loin dans leur configuration. En réalité, presque toutes les balises HTML peuvent avoir des attributs, et certains attributs ne sont pas spécifiques aux balises. Ces attributs sont alors qualifiés d’attributs universels.

Il en existe un certain nombre, mais pour éviter de vous noyer dès le départ, nous allons en lister quelques-uns afin de comprendre leur logique. Si toutefois vous souhaitez connaitre la liste complète, voici un lien vers la documentation MDN : https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels#Liste_des_attributs_universels

L’attribut class

L’un des attributs le plus couramment utilisé est surement l’attribut class. Cet attribut permet de donner une sorte d’étiquette à la balise qui le porte, cela permettra de lui appliquer du style visuel par la suite. L’attribut class peut prendre un ou plusieurs mots en valeur, chaque mot étant une étiquette différente. C’est un attribut qui permet de faire une passerelle entre le langage HTML et le CSS. L’une des particularités de l’attribut class est que sa valeur peut être définie plusieurs fois sur une même page.

L’attribut id

Cet attribut permet de donner un identifiant à une balise HTML. Tout comme l’attribut class, l’id permet de retrouver facilement une balise pour lui appliquer un style CSS, mais cet attribut lui confère également d’autres fonctions. L’attribut id d’une balise peut aussi servir pour créer une ancre (un lien) vers une zone spécifique d’une page, ou encore lier un petit libellé à un champ de formulaire, là encore, nous verrons tout cela en détail dans le chapitre consacré à la création des formulaires HTML. Contrairement à l'attribut class, la valeur de l'attribut id doit être unique.

L’attribut title

L’attribut title est quant à lui beaucoup plus simple à manipuler. Lorsqu’il est appliqué sur une balise HTML, il permet d’afficher un petit texte dans une infobulle quand l’utilisateur laisse le pointeur de sa souris sur la balise en question. Voici un cas d’usage et son exemple visuel

<img src="images/chaton.webp" alt="un chaton" title="Un petit chaton très mignon">

L’attribut data-\*

Le dernier attribut universel dont j’ai choisi de vous parler est l’attribut data-*. C’est un attribut multifonction qui permet de renseigner tout type de valeur à une balise. En réalité, il faudra remplacer le symbole * par le mot clé de votre choix. Par exemple, vous pouvez créer vous-même votre propre attribut en ajoutant data-year="2020" à une balise. Cela permet d’ajouter des données à une balise HTML, données qu’il est possible de manipuler et de récupérer avec d’autres langages de programmation comme le JavaScript. Mais au lieu de vous perdre avec des choses qui peuvent devenir complexes, je vous propose d’aller directement à la suite et de voir comment configurer correctement votre ordinateur pour commencer à coder vos premières balises HTML 5 !