initiation à HTML5
L'en-tête et le corps
La page HTML se répartie en deux parties principales toutes deux filles de l'élément racine html. Il s'agit de :
- head
- body
On mettra dans head tous les éléments généraux sur le document et son contexte, alors que body contiendra le contenu de la page proprement dite : articles, images, vidéos...
Le head se place tout de suite après html, lui-même placé après le doctype. On y retrouve toutes les informations nécessaires pour expliquer au navigateur que la page est rédigée dans tel encodage de caractères et dans telle langue, par exemple. Il contient également de nombreuses informations qui serviront à indexer automatiquement le site via des moteurs de recherches, telles que Google. Il est donc important de bien le rédiger.
L'en-tête se place entre les balises
<head></head>
Le body (corps) se place entre les balises
<body></body>
Le fichier obtenu est donc a minima :
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Pour l'instant cette page n'affiche aucune information puisque le body est vide. Les balises qui permettront de paramétrer le contenu de la page seront parcourues tout au cours de ce document. Concentrons-nous pour l'instant sur l'en-tête.
Le contenu placé entre les balises head n'apparaîtra pas de façon visible sur le site internet. Il s'agit d'informations nécessaires et qu'il faut absolument soigner. Il est d'usage de renseigner au moins certains paramètres dont nous allons parler dans ce chapitre, mais cette liste n'est pas exhaustive. De nombreux scripts se placent entre ces balises, d'analyse (des appels à statistiques), d'amélioration (du code spécifiquement dédié à tel navigateur) de performance (des appels à des feuilles de styles, des fontes) ou d'ajouts de fonctionnalités par exemple (des librairies, des scripts, etc). La plupart du temps l'ordre des balises à l'intérieur du head n'est pas important sauf dans certains cas, généralement spécifiés.
La balise title
La balise title fait partie de la catégorie des balises fondamentales. Toute page doit contenir une balise title placée dans le head. Elle devra contenir un titre pour la page, unique pour l'ensemble du site, autant que possible, car c'est lui qui sera utilisé dans les onglets et l'historique de navigation. Toute duplication de titre entre page peut donc entraîner une difficulté pour le visiteur et les moteurs de recherche prennent aussi en compte cette spécificité.
<title>Titre de votre page</title>
Le titre est indexé par les moteurs de recherche et s'affiche également dans la barre de titre de la fenêtre du navigateur. Il s'agit donc de la première donnée textuelle à informer.
Notre fichier minimal devient :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head> <body> </body> </html>
La balise Link
La balise link sert à relier le html à sa feuille de style css ou à d'autres documents externes qui seront utilisé en général dans le rendu de la page.
<link href="/dossier/fichier.css" rel="stylesheet" type="text/css" media="screen"/>
Ajouter le logo de son site dans la barre de titre et les onglets
La favicon est la petite icône qui apparaît dans la barre des titres ou dans les onglets d'un navigateurs, voire éventuellement les historiques. Elle est souvent basée sur le logo de l'entreprise ou de la structure qui possède le site et peut être de taille variée allant de 16 pixels à 128.
<link rel="shortcut icon" href="dossier/fichier.ico" type="image/x-icon"/>Le format de l'icone pourra en général être Gif ou PNG car JPEG n'acceptant les transparences, ils ne conviendra pas pour les icones non rectangulaires.
Notre code d'entête devient alors :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<link rel="shortcut icon" href="http://fr.flossmanuals.net/site_static/images/favicon.ico" type="image/x-icon"/>
</head>
<body>
</body>
</html>
Faciliter l'abonnement au site en liant un flux rss
<link rel="alternate" type="application/rss+xml" href="http://www.votreur/fichier.xml" title="Flux Rss de votre site />
Les valeurs d'attributs pour les balises link sont très nombreuses. Elles sont systématiquement accompagnées de :
type: définissant le type mime du fichier lié.href: définissant l'adresse du fichier à lier.rel: mentionne le type de relation.
Encodage de caractère
<head> <meta charset="UTF-8" /> </head>
Il est d'usage de spécifier l'encodage de caractères afin que les caractères utilisés dans notre langue s'affichent bien sur tous les navigateurs. Pour le cas où cette information n'est pas renseignée, ces caractères seraient peut-être remplacés par des signes cabalistiques bizarres rendant la lecture de votre site inconfortable.
Aujourd'hui l'encodage utf_8 est privilégié afin d'être le plus universel possible. Le but d'un site internet n'est-il pas d'être potentiellement lu depuis le monde entier ? Comment le navigateur avec lequel vous surfez peut connaître le jeu de caractère utilisé sur ce site internet parmi des centaines existantes ? Aidez-le en le lui informant.
Les autres balises <meta …>
Les balises métas informent sur les métadonnées de la page html. Elles n'ont pas vocation à s'afficher, c'est pourquoi elles sont réservées au head de la page. Elles sont destinées aux navigateurs, aux moteurs de recherche et aux outils d'indexations.
En html5, les balises <meta> ont été réduites. Cependant certaines restent essentielles. Elles doivent au moins contenir l'un des attributs parmi :
- name
- http-equiv
- charset
- itemprop
Les balises meta http-equiv
- encodage de caractère,
<meta charset="utf-8" >, - ou
<meta http-equiv="Content-Language" content="fr"/>
Ces attributs sont cependant moins utilisés en HTML5 au profit des attributs spécifiques charset et lang.
Les balises meta name
Les meta name les plus courantes permettent :
- une description de la page, permettant de placer un petit descriptif du contenu de la page :
<meta name="description" content="décrivez votre page" > - d'ajouter des mots clés pour cette page
<meta name="keywords" content="mot clé, mot clé, mot clé">
- generator
<meta name="generator" content="Nom de l'outil - version" />, elle renseigne sur l'outil qui a aidé à réalisé le site. Cela permet aux CMS de réaliser des statistiques de leur utilisation. - author
<meta name="author" content="prénom nom" />, elle renseigne sur l'auteur du code. - licence
<meta name="copyright" content="LAL" />, elle informe sur la licence et les droits appliqués au contenu de la page.
meta name directement sur le site du W3C afin d'être certains de son actualisation.Balise meta http-equiv ou balise meta name ?
Les balises ci-dessus sont considérées à l'heure actuelle comme standard. Il n'est pas utile de dupliquer les informations présentes en utilisant les balises équivalentes meta name et meta http-equiv, sauf peut être concernant l'encodage des caractères. Mais ce n'est pas une règle, à vous de l'adapter selon les cas que vous rencontrerez notamment concernant la configuration du serveur.
Autres balises meta possible
Si vous vous intéressez au référencement, n'oubliez pas d'ajouter la balise meta Site verification sur la page d'accueil du site uniquement et non sur toutes les pages. Il est possible, et d'ailleurs cette seconde méthode est conseillée par Google, de ne pas inclure cette ligne dans votre page html mais de placer un fichier html à la racine du site ou dans l'enregistrement DNS contenant cette ligne avec votre code personnel.
Exemple pour Google :
<meta name="google-site-verification" content="entrez ici le code fourni par google">
Pour connaître les recommandations de Google lisez ou écoutez http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=35179
Par défaut les moteurs de recherches indexent tous les pages présentent sur internet. Si pour une bonne raison vous ne souhaitez pas que la page soit référencée, alors, insérez-le dans le code.
Exemple :
<meta name="googlebot" content="option1, option2" >
Les options sont diverses :
noindex, empêcher l'indexation de la page.no follow, empêcher le robot de suivre les liens présent dans la page.nosnippet, empêcher l'affichage d'un extrait dans les résultats de recherche.noodp, empêcher l'utilisation d'une description de remplacement tirée des sites ODP/DMOZ.noarchive, empêcher Google d'afficher le lien «en cache» associé à une page.unvailable_fater:[date], empêcher l'exploration et l'indexation de la page à partir de la date indiquée.noimageindex, empêcher les moteurs de recherche d'afficher votre page comme source de l'image.
Il est courant également d'ajouter ces instructions dans un fichier robots.txt placé à la racine du site afin d'alléger le code de la page.
Il existe une balise meta pour empêcher Google de proposer la traduction automatique de votre site
<meta name="google" content="notranslate">
Pourquoi souhaiteriez-vous réduire les visites de votre site internet même si la traduction proposée par Google est imparfaite ?
Vous trouverez également la balise meta Refresh qui contraint le navigateur a rafraîchir la page ou diriger vers une autre page après un temps indiqué. Cette méthode est aujourd'hui fortement recommandée par le W3C. Google propose d'utiliser plutôt la redirection 301.
<meta http-equiv="refresh" content="…;url=…">
Les réseaux sociaux et notamment Facebook prennent de plus en plus d'ampleur, plutôt que de se laisser happé par les entreprises qui ont le pouvoir dessus, tentez de rester un tant soit peu maître du contenu présent sur ces sites. Des balises sont là pour cela.
<meta property="og:title" content="Titre"> <meta property="og:description" content="Description"> <meta property="og:image" content="URL_image">
Ces balises sont propres à Facebook et vous permettent de choisir quelles informations présentent sur votre page peuvent être affichés dans Facebook (par exemple lors de l'insertion d'un lien). Sinon Facebook affichera ce qui lui semblera pertinent avec un grand potentiel d'erreur.
Lisez ces deux articles en anglais pour en savoir plus sur le protocole de ces balises (The open Graph protocol http://ogp.me/) et sur les spécifications de partage Facebook (http://developers.facebook.com/docs/reference/dialogs/feed/).
Le statut particulier de la balise meta keyword
En 2009 Google annonce ne plus focaliser son attention sur les mots clés présents dans ces balises pour indexer le site. Est-ce que cela signifie que Google préfère générer la liste des mots-clés à partir du texte présent dans la page. ? Par contre il s'appuie sur ces mots-clés pour placer au mieux les publicités provenant d'AdSense.
Référencement et SEO
Puisque vous en êtes à la rédaction des balises, vous devriez porter votre attention sur le souci du référencement.
Il y a quelques règles à suivre sur lesquels la veille est particulièrement importante.
- La description du site ne doit pas dépasser 150 caractères et au mieux contient 70 caractères. Le contenu de cette balise s'affiche dans le moteur de recherche. Il s'adresse donc aux internautes et doit être rédigé de façon à donner envie à l'internaute de venir visiter votre site. Son contenu n'est pas du tout pris en compte par le référencement, soignez donc son contenu.
- Concernant le contenu de la balise keywords, ne rédigez pas une liste exhaustive de mots clés mais plutôt une courte liste de mot clé pertinent adapté à la page html. Plus il y a de mot clés, plus le poids de ceux-ci est dilué. Peu de mots clés auront plus d'impact que beaucoup.
- Prenez soin de la façon de rédiger la balise title. Celle-ci est unique par page et adapté au contenu. Elle ne doit pas dépasser 60 caractères. Un texte court et concentré en mot clé est préférable. Les mots clés en début de balise auront plus d'impact que ceux placés en fin. Adaptez vos tournures !