Structure logique globale

Un fichier HTML doit respecter la structure logique globale d'une page Web. Le tableau ci-dessous en explicite les différents éléments. Certains de ces éléments seront décrits dans des sous-sections subséquentes.

Description des éléments de la structure globale d'une page Web

Composantes

Définition

Exemples

Statut

Préambule

Indique la norme HTML retenue

<!DOCTYPE html> pour HTML5

Obligatoire

Éléments charpentes

Définissent la structure de plus haut niveau

html, head, body

Obligatoires

Métadonnées

Présentes dans l'en-tête de la page (<head>), elles permettent de documenter certains aspects de la page

title, meta, link

title est l'unique métadonnée obligatoire

Regroupements structurels

Présents dans le corps de la page (<body>), ils permettent de préciser la structure logique du corps de la page

header, footer, section, article, nav

Facultatifs

Titrage

Permet d'inclure une structure de titre et sous-titres dans le corps de la page (<body>)

h1, h2, ..., h6

Facultatifs

Contenu structuré

Permet d'inclure différents types de contenus dans le corps de la page (<body>)

p, strong, table, ol

Facultatifs

Structure logique globale d'un fichier HTML (les éléments en italique sont facultatifs)

ExempleExemple d'un fichier HTML

L'exemple très simple ci-dessous illustre les différents éléments de la structure logique globale d'une page Web.

1
<!DOCTYPE html>
2
<html lang="fr-ca">
3
    <head> 
4
        <meta charset="utf-8" />
5
        <title>Module de formation continue</title> 
6
    </head>
7
    <body>
8
      <header><h1>Modules de formation continue</h1></header> 
9
      <section>
10
        <article>
11
           <p><strong>Responsable :</strong> John Smith</p>
12
           <p><strong>Sujet :</strong> Macramé</p>
13
        </article>
14
        <article>
15
           <p><strong>Responsable :</strong> Marie Poppins</p>
16
           <p><strong>Sujet :</strong> L'art du biscuit</p>
17
        </article>
18
       </section>
19
       <footer><p>Mise à jour le 13 novembre 2013</p></footer> 
20
    </body>
21
</html>

Éléments charpente : html

L'élément html doit chapeauter tout le document. On pourra y retrouver certains attributs pour, entre autres, préciser la langue. Par exemple (balise d'ouverture) :

1
<html lang="fr-ca">

L'attribut lang est facultatif mais recommandé. Il indique dans quelle langue est le document. La langue est identifiée par son code selon la spécification RFC3066 (http://www.ietf.org/rfc/rfc3066.txt) : http://www.i18nguy.com/unicode/language-identifiers.html.

Éléments charpente : head

L'élément head peut contenir (entre autres) les éléments suivants :

  • Titre de la page : title (obligatoire)

  • Liens vers d'autres ressources : link (facultatif)

  • Métadonnées : meta (facultatif)

Attention : Les éléments link et meta sont facultatifs dans le format HTML mais obligatoires pour le TP Site Web!

L'exemple ci-dessous illustre l'en-tête d'une page Web du site de Ms John Smith et Bill Brown, qui sont les auteurs de la page (métadonnées "author"). Cette page a été définie avec le jeu de caractères unicode UTF-8 (métadonnée "charset"). La métadonnée "description" nous apprend qu'ils sont consultants en information. L'élément link permet de lier le fichier HTML à une feuille de styles externe où se trouveront définis les éléments visuels de la page.

1
<head>
2
	<title>Site Web de John Smith et Bill Brown</title>
3
	<meta charset="utf-8" />
4
	<meta name="author" content="John Smith" />
5
	<meta name="author" content="Bill Brown" />
6
	<meta name="description" content="Site Web professionnel de John Smith et Bill Brown, consultants en information." />
7
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
8
</head>

Il est à noter, qu'à une exception près, le contenu des éléments présents dans l'élément head n'apparaît pas dans le navigateur. L'exception est l'élément title dont le contenu s'affiche sur l'onglet de la page.

Éléments charpente : body

L'élément body inclut le corps du document, c'est-à-dire tout ce qui est visible dans la fenêtre du navigateur. On pourra y retrouver différents types d'éléments représentant des regroupements structurels, du titrage et des contenus structurés.

Regroupements structurels

Les regroupements structurels permettent de définir des zones à l'intérieur du corps d'une page Web. Bien que facultatifs, ces éléments sont fort utiles entre autres pour faciliter la définition du visuel de la page.

Principaux regroupements structurels (source : Rimelé, Rodolphe. 2011. HTML5 : Une référence pour le développeur Web. Paris : Eyrolles. Page 92)