`meta charset`, `viewport`, `author` et `description`
Ajoutez les balises meta essentielles au rendu et à la découvrabilité.
`meta charset`, `viewport`, `author` et `description` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
L’élément meta
L’élément <meta> fournit des métadonnées sur la page. C’est un élément vide — il n’a pas de balise fermante :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML5 from scratch.">
<meta name="author" content="Jane Smith">
</head>Encodage des caractères avec meta
Déclare l’encodage des caractères :
<meta charset="UTF-8">
<!-- Must be:
- Inside <head>
- Within the first 1024 bytes of the file
- Best: the first tag inside <head>
- Always use UTF-8 for web pages
-->Méta de la fenêtre d’affichage
La balise meta de la fenêtre d’affichage contrôle le rendu sur les appareils mobiles :
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->Valeurs du contenu de la fenêtre d’affichage
Voici d’autres valeurs de la fenêtre d’affichage que vous pouvez rencontrer :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->
<!-- AVOID: user-scalable=no
It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->Description meta
La balise meta de description fournit un résumé utilisé dans les résultats de recherche :
<meta name="description" content="
Learn HTML5 semantic elements, forms, accessibility,
and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->Auteur meta
La balise meta d’auteur identifie l’auteur de la page :
<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->Méta des mots-clés (obsolète)
La balise meta des mots-clés était autrefois importante, mais elle est désormais ignorée :
<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->Attribut http-equiv de meta
L’attribut http-equiv simule des en-têtes de réponse HTTP :
<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">
<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">Méta robots
La balise meta robots contrôle l’exploration par les moteurs de recherche :
<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->
<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">Aperçu des métadonnées avec Open Graph
Une section head correctement configurée :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Forms Guide — CoddyKit</title>
<meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
<meta name="author" content="CoddyKit Team">
<link rel="canonical" href="https://coddykit.com/html/forms">
</head>Méta generator
La balise meta generator identifie l’outil qui a créé la page :
<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
Some recommend removing it -->Vérification rapide
Quelle balise meta est essentielle pour une mise en page adaptative sur les appareils mobiles ?
Récapitulatif : balises meta
Balises meta essentielles :
<meta charset="UTF-8">— toujours en premier dans head<meta name="viewport" ...>— obligatoire pour une mise en page adaptative<meta name="description">— extrait SERP de 150 à 160 caractères<meta name="author">— attribution du contenu à son auteur- keywords est obsolète ; robots contrôle les robots d’exploration
Questions Fréquemment Posées
La leçon « `meta charset`, `viewport`, `author` et `description` » est-elle gratuite ?
Oui — le texte complet de « `meta charset`, `viewport`, `author` et `description` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `meta charset`, `viewport`, `author` et `description` » ?
Ajoutez les balises meta essentielles au rendu et à la découvrabilité. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « `meta charset`, `viewport`, `author` et `description` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- `title` et son rôle dans le SEO
- `meta charset`, `viewport`, `author` et `description`
- URL canoniques et meta `robots`
- Favicon et icône Apple Touch