Structure

Identification

Infoforall

2 - Structure d'une page HTML


Nous avons vu jusqu’à présent comme afficher un simple texte à l’écran. Une page HTML est bien plus que cela vous vous en doutez bien.

Néanmoins, nous ne savons toujours pas comment différencier les affichages des paragraphes dans l’en-tête et dans la section principale par exemple. Pas plus que nous ne savons comment changer l’espace entre deux paraphrases autrement qu’en utilisant la balise <br> directement dans le fichier html.

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepadqq (Linux)

1 - Les balises structurelles de base

Comme nous l'avons dis en introduction, une page HTML contient bien plus que du texte. Elle contient surtout l'organisation de ce texte : lorsque vous lisez un texte, une même phrase aura un impact différent selon qu'elle se situe dans le titre de l'ouvrage, dans l'introduction, dans le corps du texte ou dans la conclusion. Et bien, HTML permet justement de structurer votre texte en le plaçant dans des balises bien spécifiques.

Structure globale d'une page HTML

Voici un code HTML minimaliste, n'affichant rien :

1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

La première ligne d'une page HTML doit contenir l'indication <!DOCTYPE html> permettant de savoir qu'il s'agit d'un code HTML. Il existe d'autres types de codification, par exemple le XHTML, qui nécessite beaucoup plus de rigueur dans l'application des règles sur les balises.

Ensuite en ligne 2, on trouve une balise qui signale au navigateur qu'on commence à lui transmettre le contenu HTML. Cette balise est bien nommée puisqu'elle se nomme <html>. Que contient-elle ? L'indentation permet de voir qu'elle contient deux balises :

  • Une balise <head> dans laquelle nous allons mettre des indications destinées au navigateur pour parvenir à afficher correctement la page.
  • Une balise <body> qui va contenir le code HTML du contenu à proprement parler.

01° Créer une page contenant ce code minimaliste pour vérifier qu'il n'affiche rien.

Nous allons maintenant voir ce qu'il faut mettre dans la balise <body>.

2 - Balise body

La balise <body> est destinée à contenir les données permettant de réaliser l'affichage de la page en elle-même. Elle est elle-même divisable en plusieurs sous-balises :

Balise body

Voilà la structure minimale habituelle du contenu visible d’une page  :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html> <html> <head> </head> <body> <header> </header> <nav> </nav> <main> </main> <footer> </footer> </body> </html>
  1. Une balise <header> qui correspond à l'en-tête (tout en haut habituellement) : on y trouve souvent le titre ou le logo du site.
  2. Une balise <nav> qui contient barre de navigation : les liens qui permettent de sauter d’une partie à l’autre. Non obligatoire bien entendu.
  3. Une balise <main> pour le contenu principal : c’est là que se trouve le contenu réel de votre page.
  4. Une balise <footer> pour le pied de page : on y trouve les références du site, les moyens de contacter les auteurs … On le trouve habituellement en bas de page.

Nous allons pouvoir indiquer au navigateur si un texte ou une image se trouve dans l’en-tête ou le pied de page par exemple. A quoi cela va-t-il lui servir ? Et bien à choisir la priorité des éléments à afficher par exemple en cas de difficulté de téléchargement ou autres. On peut toujours se passer du pied de page dans un premier temps, c’est plus difficile sans le contenu. De la même façon, les robots des moteurs de recherche vont recolter ces informations et un programme tentera ensuite de voir la pertinence de votre page.

02° Tester le code HTML ci-dessous qui remplit un peu les balises de la partie <body>. Peut-on voir clairement l'enchainement des parties ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<!DOCTYPE html> <html> <head> </head> <body> <header> <h3>Le titre de mon site</h3> </header> <nav> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

Remarque : contrairement à Python, la tabulation n’a ici aucun rôle sémantique : le navigateur ne les voit pas. Par contre, veuillez à respecter la structure qui consiste à tabuler dès qu’on rentre dans une nouvelle balise : cela permettra à la personne qui lit votre code de mieux le comprendre.

Comme la tabulation n'a pas d'importance pour le navigateur, nous allons en profiter pour ne pas tabuler les balises les plus communes ( <head> et <body> ) par la suite : cela nous permettra de ne pas tabuler l'intégralité de nos balises.

Pour voir un peu plus clairement l'enchainement des balises, nous allons rajouter des couleurs de fond aux différentes balises. Le principe du CSS lui-même sera vu un peu plus bas. Pour l'instant, nous ne l'utiliserons que pour mettre en valeur les différentes balises.

<head> en fond noir / black.
<body> en fond gris / grey
<header> en fond noir / black
<nav> en fond noir / black
<body> en fond noir / black

03° Utiliser le code HTML modifié avec couleurs.

La balise <head> dont le fond est noir est-elle visible ?

La balise <body> dont le fond est gris est-elle visible ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<!DOCTYPE html> <html> <head style="background-color:black;"> </head> <body style="background-color:grey;"> <header style="background-color:red;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer style="background-color:yellow;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

...CORRECTION...

