5 Balises à connaître pour le head

Introduction:

Dans le cours précédent, nous avons vu l’environnement nécessaire pour la création d’une page Web, et le fonctionnement général du langage HTML. Les premières balises “html”, “head” et “body” ont été présentées, il s’agit des balises dites “de premier niveau”. En effet, ce sont ces balises qui sont essentielles pour créer le code minimal de toute page Web. Nous allons voir dans ce cours les balises dites “d’en-tête” qui sont tout simplement les balises situées dans l’élément head de la page. Le head, ou l’en-tête en français, est l’élément qui contient des informations relatives à la page, à destination du navigateur. Ces informations ne seront pas affichées sur la page, mais elles sont cependant très importantes. Vous allez donc voir dans ce cours les 5 balises à connaître pour le head. Si vous ne connaissez pas les notions d’attribut et de valeur, je vous invite à cliquer ici pour les découvrir afin de mieux comprendre le cours.

1. La balise Title

   C’est probablement l’élément le plus important pour le référencement de votre page ! Les balises du tag title vont contenir le titre de votre page. Vous pourrez le voir apparaître sur l’onglet de votre page, comme montré dans le cours précédent. Pour rappel, l’élément title doit être écrit sous la forme : <title> Titre de la page</title>.

2. Les balises Meta

   Tout d’abord, l’élément méta est composé d’une balise orpheline, et d’un ou de plusieurs attributs qui seront situés dans cette balise. Il existe beaucoup de types balises meta (pour métadonnées) certaines ne sont plus utilisées et d’autres sont plus ou moins importantes. Je vais donc juste parler ici de celle qu’il est essentiel de connaître pour bien débuter. Il s’agit de la balise meta charset, cette balise indique l’encodage utilisé dans votre fichier “.html”. Sans rentrer dans le détail, car cela deviendrait trop technique et trop long, l’attribut charset détermine comment les caractères spéciaux doivent s’afficher sur le navigateur. Aujourd’hui l’encodage qui regroupe le plus de symboles dans toutes les langues possibles est l’UTF-8. Dans l’éditeur de texte, vous aurez donc à donner la valeur utf-8 à l’attribut charset : <meta charset= »utf-8″>.

3. La balise Style

   La balise Style permet d’implémenter du CSS au sein de votre fichier .html. On ne va pas s’attarder là-dessus, il existe différentes manières de faire du CSS qui seront détaillées dans un autre cours. Le tag style est donc une de ces façons de faire. Si vous optez pour elle (je ne le recommande pas), dans votre éditeur il faudra donc l’insérer de cette manière : <style> Votre contenu en CSS </style>.

4. La balise Script

   La balise Script permet quant à elle d’implémenter au sein de votre fichier .html du contenu JavaScript sous la forme : <script> Votre contenu en Javascript </script>. Mais elle permet aussi de relier un fichier JavaScript au fichier .html, c’est la deuxième façon de mettre du contenu JavaScript dans une page Web et la plus utilisée.
   On va donc utiliser cette même balise, en lui mettant un attribut src (pour source) dedans : <script src= »nomdufichier.js »></script>. Cependant, il n’est pas nécessaire de placer le script (pour les deux manières) dans le head. On peut également le retrouver dans le body ou même dans le html.

5. La balise Link

   Cette balise est une balise orpheline de liaison. On peut l’utiliser pour de nombreuses choses. Mais lorsqu’elle est présente dans le head, c’est principalement pour lier un fichier .css à votre .html. En effet, une autre façon d’écrire du CSS est donc de créer un fichier .css et de le lier par cette balise à votre page. Cette balise contiendra donc deux attributs:

   • href qui définit l’adresse, le chemin d’accès du fichier .css
   • rel qui définit la relation entre deux fichiers par une valeur

   Dans l’éditeur de texte, (si vos deux fichiers sont dans le même dossier ce que je vous recommande) vous aurez donc à écrire: <link href= »nomdufichier.css » rel= »stylesheet »>. Ici la valeur stylesheet indique la relation la plus connue de nos jours. C’est l’import d’un document CSS, que l’on peut connaître sous le nom de “feuille de style”.

 

Conclusion:

Nous avons donc vu dans ce cours les 5 balises à connaître pour le head. Ce sont les plus courantes et utilisées. L’ordre dans lequel vous placerez ces éléments n’a pas d’importance ni d’influence sur votre page. Bien évidemment, on peut creuser le sujet et rajouter de nombreux éléments. Mais vous avez là tout ce qu’il vous faut pour bien démarrer la création d’un site. N’hésitez pas à laisser un commentaire ou à poser des questions si besoin. J’espère que ce cours vous a aidé, JB.