La structure des pages

La structure générale des pages web

La totalité d’une page web est insérée dans l’élément <html>. Cet élément est qualifié d’élément racine de la page.

Nous avons ensuite les deux parties de contenu : l’en-tête et le corps. L’en-tête, avec l’élément <head>, permet de définir les propriétés globales des pages, sachant que chaque page pourra avoir des propriétés différentes. Le corps de la page, élément <body>, permet d’insérer tout le contenu de la page qui sera affiché. Ces deux éléments, <head> et <body>, sont frères et ils sont des enfants de l’élément <html>.

Nous pouvons donc avoir cette structure minimale :

<!doctype html> 
<html> 
   <head> 
       ... 
   </head> 
   <body> 
       ... 
   </body> 
</html>

La déclaration doctype

Nous l’avons indiqué dans un chapitre précédent, le HTML est une application SGML. Ainsi, il faut que la toute première ligne d’une page web contienne l’indication du langage à balises utilisé. Ceci est fait pour le navigateur. La syntaxe est extrêmement simple :

<!doctype html>

Attention, notez bien que cette déclaration du type de document n’est pas un élément HTML.

L’élément <html>

L’élément <html> est l’élément racine des pages HTML. La balise d’ouverture, <html>, fait immédiatement suite à la déclaration de type de document et la balise de fin, </html>, termine la page.

Parmi les attributs globaux, l’utilisation de l’attribut lang, non obligatoire, est très fortement recommandée. Cela permet tout simplement d’indiquer au navigateur quelle est la langue utilisée dans la page web. Cet attribut est exploité pour l’indexation par les moteurs de recherche et pour les navigateurs à synthèse vocale pour les personnes handicapées.

Voici la syntaxe usuelle :

<html lang="fr">

L’élément <head>

1. Les éléments enfant de l’en-tête

L’élément <head> est vraiment très important. Il contient toute une série de propriétés essentielles pour la page, sachant que ces propriétés ne sont indiquées nulle part ailleurs qu’ici.

Ces propriétés sont renseignées avec ces éléments enfants :

<meta> : permet de renseigner plusieurs métadonnées sur le document. Vous pouvez n’avoir aucun élément, un ou plusieurs.
<title> : c’est le seul élément qui soit obligatoire. Il donne le titre du document. Vous ne pouvez n’avoir qu’un seul élément de titre par page.
<base> : cet élément permet d’indiquer l’URL de base pour réécrire les URL relatives du document. Vous pouvez n’avoir qu’un seul élément de ce type par document.
<link> : donne les liens vers des ressources extérieures à la page, comme des fichiers de feuilles de styles CSS. Vous pouvez n’avoir aucun élément, un ou plusieurs.
<style> : permet de déclarer les règles de style CSS incorporées dans la page. Vous pouvez n’avoir aucun élément, un ou plusieurs....

L’élément <body>

L’élément <body> va contenir tous les éléments de contenu de la page web. Sa balise d’ouverture, <body>, est placée juste après la balise de fermeture de l’en-tête </head>. Sa balise de fermeture, </body>, est située juste avant celle du document, </html>. Bien sûr, il ne peut y avoir qu’un seul élément <body> dans un même document.

Tous les éléments de type block possèdent des propriétés d’affichage par défaut. Ces propriétés permettent d’afficher l’élément concerné avec des espaces autour. C’est la propriété CSS display qui est utilisée. Vous pouvez aussi avoir des propriétés s’appliquant à la mise en forme du texte, avec du gras ou de l’italique par exemple. Bien sûr, vous pourrez modifier ces propriétés en les personnalisant dans vos feuilles de style.

L’élément <body> étant de type block, il ne déroge pas à cette règle. Voici les valeurs usuelles utilisées par sa propriété display :

body { 
     display: block ; 
     margin: 8px ; 
}

Nous avons donc un élément qui possède...

Exemple d’une structure simple

Voici un exemple d’une structure simpliste, minimale et valide d’une page web :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Le titre de ma page</title> 
   </head> 
   <body> 
       <p>Le contenu de ma page.</p> 
   </body> 
</html>