La balise head et ses éléments
base et link
Le HTML est un langage de balisage – ou de marquage – propre à l’édition de pages Web : les navigateurs interprètent les balises du HTML pour rendre le webdesign et les contenus éditoriaux, tels que vous les voyiez actuellement.
Au niveau de la conception web, on parle de WYSIWYG lorsque l’on construit un site dans l’aperçu final, mais un vrai professionnel lui va plutôt intervenir directement dans le code HTML.
La balise head est un cas particulier : elle ne reste rien transparaître du côté internaute, à par le titre de la page bien sûr. Obligation donc pour un intégrateur de bien la connaître.
La Balise head
La balise head est primordiale : elle est interprétée par les navigateurs et les moteurs de recherche, elle fournit des informations grâce à ses éléments enfants : <title>, <base />, <link />, <script>, <meta /> et <style>
L’élément <head> peut avoir les attributs suivants :
- xml:lang donne la langue de référence du document. Elle permet notamment d’apparaître dans la SERP Google si l’internaute a choisi le bouton « pages : France » pour xml:lang= »fr »
- dir indique le sens de lecture. dir= »ltr » (left to right) ou dir= »rtl »
- profile a pour valeur une URL qui pointe vers un fichier de métadonnées. A priori les navigateurs ne prennent pas cet attribut en compte.
L’élement <base />
Cette balise a pour attribut obligatoire href= » ». L’URL fournie détermine l’adresse de base de tous les fichiers du site.
Exemple :
pour <base href= »www.web-creatif.net » />
un lien relatif dans la page vers images/toto.gif sera interprété comme lien absolu www.web-creatif.net/images/toto.gif
L’élément <link />
Cet élément crée l’importation virtuelle d’un document externe : virtuelle car le navigateur agira comme si le code du fichier externe était intégré à la page. La liaison est déterminée par les attributs rel, rev, type, href, hreflang, media, charset.
- rel= »stylesheet » si le fichier externe est uen feuille de style
- rel= »alternate » si le fichier est une page de rechange
- rel= »alternate stylesheet » si le fichier est une feuille de style de remplacement
- rel= »shortcut icon » pour créer une favicon, l’image de 16×16 qui s’affiche dans les onglets et les favoris
- rel= »start » si le fichier cible est la page d’accueil
- rel= »glossary » si le fichier contient les termes d’un glossaire
L’attribut type précise le contenu du fichier externe
- type= »text/css » pour une feuille de style CSS
- type= »text/javascript »
- type= »images/x-icon » pour créer une icône
L’attribut href contient l’adresse relative ou absolue du fichier externe associé
Code pour lier une feuille de style
<link href= »accueil.css » rel= »stylesheet » type= »text/css » />
Pour le media écran :
<link href= »accueil.css » rel= »stylesheet » type= »text/css » media= »screen » />
Pour le media imprimé :
<link href= »accueil.css » rel= »stylesheet » type= »text/css » media= »print » />
Source : XHTML et CSS de Jean Engels