Comme son nom l'indique, une balise va... baliser les informations. Chaque information va être entourée d'une balise spécifique, et chaque balise pourra être entouré d'autres balises.
Voyez le code HTML comme étant un document Word avec une barre d'outil. Nous voulons, par exemple, rédiger un document avec un titre principal qui sera "Les frites, plus qu'une passion".
Si vous ouvrez un document Word (ou similaire), vous ajoutez votre texte, et il vous suffit de sélectionner ce texte et de l'identifier en "Titre 1". Automatiquement, votre document Word va afficher un titre principal. Vous ne le voyez pas mais l'outil Word a donc délimité de part et d'autre la partie de texte qui est votre titre principal.
En HTML, c'est pareil, mais vous n'avez pas de barre d'outils, ainsi, "Les frites, plus qu'une passion", deviendra :
<h1>Les frites, plus qu'une passion</h1>
Observez que votre texte est délimité par une ouverture et fermeture : <h1> et </h1>.
<aside> ❓ Quelles sont les balises disponibles ?
La liste complète est disponible ici : https://www.w3schools.com/tags/ref_byfunc.asp D’accord, cela fait beaucoup de balises mais n’ayez craintes. Certaines ne sont plus utilisés, d’autres ne seront utile qu’une fois dans votre vie et une documentation sera toujours disponible pour vous aider, ou vous remémorer la manière dont écrire une balise. Nous verrons dans ce cours comment utiliser les principales balises d’un code HTML.
</aside>
Cette même balise pourra, et d’ailleurs, devra souvent être englobée elle même d’une ou plusieurs autres balises.
Exemple, la balise “body” que nous verrons plus tard est le “parent”, donc englobe ici notre titre principal.
<body>
<h1>Les frites, plus qu'une passion</h1>
</body>
Et cette même balise sera englobée par la balise “html”
<html>
<body>
<h1>Les frites, plus qu'une passion</h1>
</body>
</html>
<html>
<body>
<h1>Les frites, plus qu'une passion</h1>
</body>
</html>
<aside> ❓ Les éléments semblent se décaler, est-ce obligatoire ?
Non obligatoire mais important.
Il s’agit du principe d’ ”indentation”.
L'indentation (ou le retrait) est une méthode de formatage de code consistant à décaler une ligne de code ou un groupe de lignes vers la droite pour améliorer la lisibilité et la compréhension du code. Elle permet de montrer la structure de votre code, les niveaux d'imbrication, les boucles et les conditions.
Il est généralement recommandé d'utiliser une indentation uniforme pour tout le code, généralement 2 ou 4 espaces ou une tabulation, pour que le code soit plus facile à lire et à comprendre pour les autres développeurs.
Nous utiliserons ici, une tabulation.
</aside>
Enfin, une balise aura souvent des éléments de même niveau, nommés “frères/soeurs”
Ici, “head” et “body” sont au même niveau.
<html>
<head>
<title>Le titre "invisible" de ma page</title>
</head>
<body>
<h1>Les frites, plus qu'une passion</h1>
</body>
</html>