Structure d'une page en HTML

Pour créer une page HTML, il nous faut certains éléments que nous allons expliquer ici.

Structure d'une page HTML

✔️ Le DOCTYPE

<img src="structure_html.png" alt="Structure d'une page en HTML" height="25px" /> C'est le tout premier élément. Comme son nom l’indique, le doctype sert à préciser le type du document.
<img src="doctype.png" alt="DOCTYPE" height="25px" />
Faites bien attention à l’écriture du doctype : vous pouvez remarquer que la balise représentant le doctype commence par un point d’exclamation. Ceci est un cas unique.
Dans la balise doctype, on va préciser le langage utilisé, à savoir le HTML.

✔️ L'élément html
Après le document, nous devons également mentionner un élément html. Cet élément est composé de deux balises <img src="html.png" alt="HTML" height="25px" /> et va représenter notre page HTML en soi. On va donc insérer tout le contenu de notre page (et donc les autres éléments) à l’intérieur de celui-ci.

✔️ Les éléments head et body
A l’intérieur de l’élément html, nous devons à nouveau indiquer deux éléments : head et body.
L’élément head va contenir des meta informations relatives à la page, c’est-à-dire des informations générales dont la page va avoir besoin pour fonctionner, comme le titre de la page ou encore le type d’encodage utilisé.

L’élément body (corps de la page) va lui contenir tout le contenu « visible » de la page : les textes, images, liens, vidéos, etc.

<img src="head_body.png" alt="head et body" height="25px" />

✔️ Les éléments title et meta
Finalement, nous allons devoir indiquer au moins deux autres éléments à l’intérieur de notre élément head : l’élément title, qui va contenir le titre de la page et un élément meta avec son attribut charset qui va nous permettre de définir l’encodage de la page.
L’encodage est très important pour que tous nos caractères, notamment les accents, s’affichent normalement dans notre page. Pour nous autres, français, nous utiliserons la valeur utf-8.
Notez que vous devrez également régler l’encodage de votre éditeur de texte sur utf-8 afin que tous les caractères s’affichent bien par la suite dans votre navigateur.

<img src="meta_title.png" alt="meta et title" height="25px" />

Voilà l'essentiel !

Un autre concept qu’il vous faut comprendre absolument pour coder en HTML est la façon dont le HTML traite ses éléments.

Vous l’avez probablement remarqué : ci-dessus, nous avons placé des éléments HTML à l’intérieur d’autres éléments (par exemple, les éléments title et meta ont été placés à l'intérieur de l'élément head).
<img src="structure_html" alt="Structure HTML" height="25px" />

L’imbrication est l’une des fonctionnalités du HTML qui fait toute sa force (nous découvrirons réellement pourquoi plus tard, avec l’étude du CSS).

Cependant, comme toujours, on ne peut pas imbriquer des éléments HTML n’importe comment et il faut suivre des règles précises.

Ainsi, nous n’avons absolument pas le droit de « croiser » les balises des éléments ou, pour le dire plus clairement : le premier élément déclaré doit toujours être le dernier refermé, tandis que le dernier ouvert doit toujours être le premier fermé.
Par exemple, vous voyez que notre premier élément déclaré est l’élément html, qui contient les éléments head et body. L'élément html devra donc être le dernier élément refermé. Tel c'est fait plus haut.
<img src="html.png" height="25px" />

Faites bien attention à distinguer les éléments contenus dans d’autres et ceux qui sont au même niveau hiérarchique. Par exemple, ici, title et meta sont deux éléments « enfants » de l'élément head (car ils sont contenus à l'intérieur de celui-ci), mais sont deux « frères » : aucun des deux ne contient l’autre.

Attention à respecter l'odre d'imbrication des éléments en HTML : premier ouvert, dernier refermé.