Les Balises HTML dans l'entête <head>
Il est important et nécessaire de remplir certaines balises dans la partie <head> pour que le navigateur
interprête bien votre site. Certaines ne sont pas obligatoires mais c'est une bonne pratique de les placer à chaque fois même si votre site n'est pas encore en ligne!
Pour commencer même avant de voir ce qu'on va mettre dans la balise <head> il faut impérativement mettre ça au dessus !
<html lang="fr">
<head>
Le <!DOCTYPE> html sert au navigateur afin de lui indiquer sur quelle version de html vous écrivez,
en l'occurence html5. Il est aussi important sur la balise <html> d'indiquer la langue pour spécifier dans quelle langue sera le contenu, sur l'exemple c'est evidemment le Français.
Passons maintenant a la partie <head> Voici la liste :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content= "IE=edge">
<meta name = "description" content= "Décription de votre site en quelques mots" >
<meta name="keywords" content="plusieurs mots clés pour décrire votre site">
<title>Titre de votre site</title>
<link rel="shortcut icon" type="image/x-icon" href="Lien de l'image de votre site"/>
● La balise <link> sert pour inclure vos fichiers, cela peut être des fichiers CSS par exemple. On précisera dans l'attribut type = "text/css" ainsi que dans l'attribut rel ="stylesheet". Si vous en avez plusieurs le navigateur les liras dans l'ordre.
Il y a plusieurs balises <meta> mais elles sont toutes différentes :
● charset="utf8" signifie "Universal Character Set Transformation Format - 8 bits".
C'est un codage de caractères informatiques conçu pour codés l'ensemble des caractères.
Utilisé par plus de 87% des sites internet en 2016.
● name="description" content= " Votre description! "
Cette Balise est hyper importante car elle permet le référencement par Google et ...les autres.
l'interieur du content = " ici" s'affichera comme ça par google :
On peut y écrire maximum 157 caractères espace compris qui apparaissetont dans les moteurs de recherches. INDISPENSABLE pour votre site.
● name="viewport" définie la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau.
content="width=device-width" La propriété width contrôle la taille du viewport. device-with correspond à la largeur de l'écran en pixels CSS à l'échelle 100%. Mais on peut la régler a une valeur précise (exemple : width = 600)
Enfin le initial-scale=1 contrôle le niveau de zoom lorsque la page est chargée pour la première fois.
Les propriétés maximum-scale, minimum-scale, et user-scalable contrôlent la manière dont les utilisateurs sont autorisés à zoomer ou dézoomer une page.
● La balise <link> rel"shortcut icon" est elle aussi indispensable elle permet d'ajouter un Favicon, Mathieu c'est quoi un favicon?
hé bien c'est une image/logo qui répresente son site dans la barre d'onglet comme ceci :
Le favicon fait partie de l'apparence du site, à ne surtout pas négliger !
● La balise <title> quand a elle est sûrement la plus importante, c'est le Titre visible par les moteurs de recherches #Google.
Elle apparaît aussi dans la barre des onglets, elle sert pour le référencement de votre site. MUY IMPORTANTE!
● Je fini cette article avec la balise la moins importante, c'est la seule selon moi qui n'est pas obligatoire.
la meta name="keywords" , en effet elle était utile avant pour le référencement, mais aujourd'hui elle devient obsolètes vu qu'elle n'est plus pris en compte par les moteurs de recherches. Mais on sait jamais... dans le doute ;)