3. Structurer le code d’une page HTML

Nous avons appris à utiliser les balises, et notre code ressemble désormais plus à du HTML qu’à du simple texte. 

Mais il y a une chose que nous n’avons pas encore abordée, ce sont les informations de base de la page.

Ce que j’entends par là, c’est le titre et l’icône par exemple.

(TODO: refaire un screen de meilleur qualité)

C’est pourquoi on va distinguer deux parties dans le code : le “head”, où nous allons définir ce genre de choses, et le “body”, où il y aura le contenu à proprement parler de notre page, comme ce que nous avons fait dans l’étape précédente.

En réalité, le “head” et le “body” sont aussi des balises dans lesquelles nous allons en imbriquer d’autres. Voici, pour enfin donner un exemple, un fichier HTML bien structuré :

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <p>Bienvenue sur mon Pokédex</p>
  </body>
</html>

Ouh là-là, mais c’est compliqué tout ça ! Je reconnais les balises “head” et “body”, mais qu’est-ce que c’est, le reste ? 🤔

Nous avons effectivement notre petit paragraphe, qui est, comme promis, imbriqué dans la balise “body”. À coté, il y a le “head”, qui pour l’instant est vide, mais on peut remarquer que les 2 sont elles-mêmes imbriquées dans une “grande” balise “html”. C’est en effet dans cette balise qu’on écrit toujours le code HTML. C’est une convention, et elle contribue au bon référencement de notre site.

Le référencement, c’est la place que va avoir votre site quand on va faire une recherche sur Internet. Par exemple, dès que vous tapez “Napoléon” sur Google, le premier résultat affiché sera Wikipédia. C’est parce que ce site a un excellent référencement.

Enfin, nous avons, tout en haut du fichier, un “<DOCTYPE html>”. C’est une balise très complexe : son nom est en deux parties, et elle est toute seule ; Mais ne vous inquiétez pas, c’est inutile de comprendre comment elle est construite, ce qui compte c’est de savoir à quoi elle sert. En fait, elle permet d’indiquer au navigateur que nous sommes bien en HTML5, et non pas dans une ancienne version. Tout comme la balise “html”, c’est aussi une convention, qui permet de bien référencer notre site. Il faut toujours la mettre, c’est comme ça.

Après cette étape un peu complexe, on se rend compte, certes, que le code de notre Pokédex est plus “conventionnel” et structuré, mais visuellement, la page n’a pas changé. Ne vous inquiétez pas, nous allons nous en occuper dans la prochaine étape, mais celle-ci était vraiment importante et nécessaire, bien que laborieuse.