La partie HEAD d'un document html5 Zoom

La partie HEAD d'un document html5

La balise <head> d'un document html5 peut contenir plusieurs types d"éléments: l'encodage (avec la balise meta ou charset), le titre de la page (balise <title>), les liens (balise <link>), d'autres indications (balise <meta>), les scripts (avec la balise <script>.

Plus de détails

Anatomie de la balise <head>... (à ne pas confondre avec <header>)

 

L'encodage

Là encore, html5 simplifie le code

< meta charset ="utf-8" >

Le titre de la page

Il est très utile, voire OBLIGATOIRE.
Le contenu de cet élément n'apparaît pas directement dans la page mais en haut de la fenêtre du navigateur, ou bien dans les onglets (dans les pages favorites, par exemple).
Son importance pour le référencement est primordiale : le titre doit être compréhensible (évitez de faire un suite de mots clés) et faire au maximum 70 caractères.

< title > Titre de la page mon super site < / title >

Les balises META

Il existe plusieurs types de <meta> mais on va citer ici les plus importants et les plus utilisés :

  • meta DESCRIPTION
  • meta KEYWORDS
  • meta GENERATOR
  • meta ROBOTS
  • meta AUTHOR
  • meta COPYRIGHT
  • meta VIEWPORT

 

< meta name = " description " content = " La description de la page " >

< meta name = " keywords " content = " Ecrire ici les mots clés " >

< meta name = " generator " content = " PrestaShop " >

< meta name = " robots " content = " index,follow " >


< meta name = " author " content = " Jean Thierry ANDRONIC " >

< meta name = " viewport " content = " width = device-width " >


Les liens

De nombreux liens peuvent être spécifiés dans la partie head du document :certains sont indispensables au navigateur, comme le lien sur une feuille de style, ou l'icône du site par exemple.
Concernant le favicon, si vous réalisez un site dit responsive design (adapté à tous les  types d"écran: ordinateur de bureau, portable, tablette, smartphone, iPhone, iPad...) il faut créer un favicon pour chaque type d'appareil.

< link rel = " shortcut icon " href = " images / favicon.ico " >

< link rel = " icon " type = " image/x-icon " href = " images / favicon.ico " >

< link rel = " icon " type="image/png" href = " images / favicon.png " >

< link rel = " apple-touch-icon " href = " images / apple-touch-icon.png " >

< link rel = " stylesheet " type = " text/css " href = " css / styles.css " >

Les scripts

Une page html peut faire appel à des scripts internes ou externes.
Aujourd'hui, de nombreux sites (la plupart) utilisent des bibliothèques jQuery : menus, slider, formulaires de contact...

< script type = " text / javascript " src = " javascript / respond.min.js " > < / script >

< script type = " text / javascript " src = " jquery / jquery-1.8.2.min.js " > < / script >

< script type = " text / javascript "  src = " jquery / jquery.form.js " > < / script >

Donner votre avis

La partie HEAD d'un document html5

La partie HEAD d'un document html5

La balise <head> d'un document html5 peut contenir plusieurs types d"éléments: l'encodage (avec la balise meta ou charset), le titre de la page (balise <title>), les liens (balise <link>), d'autres indications (balise <meta>), les scripts (avec la balise <script>.

Donner votre avis