D'un sujet à l'autre: HTML: les balises d'en-tête

Les balises d'en-tête et leurs attributs

Entre la balise <head> et </head> les balises suivantes peuvent être insérées pour renseigner le navigateur:

la balise <title> et sa balise fermante </title>, entre lesquelles vous indiquerez le titre de la page, titre qui s'affichera dans l'onglet du navigateur.

la balise <meta /> qui est auto-fermante (en fait on parle souvent non de balise "meta" mais de l'élément "meta"): elle fournit des indications au navigateur et surtout aux robots, indications qui servent principalement au référencement sur internet, le référencement consiste à améliorer le positionnement
et la visibilité des sites dans des pages de résultats des moteurs de
recherche et des annuaires. Mieux un site est référencé par le moteur
de recherche, plus il aura des chances d'apparaître dans les premières
pages des résultats d'une requête. par les moteurs de recherche (Google, Yahoo, Bing, Ask, Exalead, etc) :
- l'attribut charset représente la déclaration du jeu de caractères utilisés dans la page web. De nombreuses valeurs sont possibles, selon la langue dans laquelle la page est écrite: en occident, la norme préconisée est "utf-8" (en ce qui me concerne, ayant eu trop de problèmes d'affichage avec le jeu "utf-8", j'ai utilisé le jeu "iso-8859-1" qui reproduit très bien les caractères accentués français). La déclaration se fait ainsi (avec HTML5): <meta charset="utf-8" /> (ou <meta charset="iso-8859-1" />).
  Conseil : mettez cette ligne de code avant la balise <title> pour que le titre de la page s'affiche dans l'onglet du navigateur comme le texte dans le corps de la page.
- l'attribut name il est utilisé conjointement avec l'attribut content et vous permet de donner des indications aux navigateurs et aux robots d'indexation qui parcourent le web, notamment:
  - un résumé du contenu de votre page (200 caractères maximum) sous forme d'une phrase contenant des mots-clé qui reflètent son contenu sous la forme: <meta name="description" content="cette page présente des notions de base du langage HTML, particulièrement le bon usage des balises" />.
    Conseil: cette balise est très importante pour le référencement de votre site par les robots d'indexation.
  - des mots-clé séparés par des virgules correspondants à ce qui est traité dans la page, sous la forme: <meta name="keywords" content="langage, langages, informatique, HTML, balise, balises, charset, title, meta, name, doctype" />.
    Conseil: bien que considérée comme désuète et inutile, vu qu'on ne sait pas trop si les robots lisent encore ou non leur contenu, ce n'est pas forcément du temps perdu de la renseigner.
  - (non obligatoire) le nom de l'éditeur utilisé pour créer la page (généralement l'éditeur insère automatiquement cette ligne) sous la forme <meta name="generator" content="PSPad editor, www.pspad.com" /> (sur mes pages que j'ai codé avec QSPad Editor).
  - (non obligatoire) le nom de l'auteur de la page, en l'occurrence le vôtre, sous la forme <meta name="author" content="Jean Dupont" >.
  - (non obligatoire) le nom du propriétaire du site sous la forme <meta name="owner" content="Jean Dupont" > .
  - (non obligatoire) l'adresse email de l'auteur du site sous la forme <meta name="reply-to" content="jdupont@sonsite.fr" >.
  - (non obligatoire) des instructions aux robots sous la forme <meta name="robots" content="index (indexer la page) ou noindex (ne pas indexer) et-ou follow (suivre les liens de la page) et-ou nofollow (ne pas suivre les liens)" />.
  - (non obligatoire) si un copyright est appliqué sous la forme <meta name="copyright" content="Tous droits réservés ou CC BY ou CC BY-SA etc ... (voir ici)" /> .

Ci-dessous un exemple de codage des balises d'en-tête (cliquez sur l'image pour l'agrandir)

D'autres mots-clé existent pour l'attribut name mais ne sont pas d'une grande utilité. Vous pourrez toujours vous en faire une idée en faisant une recherche sur internet.

Toujours dans l'en-tête, entre les balises <head> et </head>, se placent encore les balises suivantes:

la balise <link>, balise auto-fermante, est destinée à définir l'emplacement d'un fichier (ressource) pour le rendre accessible dans la page où elle est déclarée. Bien qu'elle puisse être utilisée à d'autres fins, elle est principalement utilisée pour lier une feuille de styles afin que les styles définis dans cette feuille soient appliqués aux éléments de la page. Elle est utilisée conjointement avec des propriétés telles que:
- (obligatoire) rel qui établit la relation entre le document présent et le document ressource, dans le cas de la feuille de styles: rel="stylesheet",
- (obligatoire) type qui précise ce que l'on appelle le type-mime de la ressource, dans le cas de la feuille de styles: type="text/css",
- (obligatoire) href qui indique l'url (adresse) de la feuille de styles: href="ma_feuille_de_styles.css" ou, si les 2 documents ne se trouvent pas au même niveau dans l'arborescence du site: href="http://mon_site/ma_feuille_de_styles.css" ou encore href="../ma_feuille_de_styles.css" ou encore, si le fichier ressource se trouve sur un autre site: href="http://site_extérieur/ma_feuille_de_styles.css"
- (non obligatoire) media (peu utilisée) qui indique à qui sont destinés les styles de la feuille de styles liée: écran, imprimante, à tous les médias (valeur par défaut), par exemple media="screen".

la balise <style>, avec sa balise fermante </style> qui permet de définir des styles à appliquer sur la page, en complément ou à la place d'une feuille de styles. Nous n'entrerons pas dans les détails de définition des styles pour l'instant, nous le ferons quand nous étudierons le CSS. Retenez simplement que cette possibilité existe de définir des styles à appliquer à la page dans le header de cette page.

la balise <script>, avec sa balise fermante </script> qui permet soit de lier la page avec un fichier javascript (le javascript est un langage dit de scripts permettant entre autres de rendre des pages web interactives avec le visiteur de ces pages au moyen de fonctions exécutées dans la page web à la demande du visiteur), soit de définir dans l'en-tête de la page des fonctions javascript qui seront appelées dans le corps de la page. Nous approfondirons le détail de cette balise quand nous étudierons le langage javascript, retenez simplement que la place de cette balise se situe obligatoirement entre les balises d'en-tête de la page.