<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Définition et utilisation
Les métadonnées sont des données (informations) sur les données.
La balise <meta> fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, mais seront analysables par la machine.
Les méta-éléments sont généralement utilisés pour spécifier la description de la page, les mots-clés, l’auteur du document, la dernière modification et d’autres métadonnées.
Les métadonnées peuvent être utilisées par les navigateurs (comment afficher le contenu ou recharger la page), les moteurs de recherche (mots-clés) ou d’autres services Web.
HTML5 a introduit une méthode permettant aux concepteurs Web de prendre le contrôle de la fenêtre d’affichage (la zone visible de l’utilisateur d’une page Web) via la balise <meta>.
Conseils et notes
Note : Les balises <meta> vont toujours dans l’élément <head>.
Remarque : Les métadonnées sont toujours transmises en tant que paires nom / valeur.
Remarque: L’attribut de contenu DOIT être défini si le nom ou l’attribut http-equiv est défini. Si aucun d’entre eux n’est défini, l’attribut de contenu NE PEUT PAS être défini.
Réglage de la vue
HTML5 a introduit une méthode permettant aux concepteurs Web de prendre le contrôle de la fenêtre d’affichage via la balise <meta>.
La fenêtre est la zone visible de l’utilisateur d’une page Web. Il varie en fonction de l’appareil et sera plus petit sur un téléphone mobile que sur un écran d’ordinateur.
Vous devez inclure l’élément <meta> viewport suivant dans toutes vos pages Web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un élément <meta> viewport donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l’échelle de la page.
La partie width=device-width définit la largeur de la page en fonction de la largeur d’écran de l’appareil (qui varie en fonction de l’appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Exemples
Définir des mots-clés pour les moteurs de recherche
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Définir une description de votre page web
<meta name="description" content="Free Web tutorials on HTML and CSS">
Définir l’auteur d’une page
<meta name="author" content="John Doe">
Actualiser le document toutes les 30 secondes
<meta http-equiv="refresh" content="30">
Définition de la fenêtre d’affichage pour que votre site Web soit attrayant/bien restitué sur tous les appareils
<meta name="viewport" content="width=device-width, initial-scale=1.0">