▼ Table des matières
EN-TÊTE D'UNE PAGE HTML
Le code présenté ci-dessous présente un exemple d'en-tête d'une page HTML5.
Les commentaires relatifs au code sont introduit en utilisant la syntaxe HTML appropriée : (<!--le commentaire-->).
Les liens signalés dans ces commentaires renvoient à des pages de référence sur les sujets traités... nul n'est besoin de réinventer la roue !
<!doctype html><!--indique que le document est de type HTML5--> <!--les déclarations suivantes sont spécifiques à la lecture de la page par Internet Explorer--> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="fr"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="fr"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]--> <head><!--début de l'entête de cette page HTML5--> <!--les balises métas décrivent la nature des données qui seront interprétées par les navigateurs web--> <meta charset="iso-8859-15"><!-- choix du codage des caractères accentués; le sujet est complexe; une mauvaise configuration charset entraîne divers désagréments au moment de l'affichage de la page par les navigateurs; les caractères accentués, é, è, à, ù... etc... ainsi que d'autres caractères particuliers peuvent apparaître de manière dégradée, sous forme de codes gênants pour une lecture fluide. Voir, dans ce cas précis, http://fr.wikipedia.org/wiki/ISO_8859-15--> <meta name="keywords" content=" "/><!--entre les deux guillemets, les mots clés qui seront utilisés par les moteurs de recherche; 5 à 600 caractères maximum ; chaque mot clé est séparé du suivant par une virgule--> <meta name="description" content=""/><!--entre les deux guillemets, un résumé du contenu de la page; il sera composé de 150 caractères maximum; le moteur de recherche récupérera cet extrait de la page qui sera affiché dans les résultats de recherche ; c'est pourquoi cet extrait est censé résumer le contenu de la page de la manière la plus pertinente possible en regard de la requête faite par l'internaute à son moteur de recherche. La principale règle en matière de référencement naturel reste donc, au départ, la réelle pertinence du contenu, ainsi que sa spécificité. De nombreux abus dans l'utilisation des métas "keywords" et "description" ont entraîné l'évolution actuelle des moteurs de recherches : renseigner ces deux métas n'a donc plus qu'une valeur indicative.--> <meta name="viewport" content="width=device-width"/><!--"Responsive Web Design" ou capacité du site à s'adapter aux divers écrans et matériels": voir http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html--> <!-- Titre de la page; ce titre apparaît dans l'onglet du navigateur, à l'ouverture de la page, ou/et dans les résultats de recherches sur internet. Toutefois, dans la situation actuelle, le plus sûr moyen de contrôler cette information visuelle est l'usage systématique d'une balise h1(titre) placée en haut du body de chaque page; l'usage des six balises h1, h2,h3, h4,h5, h6, est fondamental dans la structuration des pages HTML; ces titres sont utilisés dans la construction automatisée de tables des matières, notamment dans les techniques qui permettent de structurer les documents textes des suites bureautiques et des e-books qui sont des documents de type HTML; qu'il s'agisse donc d'une page ou d'un long document texte, la réflexion à mener sur le choix du contenu des titres, comme celui de leur hiérarchie est loin d'être une simple formalité; elle aura des conséquences structurelles et agira également au niveau du référencement--> <title> HEAD-HTML</title> <!--Les favicons sont des icônes utilisées par les navigateurs lors de l'affichage des onglets (barre personnelle, menu des marque-pages de Firefox, par exemple) L'apple-touch-icon est destinée aux écrans d'accueil des appareils d'Apple; voir : http://www.alsacreations.com/astuce/lire/1080-apple-touch-icon-iphone-ipad-ipod-icone.html L'extension .ico est particulière à l'usage de MS Windows Internet Explorer--> <link rel="apple-touch-icon" href="themes/zecyb/images/apple-touch-icon.png"/> <link rel="icon" type="image/png" href="themes/zecyb/images/favicon.png"/> <link rel="shortcut icon" type="image/x-icon" href="themes/zecyb/images/favicon.ico"/> <!-- Les fichiers CSS ou "feuilles de styles" sont destinés à styler l'affichage des pages HTML. Il est fortement conseillé (sauf exceptions ponctuelles) de séparer les styles du code HTML proprement dit. L'ordre dans lequel les feuilles de style "en cascade" n'est pas anodin ; les feuilles les plus générales sont indiquées en premier; des configuration particulières contredisant ou précisant les configurations générales sont reportées dans des feuilles de styles secondaires qui, de ce fait, sont placées à la suite des feuilles générales car les navigateurs les interpréteront après ces feuilles générales et feront en sorte de reconstituer les styles particuliers qui prendront alors la main sur les styles généraux. Une balise <style> peut être introduite dans le head d'une page HTML; le contenu de cette balise respectera la syntaxe CSS et ne sera appliqué que dans cette page. <!-- liens RSS --> <link rel="alternate" type="application/rss+xml" title="Flux RSS des dernières pages modifiées" href="http://cewiki/wakka.php?wiki=DerniersChangementsRSS/xml"/> <link rel="alternate" type="application/rss+xml" title="Flux RSS des derniers commentaires" href="http://cewiki/wakka.php?wiki=DerniersCommentairesRSS/xml"/> <link rel="alternate" type="application/rss+xml" title="Flux RSS de toutes les fiches" href="http://cewiki/wakka.php?wiki=HeaD%2Frss"/> <!-- HTML5 and CSS3 availability detection: voir http://www.alsacreations.com/outils/lire/1387-modernizr.html --> <script src="tools/templates/libs/vendor/modernizr-2.6.2.min.js"></script> </head>
Voir aussi l'article "DTD" de Wikipédia
