Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 14: Les balises META (Meta tags)

Toutes les pages

Balise <meta>

Les balise <meta> (ou Meta tags) sont des balises qui contiennent les métadonnées. Il s'agit de données supplémentaires qui aident à l’exécution correcte de la page ou fournissent des informations additionnelles lors de l’exécution.

Les balises <meta> sont déclarées dans l'entête du document HTML (entre les balises <head> et </head>). Son contenu n'est donc pas affiché sur la page. C'est une balise orpheline (alors pas de </meta>).

La balise META contient en général deux attributs. Le deuxième est toujours l'attribut content. Quant au premier il peut être soit http-equiv ou name. Ce qui mène à penser qu'il existe deux familles de balises META selon l'attribut déclaré.
  • Balise META avec l'attribut http-equiv: Cette balise fournit des informations supplémentaire au navigateur exécutant la page, comme l'encodage ou les redirections...
  • Balise META avec l'attribut name: Cette balise fournit des informations complémentaires aux outils de recherche et d'indexation (comme les moteurs de recherche). Elles sont largement utilisées pour le référencement des sites Web.

Ci après, la liste des balises META les plus utilisées.

META Content-Type

Cette balise permet de spécifier le type du document qui la contient et son encodage.

La syntaxe de la balise ressemble à ceci:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
Dans cet exemple on a spécifié le type du document comme étant text/html. En effet un document HTML est un document texte et ce n'est pas de n'importe quel texte, c'est du HTML (brillant non?). Pour l'encodage (ou jeu de caractères), on a utilisé UTF-8. Il s'agit d'un codage universel de caractères, il couvre tous les systèmes d'écriture.

Cette balise est utile quand le serveur n'envoi pas d'entête indiquant la manière dont le navigateur doit afficher les caractères. Car il se peut que les caractères en accent ou les caractères spéciaux soient mal perçus par le navigateur qui les remplacera par des symboles étranges.

META refresh

Cette balise permet de rafraîchir la page ou rediriger le navigateur vers une autre page. Sa syntaxe ressemble à ceci:
<meta http-equiv="refresh" content="3;url=http://www.w3.org">
Si la page qui contient ce code est chargée sur le navigateur, celui ci sera redirigé vers les site de W3C après une durée d'attente de 3 secondes. Si la durée n'est pas spécifiée, alors elle vaut 0 seconde et la redirection est instantanée, et si la partie contenant le message url=http://www.w3.org n'est pas déclarée, cela sous entend que c'est la page courante qui sera rafraîchie.

META Content-Language

Cette balise permet de préciser la langue principale de la page Web.

Son code ressemble à ceci:
<meta http-equiv="Content-Language" content="fr-FR">
Ce code indique que la langue française (de la France) est la langue principale de la page Web courante.

META description

Cette balise intéresse principalement les outils de recherche (comme les moteurs de recherche). Elle contient un résumé de la page courante. Elle est très utile pour le référencement, c'est ce qui explique le soin pris par les développeurs d'y déclarer les mots clés (pertinents) susceptibles d'attirer les internautes vers leurs sites.

Son code ressemble à ceci:
<meta name="description" content="résume de la page Web">
Le résumé ne doit pas être très abondant. deux ou trois phrases pertinentes suffisent.
Dans le cours du SEO (Search Engine Optimization) nous allons voir en détail comment éditer les balises META d'une façon optimale pour préparer le sites Web au référencement.

META keywords

Cette balise renferme les mots-clé qui ont un rapport avec le contenu de la page. Elle est de moins en mois pris en considération par les outils de recherche. Elle est codée comme ceci:
<meta name="keywords" content="mot clé 1, mot clé 2, mot clé 3, ...">
Un mot clé peut être une phrase.

META generator

Cette balise permet d'indiquer l'outil utilisé pour créer le site Web. Généralement utilisé par les CMS (Content Management System). Sa déclaration permet aux auteurs de ces logiciels de faire des statistiques sur le taux d'utilisation de leur outils par les créateurs des sites Web. La syntaxe peut ressembler à ceci:
<meta name="generator" content="nom et version du logiciel">
Cette balise n'est pas utile pour le référencement.