Anatomie d'une page HTML5

Une page HTML5 valide offre typiquement la structure suivante. Notez que c'est la structure qui devrait vous intéresser ici, pas les détails comme les scripts précis et les icônes spécifiques auxquels l'exemple fait référence :

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="description" content="petit exemple expliquant la structure d'un document html5" />
    <meta name="author" content="votre chic prof" />
    <title>Anatomie d'une page HTML5</title>
    <link rel="stylesheet" type="text/css" href="../../Styles/Style-maitre.css" />
    <link rel="stylesheet" type="text/css" href="../../Styles/Style-Web.css" />
    <link rel="shortcut icon" href="../../icones/h-deb.png" />
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/javascript" src="../../scripts/jquery.js"></script>
    <script type="text/javascript" src="../../scripts/shCore.js"></script>
    <script type="text/javascript" src="../../scripts/shBrushJScript.js"></script>
    <link href="../../Styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
       <!--
p.insistant {
  font-weight:bold;
}
       -->
    </style>
    <script type="text/javascript">
$(function(){
   SyntaxHighlighter.all();
});
    </script>
  </head>
  <body>
    <h1>Anatomie d'une page<span class="nombre"> <a href="Developpement-Web.html#html5">HTML5</a></span></h1>
    <!-- et ainsi de suite... -->
  </body>
</html>

Détail par section

Ici, le corps du document est laissé à votre imagination. Pris dans le détail, nous avons ce qui suit.

