La balise méta contient des métadonnées sur le document HTML. Il peut inclure des informations telles que le nom de l’auteur, le titre du document, des mots-clés et un jeu de caractères.
Attributs meta:
charset – Spécifie l’encodage du document.
content – Définit la valeur d’un attribut spécifié avec name ou http-equiv.
http-equiv – Conçu pour convertir la balise méta en titre HTTP.
name – Le nom de la balise méta établit également indirectement son objectif.
<head> <meta charset="UTF-8"> <meta name="description" content="Ceci est la description de la page Web"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Ivan Ivanov"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma page de test</title> </head>
<meta name="twitter:title" content="MDN Web Docs" />
L’un des résultats de l’ajout de ces métadonnées est que lorsque vous ajoutez un lien MDN Web Docs vers Facebook, il apparaîtra avec une image et une description, améliorant ainsi l’expérience utilisateur _(User eXperience, UX)_:
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> <meta property="og:description" content="La documentation Web sur MDN fournit fournit des informations sur les technologies Web ouvertes, notamment HTML, CSS et diverses API de sites Web. et applications Web progressives. Le site contient également des informations destinées aux développeurs sur ces Produits Mozilla comme les outils de développement Firefox." /> <meta property="og:title" content="MDN Web Docs" />
Vous pouvez spécifier différentes icônes pour différents appareils. Par exemple, sur la page principale MDN:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!-- Pour iPad 3 avec écran Retina haute définition: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- Pour iPhone avec écran Retina haute définition: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- Pour iPad première et deuxième génération: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- Pour iPhone, iPod Touch sans Retina et appareils avec Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- Pour les autres cas - normal favicon --> <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
Connecter CSS et JavaScript
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js"></script>
CSS et JavaScript en ligne
<script> .............. </script> <style> ................. </style>
Langue principale de la page HTML
<html lang="ru"> <html lang="en-US">
