Commentaires

Les balises d'en-têtes



Il reste une dernière catégorie de balises, que l'on appelle les métadonnées ou balises d'en-tête.

Arthur, l'apprenti développeurAh on va enfin parler du <head> !

C'est tout à fait ça. Il y a en a une première qui est assez simple.

<title>



C'est la balise <title>, elle permet de donner un titre à la page, et ce titre sera affiché dans le navigateur, et plus précisément dans l'onglet de la page.



Arthur, l'apprenti développeurOk, suivante !

<link>



La balise <link> permet de lier des ressources externes à la page.

Arthur, l'apprenti développeurTu entends quoi par "ressources externes"?

D'autres fichiers, ça peut être une image, un fichier css, ou beaucoup d'autres choses.

Arthur, l'apprenti développeurMais, je croyais qu'on utilisais <img> pour afficher une image

Pour l'afficher dans la page oui ! Mais là on parle de métadonnées, cette image ne sera pas affichée dans la page. Il y a par exemple le favicon, c'est le nom que l'on donne à l'icône qui s'affiche dans l'onglet du navigateur.

Arthur, l'apprenti développeurOn peut la personnaliser ?

Tout à fait, pour cela on crée une balise <link> avec l'attribut rel et la valeur icon, et on précise aussi un attribut href avec le chemin vers l'image.



Arthur, l'apprenti développeurOk, le favicon c'est fait. On peut utiliser link pour d'autres ressources tu m'as dit ?

En effet, pour les fichiers css par exemple, je sais que tu n'as pas encore vu le css, mais ça va venir, en attendant il est important de savoir charger un fichier css.

Pour cela, on va cette fois-ci préciser stylesheet dans l'attribut rel, ajouter aussi un attribut type avec pour valeur text/css et le href fera référence au fichier css à charger.



Arthur, l'apprenti développeurJe ne suis pas sûr d'avoir tout compris, mais j'imagine que ce sera plus clair quand je verras le css.

Ne t'inquiète pas, on en reparlera quand on fera du css effectivement.

<script>


Il y a aussi une balise, qui peut aussi bien être utilisée dans le <head> que dans le <body>, c'est la balise <script>. Elle permet de charger un fichier javascript.

Arthur, l'apprenti développeurMais je croyais que <link> permettait de charger des fichiers ?

C'est exact, mais pour le cas du javascript c'est un peu particulier, car le fichier doit à la fois être chargé mais aussi exécuté, et il est possible, comme je viens de te le dire, de le charger dans le <head> ou dans le <body> contrairement au <link> qui ne peut être utilisé que dans le <head>.

On aura aussi l'occasion de reparler de l'impact que peut avoir l'endroit où on utilise la balise <script> quand on fera du javascript, pour le moment, on va juste l'utiliser dans le <head>.



Arthur, l'apprenti développeurCe n'est pas une balise auto-fermante <script>?

Et non, car avec la balise <script> on peut charger un fichier via l'attribut src, mais on peut aussi écrire du javascript directement à l'intérieur des balises. Donc elle n'est pas auto-fermante, contrairement à <link>.

<meta>



Il y a aussi la balise <meta>, elle peut contenir des informations très variées et parfois inutiles.

Arthur, l'apprenti développeurPourquoi on l'utilise, si elle est inutile ?

Elle n'est pas nécessairement inutile, mais certaines valeurs peuvent l'être aujourd'hui. C'est une balise très ancienne, qui existe depuis les débuts d'internet, à l'origine elle servait à donner des informations complémentaires sur la page, comme une description ou des mots clés, et c'était très utilisé par les moteurs de recherche pour avoir des informations sur la page.

Mais avec le temps, les moteurs de recherche ont évolués, et ils se sont vite rendu compte que le contenu dans les balises meta n'était pas toujours pertinent ni cohérent avec le contenu de la page, donc elles sont devenus inutiles.

Mais il existe certaines balises meta qui sont encore utilisées par les moteurs de recherche et par les navigateurs, en voici quelques unes très utiles :

charset



La balise <meta charset> permet de définir quel encodage de caractères est utilisé sur la page.

Arthur, l'apprenti développeurEncodage de caractères ?

Hum, tu sais qu'un ordinateur fonctionne en binaire ? C'est à dire qu'il traite toutes les données avec des 0 et des 1 ?

Arthur, l'apprenti développeurEuh, oui.

Tu saurais me dire comment représenter la lettre A en binaire?

Arthur, l'apprenti développeurPas du tout...

Et bien c'est à ça que sert l'encodage des caractères, ce sont des fichiers qui permettent de dire que tel caractère correspond à telle suite binaire en quelque sorte. Et il en existe de nombreux différents. Et pour que le navigateur te comprenne, il faut donc lui indiquer que ta page utilise tel ou tel encodage de caractères.

Il y en a un qui est très répandu sur internet c'est l'UTF-8, il contient de nombreux caractères provenant de différents alphabets. Les caractères les plus utilisés dans le monde sont tous présents dedans, donc je te recommande d'utiliser celui-ci en général.

Arthur, l'apprenti développeurOk UTF-8 c'est le meilleur.

Pas nécessairement le meilleur, mais le plus général, qui va pouvoir répondre à tes besoins la plupart du temps.

Pour préciser dans le <head> l'encodage, il faut donc ajouter la balise <meta charset> de cette façon :



Tu noteras que je l'ai mise en premier dans le <head>, c'est une recommandation du W3C, l'organisme qui crée les normes du web.

Arthur, l'apprenti développeurOk, donc charset toujours en premier !

<meta name="viewport">



Et on a le viewport, qui permet de définir des propriétés pour l'affichage à l'écran.

Arthur, l'apprenti développeurTu peux préciser ?

Hé bien ça sert pour le responsive, ça permet de définir comment le site doit s'afficher selon l'écran.

Arthur, l'apprenti développeurLe responsive ? Je ne comprends pas ce que tu veux dire...

C'est un concept qu'on abordera plus en détails avec le css, en fait il faut garder à l'esprit qu'un utilisateur qui vient sur ton site peut y accéder à partir de différents appareils, comme un ordinateur avec un écran 27 pouces, un ordinateur portable avec un écran 15 pouces, une tablette ou encore un smartphone, donc plein de tailles et de formats d'écrans différents. Et dans tous les cas, il faut que ton site s'affiche correctement et s'adapte. C'est le responsive.

Arthur, l'apprenti développeurOk je vois l'idée.

Et la balise <meta name="viewport"> permet de définir des informations sur comment ton site doit s'afficher et s'adapter par rapport au format d'écran.

Arthur, l'apprenti développeurOk je comprends mieux.

Par défaut je t'invite à toujours utiliser la balise avec ces paramètres : <meta name="viewport" content="width=device-width, initial-scale=1.0">



C'est le plus basique et efficace, on pourra reparler un jour plus en détail de ces paramètres pour adapter dans certains cas si tu veux.

Arthur, l'apprenti développeurOh oui, je pense que ça pourra m'être utile d'en savoir plus.

Oui, mais on va d'abord parler de css avant d'entrer dans ces détails là. On en a fini avec le HTML, on a fait le tour de toutes les bases, et tu devrais maintenant être capable de créer du contenu.

Arthur, l'apprenti développeurJe vais m'y mettre de ce pas ! J'ai terminé cette partie
Demander de l'assistance