Élément	Code
DOCTYPE d'un document HTML5 Un document HTML débute par un DOCTYPE, indiquant le format et de la version du document. Avec HTML5, le DOCTYPE à utiliser est simplement html. Dans les versions antérieures du standard définissant le format HTML, la notation a parfois été très compliquée, ce qui explique que les développeurs Web apprécient cette simplification	`<!DOCTYPE html>`
Racine d'un document La racine d'un document HTML (ou d'un document XML en général) est la balise qui englobe l'ensemble du document. Pour un document HTML5, cette balise est <html>. D'un point de vue aérien, un document HTML a la forme suivante : `<html><head></head><body></body></html>` ... et, techniquement, le plus petit document HTML5 valide possible est : `<!DOCTYPE html><title></title>` ... dans quel cas les balises <head> et <body> sont générées (vides) par le fureteur consultant le document, et la balise <title> est considérée comme faisant partie de la section <head>. Ce point de vue est un peu trop aérien pour nos fins, cependant, alors allons un peu plus dans le détail.	`<html> <!-- le document va ici... --> </html>`
Section <head> La section <head> est l'une des deux sections principales d'un document HTML (l'autre étant la section <body>). Dans une section <head> se retrouvent pour l'essentiel les métadonnées encadrant et enrichissant le contenu de la page Web. Notez qu'un document HTML5 peut ne pas avoir de balises <head>, bien que ce soit inhabituel; dans un tel cas, le fureteur en générera une « vide », et y insérera la balise <title>. Quelques-unes des principales balises rencontrées dans une section <head> suivent, accompagnées d'exemples succincts. La liste proposée ne se veut bien sûr pas exhaustive. L'ordre dans lequel les balises sont proposées n'importe en général pas, sauf dans le cas de fichiers CSS (balises <link>); dans le cas de scripts (balise <script>), où les fichiers dont d'autres dépendent doivent être inclus d'abord; et dans le cas d'un <meta charset="..." />, qui doit apparaître dans les 1024 premiers caractères du fichier pour être considéré	`<head> <!-- le contenu de la section va ici --> </head>`
Balises <meta> Une balise <meta> dénote une métadonnée du document : son auteur, une brève description, l'encodage de caractères utilisé dans la production du document, etc. Les quelques exemples à droite donnent un aperçu de l'utilisation de cette balise. Notez que l'encodage de caractères choisi, <meta ... content="...;charset=..." />, est particulièrement important, du fait qu'il guide les fureteurs dans le décodage des données qui constituent le document. Une erreur à cet endroit peut rendre le document illisible en tout ou en partie.	`<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="description" content="petit exemple expliquant la structure d'un document html5" /> <meta name="author" content="votre chic prof" /> <!-- et ainsi de suite... -->`
Balise <title> Un document ne peut avoir qu'un seul titre principal, décrit par sa balise <title>. Le texte de cette balise apparaîtra sur l'onglet ou la fenêtre du fureteur présentant le document. Cette balise ne peut contenir de formatage particulier (on ne peut pas, par exemple, y modifier la police de caractères utilisée pour l'afichage).	`<title>Anatomie d'une page HTML5</title>`
Balises <link> Les balises <link> mènent vers des documents tiers qui enrichissent ou complètent la page Web. Dans l'exemple à droite, on trouve des liens vers quatre documents CSS, qui participent au formatage de la page, de même qu'un lien vers un fichier .png servant d'icône pour la page (l'icône, en pratique, sera affiché aux côtés du titre de la page). Notez que dans le cas de fichiers CSS, l'ordre d'apparition des balises importe du fait que si des règles pour un même objet sont décrites dans plus d'un fichier CSS, la règle décrite par le fichier le plus récemment inclus (donc par le dernier fichier inclus) l'emportera sur les autres.	`<link rel="stylesheet" type="text/css" href="../../Styles/Style-maitre.css" /> <link rel="stylesheet" type="text/css" href="../../Styles/Style-Web.css" /> <link rel="shortcut icon" href="../../icones/h-deb.png" /> <link href="../../Styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="../../Styles/shThemeDefault.css" rel="stylesheet" type="text/css" />`
Balises <style> Les balises <style> permettent en particulier d'injecter du code CSS à même la page Web. Le code CSS en question est typiquement placé entre commentaires et peut être aussi complexe que désiré.	`<style type="text/css"> <!-- p.insistant { font-weight:bold; } --> </style>`
Balises <script> Sans surprises, une balise <script> sert lors de l'inclusion de scripts dans une page Web, qu'il s'agisse de fichiers externes ou de code inséré à même la page (on trouve des exemples des deux types dams l'extrait à droite). Remarquez au passage le recours ici à jQuery, sûrement la bibliothèque JavaScript la plus connue et la plus utilisée.	`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <script type="text/javascript" src="../../scripts/jquery.js"></script> <script type="text/javascript" src="../../scripts/shCore.js"></script> <script type="text/javascript" src="../../scripts/shBrushJScript.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); </script>`
Section <body> La section <body> détermine le corps du document, incluant son contenu et sa structure sémantique. Ce qui est décrit dans cette section est ce qui sera affiché dans l'espace client du fureteur lorsque la page Web sera consultée; évidemment, l'affichage sera influencé en grande partie par les éléments inclus dans la section <head>, en particulier les scripts et les codes de formatage CSS.	`<body> <!-- le contenu de la section va ici --> </body>`

Élément

Code

DOCTYPE d'un document HTML5

Un document HTML débute par un DOCTYPE, indiquant le format et de la version du document. Avec HTML5, le DOCTYPE à utiliser est simplement html.

Dans les versions antérieures du standard définissant le format HTML, la notation a parfois été très compliquée, ce qui explique que les développeurs Web apprécient cette simplification

<!DOCTYPE html>

Racine d'un document

La racine d'un document HTML (ou d'un document XML en général) est la balise qui englobe l'ensemble du document. Pour un document HTML5, cette balise est <html>.

D'un point de vue aérien, un document HTML a la forme suivante :

<html><head></head><body></body></html>

... et, techniquement, le plus petit document HTML5 valide possible est :

<!DOCTYPE html><title></title>

... dans quel cas les balises <head> et <body> sont générées (vides) par le fureteur consultant le document, et la balise <title> est considérée comme faisant partie de la section <head>. Ce point de vue est un peu trop aérien pour nos fins, cependant, alors allons un peu plus dans le détail.

<html>
  <!-- le document va ici... -->
</html>

Section <head>

La section <head> est l'une des deux sections principales d'un document HTML (l'autre étant la section <body>). Dans une section <head> se retrouvent pour l'essentiel les métadonnées encadrant et enrichissant le contenu de la page Web. Notez qu'un document HTML5 peut ne pas avoir de balises <head>, bien que ce soit inhabituel; dans un tel cas, le fureteur en générera une « vide », et y insérera la balise <title>.

Quelques-unes des principales balises rencontrées dans une section <head> suivent, accompagnées d'exemples succincts. La liste proposée ne se veut bien sûr pas exhaustive. L'ordre dans lequel les balises sont proposées n'importe en général pas, sauf dans le cas de fichiers CSS (balises <link>); dans le cas de scripts (balise <script>), où les fichiers dont d'autres dépendent doivent être inclus d'abord; et dans le cas d'un <meta charset="..." />, qui doit apparaître dans les 1024 premiers caractères du fichier pour être considéré

<head>
  <!-- le contenu de la section va ici -->
</head>

Balises <meta>

Une balise <meta> dénote une métadonnée du document : son auteur, une brève description, l'encodage de caractères utilisé dans la production du document, etc. Les quelques exemples à droite donnent un aperçu de l'utilisation de cette balise.

Notez que l'encodage de caractères choisi, <meta ... content="...;charset=..." />, est particulièrement important, du fait qu'il guide les fureteurs dans le décodage des données qui constituent le document. Une erreur à cet endroit peut rendre le document illisible en tout ou en partie.

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="petit exemple expliquant la structure d'un document html5" />
<meta name="author" content="votre chic prof" />
<!-- et ainsi de suite... -->

Balise <title>

Un document ne peut avoir qu'un seul titre principal, décrit par sa balise <title>. Le texte de cette balise apparaîtra sur l'onglet ou la fenêtre du fureteur présentant le document. Cette balise ne peut contenir de formatage particulier (on ne peut pas, par exemple, y modifier la police de caractères utilisée pour l'afichage).

<title>Anatomie d'une page HTML5</title>

Balises <link>

Les balises <link> mènent vers des documents tiers qui enrichissent ou complètent la page Web. Dans l'exemple à droite, on trouve des liens vers quatre documents CSS, qui participent au formatage de la page, de même qu'un lien vers un fichier .png servant d'icône pour la page (l'icône, en pratique, sera affiché aux côtés du titre de la page).

Notez que dans le cas de fichiers CSS, l'ordre d'apparition des balises importe du fait que si des règles pour un même objet sont décrites dans plus d'un fichier CSS, la règle décrite par le fichier le plus récemment inclus (donc par le dernier fichier inclus) l'emportera sur les autres.

<link rel="stylesheet" type="text/css" href="../../Styles/Style-maitre.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/Style-Web.css" />
<link rel="shortcut icon" href="../../icones/h-deb.png" />
<link href="../../Styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="../../Styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Balises <style>

Les balises <style> permettent en particulier d'injecter du code CSS à même la page Web. Le code CSS en question est typiquement placé entre commentaires et peut être aussi complexe que désiré.

    <style type="text/css">
       <!--
p.insistant {
  font-weight:bold;
}
       -->
    </style>

Balises <script>

Sans surprises, une balise <script> sert lors de l'inclusion de scripts dans une page Web, qu'il s'agisse de fichiers externes ou de code inséré à même la page (on trouve des exemples des deux types dams l'extrait à droite).

Remarquez au passage le recours ici à jQuery, sûrement la bibliothèque JavaScript la plus connue et la plus utilisée.

<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="../../scripts/shCore.js"></script>
<script type="text/javascript" src="../../scripts/shBrushJScript.js"></script>
<script type="text/javascript">
$(function(){
   SyntaxHighlighter.all();
});
</script>

Section <body>

La section <body> détermine le corps du document, incluant son contenu et sa structure sémantique. Ce qui est décrit dans cette section est ce qui sera affiché dans l'espace client du fureteur lorsque la page Web sera consultée; évidemment, l'affichage sera influencé en grande partie par les éléments inclus dans la section <head>, en particulier les scripts et les codes de formatage CSS.

<body>
  <!-- le contenu de la section va ici -->
</body>