La section d’entête du document HTML, balisée par <head></head>, contient des informations qui s’appliquent à tout le document.
Certaines sont des informations sémantiques :
- Le titre de la page inclus entre les balises <title></title>
- Certaines balises meta
<meta name= »description » … /> qui contient un résumé de la page
<meta name= »keywords » … /> qui contient les mots clefs
Il existe tout un jeu de balises meta sémantiques qui permettent de préciser : l’auteur du document, la date de mise à jour, le copyright, la langue du document …
Ces balises, à des degrés divers, peuvent être prises en compte par les moteurs de recherche pour leur indexation. (la balise essentielle, de ce point de vue, restant <title> )
D’autres sont des informations d’ordre plus fonctionnel :
- <link rel= »stylesheet » … /> fait appel à la feuille de style qui doit être utilisée par le navigateur pour lire le document
- <meta http-equiv= »content-type » … /> qui précise le jeu de caractères que le navigateur doit utiliser pour lire le document
- …
La déclaration doctype :
Enfin, tout document qui se réclame du respect d’une syntaxe normalisée doit impérativement débuter par une balise commentaire <!DOCTYPE …> placée en tout début de fichier
Cette déclaration précise le type et le niveau de normalisation adopté HTML 4.1, XHTML 1.0, XHTML 1.1 … et fait référence au « cahier des charges » de cette normalisation (le DTD).
Voilà ci dessous notre page HTML exemple où les balises d’entete ont été rajoutés (mises en évidence gras) :
Nous avons volontairement enlevé les attributs de mise en forme de l’exemple précédent …
… et pas encore déclaré de lien avec une feuille de style… qui fait l’objet du chapitre suivant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="page d'exemple html sans feuille de style" />
<meta name="keywords" content="exemple html,formation html" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>page de test html sans feuille de style</title>
</head>
<body>
<h1>voici le titre de premier niveau</h1>
<h2>ici le premier sous titre de niveau 2</h2>
<p>voila un simple paragraphe </p>
<p>et un second dans lequel est imbriqué un lien hypertexte vers <a href="http://www.3w3t.com/" title="ce lien revient à l'accueil"> l'accueil du site 3w3t </a></p>
<p>et ici une image du drapeau français
<img src="fr.gif" alt="voila le drapeau de la france il est bleu blanc rouge" title="voila le drapeau de la france il est bleu blanc rouge" /></p>
<h2>ici le second sous titre de niveau 2</h2>
<p>exemple de tableau</p>
<table summary="ce tableau ne contient pas de données interessantes, c'est un exemple">
<tr>
<th>titre de la colonne 1</th>
<th>titre de la colonne 2</th>
<th>titre de la colonne 3</th>
</tr>
<tr>
<td>valeur de la ligne 1 colonne 1</td>
<td>valeur de la ligne 1 colonne 2</td>
<td>valeur de la ligne 1 colonne 3</td>
</tr>
<tr>
<td>valeur de la ligne 2 colonne 1</td>
<td>valeur de la ligne 2 colonne 2</td>
<td>valeur de la ligne 2 colonne 3</td>
</tr>
</table>
</body>
</html>
Lorsque un internaute charge cette page avec son navigateur il voit ceci
Notre page n’est toujours pas très jolie … mais elle est devenue conforme aux recommandations XHTML 1.1 … même si elle n’utilise pas encore toute la richesse de XML !!!
Publier un commentaire