Balise meta en HTML

Dernière mise à jour : 16/02/2022

Dans ce tutoriel, vous apprendrez à utiliser les balises META pour fournir des métadonnées sur une page Web.

Mise en place des métadonnées

Les balises <meta> sont généralement utilisées pour fournir des métadonnées structurées telles que les mots clés d'un document, la description, le nom de l'auteur, l'encodage des caractères et d'autres métadonnées. N'importe quel nombre de balises méta peut être placé à l'intérieur de la section d'en-tête d'un document HTML ou XHTML.

Les métadonnées ne seront pas affichées sur la page Web, mais seront analysables par la machine et pourront être utilisées par les navigateurs, les moteurs de recherche comme Google ou d'autres services Web.

La section suivante décrit l'utilisation des balises META à diverses fins.

Déclaration d'encodage de caractères en HTML

La balise meta généralement utilisée pour déclarer l'encodage des caractères dans un document HTML.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Déclaration d'encodage de caractères en HTML</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Pour définir l'encodage des caractères dans un document CSS, la règle @charset est utilisée.

Remarque : UTF-8 est un encodage de caractères très polyvalent et recommandé. Cependant, si cela n'est pas spécifié, alors l'encodage par défaut de la plate-forme est utilisé.

Définir l'auteur d'un document

Vous pouvez également utiliser la balise meta pour définir clairement qui est l'auteur ou le créateur de la page Web.

L'auteur peut être un particulier, l'entreprise dans son ensemble ou un tiers.

<head>
    <title>Définir l'auteur d'un document</title>
    <meta name="author" content="Jean Claude">
</head>

Remarque : L'attribut name de la balise meta définit le nom d'un élément de métadonnées au niveau du document, tandis que l'attribut content donne la valeur correspondante. La valeur d'attribut content peut contenir du texte et des entités, mais elle ne peut pas contenir de balises HTML.

Mots clés et description pour les moteurs de recherche

Certains moteurs de recherche utilisent des métadonnées, en particulier des mots-clés et des descriptions pour indexer les pages Web ; Cependant, cela n'est pas nécessairement vrai. Les mots-clés donnant un poids supplémentaire aux mots-clés et à la description d'un document fournissent un bref résumé de la page. Voici un exemple :

<head>
    <title>Mots clés et description</title>
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="Tutoriels pour les débutant en HTML, CSS, javaScript ...">
</head>

Conseil : Les moteurs de recherche utilisent souvent la méta description d'une page pour créer un bref synopsis de la page lorsqu'elle apparaît dans les résultats de recherche.

Configuration de Viewport pour les appareils mobiles

Vous pouvez utiliser la balise meta viewport pour afficher correctement les pages Web sur les appareils mobiles.

Sans la balise méta de fenêtre d'affichage (viewport), les navigateurs mobiles affichent les pages Web à des largeurs d'écran de bureau typiques, puis les réduisent pour s'adapter à l'écran mobile. Par conséquent, il faut pincer et zoomer pour afficher correctement la page Web sur les appareils mobiles, ce qui est très gênant.

La balise méta viewport vous permet de définir les meilleures limites de taille et d'échelle de la fenêtre d'affichage pour l'affichage des pages Web sur les appareils mobiles. Une définition typique de balise Meta de fenêtre d'affichage ressemblera à ceci :

<head>
    <title>Configuration du Viewport</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

La valeur width=device-width à l'intérieur de l'attribut content définit la largeur de la fenêtre d'affichage sur la même largeur que la largeur de l'écran de l'appareil, tandis que initial-scale=1 définit l'échelle initiale ou le niveau de zoom sur 100% lorsque la page est chargée pour la première fois par le navigateur.

Conseil : utilisez toujours la balise <meta> viewport dans vos pages Web. Cela rendra votre site Web convivial et plus accessible sur les appareils mobiles tels que les téléphones portables et les tablettes.

Travailler avec des éléments d'en-tête HTML Comment ajouter du javaScript aux pages HTML

Suivez nous

Table de matières

Les bases

HTML Avancé

Fonctionnalités HTML5

Table de matière