Le fond noir de la balise <head> n'apparait pas à l'écran. C'est normal : son contenu n'est pas normalement un contenu destiné à être affiché. Elle ne doit contenir que des informations à transmettre au client (le navigateur par exemple) pour qu'il affiche correctement le reste.

Par contre, on voit que le fond gris englobe bien toutes les autres balises colorées : la balise <body> est bien le conteneur de toutes les balises dont le contenu est affiché.

Tant que le contenu est placé dans votre page html, il sera affiché.

Quelque soit la balise dans laquelle vous l'avez placé !

On pourrait donc croire qu'il ne sert à rien de structurer le texte et de se demander dans quelle balise le placer lorsqu'on se crée une petite page personnelle. C'est faux. C'est même une très mauvaise idée, un peu comme si vous réalisiez un texte de 300 pages sans paragraphe, sans partie, sans introduction ni conclusion. Nous allons voir qu'on peut agir sur les balises à l'aide du CSS. Or, si vous voulez que le texte de l'introduction n'apparaisse pas de la même façon que le texte de l'article, il va bien falloir les distinguer non ?

Maintenant que nous avons clairement délimité la zone où on doit mettre le contenu visible, il nous reste à la voir la structure des informations fournies au navigateur mais que n'apparaissent pas à l'écran.

3 - Balise head

Dans la balise <body> nous avons donné le contenu visible, le « corps » de la page.

Balise head

Dans une autre balise nommée <head>, nous pouvons donner au navigateur plein d’informations qui n’ont pas à être affichées dans la fenêtre d’affichage du navigateur. Nous pouvons ainsi lui donner :

  1. Le texte à mettre dans l'onglet du navigateur à l'aide d'une balise nommée <title>
  2. <head> <title>TITRE ONGLET</title> </head>
  3. L’encodage de la page : l'ordinateur ne stocke pas de lettres mais uniquement des nombres. L'encodage correspond donc à la façon dont chaque lettre est associée à un nombre et comment ce nombre est stocké sous forme d'octets dans l'ordinateur. L’encodage UTF-8 est devenu la norme pour l’instant. C'est ce que le navigateur prendra normalement si on ne lui transmet rien. Mais les navigateurs sont aussi programmé pour tenter de deviner l'encodage. Parfois ça se passe mal. Autant dire clairement à votre navigateur qui vous travaillé en UTF-8 :
  4. <head> <title>TITRE ONGLET</title> <meta charset="UTF-8"> </head>

Et encore d'autres choses que nous verrons plus tard.

Balise orpheline

Comme vous pouvez le constater, la balise <meta> est particulière : elle ne comporte qu'une balise et pas la doublette balise d'ouverture - balise de fermeture. On dit qu'elle est orpheline.

Autre particularité : on lui transmet un attribut charset et sa valeur "UTF-8".

04° Insérer les indications de la balise head pour que le navigateur affiche BONJOUR dans l'onglet de votre page.

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<!DOCTYPE html> <html> <head > <title>BONJOUR</title> <meta charset="UTF-8"> </head> <body style="background-color:grey;"> <header style="background-color:red;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer style="background-color:yellow;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>
Langage utilisé sur la page

L'indication de la langue utilisée sur la page HTML se fait elle directement à l'aide d'un attribut applicable à la balise <html> :

<html lang="fr">

4 - Balise Main

Un petit complément pour la forme :

On peut aller encore plus loin dans la codification des informations à afficher en fournissant des balises à l'intérieur de la balise <main> :

Contenu possible de la balise main

La balise <main> peut contenir par exemple les balises suivantes :

  • D'autres balises <header>, <nav> ou <footer> pour l'introduction, un menu de navigation spécifique et une conclusion
  • Des balises <article> pour les parties quasi-indépendantes du reste
  • Des balises <section> pour délimiter les différentes parties de la page (I-II-III ect ...)
  • Des balises <aside> pour les petits textes traitant d'un sujet presque annexe au sujet principal.

Avec une balise <main> composée d'autres balises, on peut obtenir ceci :

<body> <header>Header de la page</header> <main> <header>Introduction de la page</header> <nav>Navigation du main</nav> <section>Contenu principal</section> <footer>Conclusion de la page</footer> </main> <footer>Bas de page</footer> </body>

Si votre page comporte plusieurs parties, vous pourriez aussi utiliser cette structure :

<body> <header>Header de la page</header> <main> <header>Introduction de la page</header> <nav>Navigation du main</nav> <section> <h2>Première partie</h2> <p>Bla bla</p> </section> <section> <h2>Seconde partie</h2> <p>Bla bla aussi</p> </section> <footer>Conclusion de la page</footer> </main> <footer>Bas de page</footer> </body>

Heureusement pour nous, il n'est pas obligatoire de suivre cela dans le détail. Par contre, structurer un minimum sa page est nécessaire. D'ailleurs la différence d'utilisation des différentes balises est parfois suffisamment floues pour être interchangées sans trop de problèmes.

Vous connaissez maintenant la structure de base que doit avoir une page HTML.

Dans les activités suivantes nous allons pouvoir créer des pages de plus en plus élaborées.

Activité publiée le 28 08 2019
Dernière modification : 30 09 2019
Auteur : ows. h.