RM Partie 4 : Métadonnées et ressources externes

Partie 4 — Métadonnées et ressources externes

1) Objectifs pédagogiques

structurer correctement l’élément <head> d’une page HTML ;
configurer les métadonnées essentielles : encodage (charset), affichage mobile (viewport), titre d’onglet, description SEO ;
utiliser <link> pour relier des ressources externes (feuilles CSS, favicon) ;
charger du JavaScript externe avec <script> (aperçu des bonnes pratiques : defer, async, type="module").

2) L’élément `<head>` : rôle et ordre recommandé

Rôle

<head> contient les métadonnées et liens de ressources : rien de ce qui est dans <head> n’est rendu comme contenu principal de la page (sauf effets indirects : titre d’onglet, CSS appliqué…).

Ordre recommandé (pratique et robuste)

<!DOCTYPE html> (hors <head>, rappel)
<html lang="fr"> (rappel)
<head>
- <meta charset="utf-8">
- <meta name="viewport" …>
- <title>…</title>
- <meta name="description" content="…">
- Liens icônes (favicons), manifest éventuel
- Feuilles CSS (<link rel="stylesheet" …>)
- Scripts critiques si besoin immédiat, sinon defer ou fin de <body>
</head>

Pourquoi cet ordre ?

charset doit être le plus tôt possible pour que le navigateur lise correctement le reste du document.

viewport très tôt pour le rendu mobile correct.

title et description rapidement disponibles pour l’onglet et les moteurs.

Puis les ressources (icônes, CSS, JS).

3) Métadonnées essentielles

3.1 Encodage : `<meta charset="UTF-8">`

À placer en tout début de <head>.
UTF-8 gère les caractères spéciaux et accents sans problème.

<meta charset="utf-8">

Piège fréquent : Dupliquer l’info d’encodage (HTTP header + meta) n’est pas utile, mais acceptable. En HTML5, la forme courte ci-dessus est la bonne pratique.

3.2 Affichage mobile : `<meta name="viewport">`

Contrôle la mise en page sur smartphones/tablettes.
La valeur standard et sûre :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width : largeur logique = largeur de l’écran.
initial-scale=1.0 : zoom initial à 100 %.

À éviter (accessibilité) :

user-scalable=no, maximum-scale=1 → empêchent l’utilisateur de zoomer.

Variantes utiles (selon cas) :

<!-- Zoom initial légèrement plus grand (rarement nécessaire) -->
<meta name="viewport" content="width=device-width, initial-scale=1.1">

3.3 Titre d’onglet : `<title>`

Obligatoire. Un seul <title> par document.
Affiché dans l’onglet du navigateur et utilisé par les moteurs de recherche.
Recommandations :
- Unique par page ;
- Descriptif et concis (environ 50–60 caractères, sans rigidité excessive) ;
- Nom du site à la fin si tu veux : « Titre de l’article – Nom du site ».

<title>Initiation à HTML5 – Cours 1</title>

3.4 Description SEO : `<meta name="description">`

Facultative mais fortement recommandée. Sert de snippet dans beaucoup de résultats de recherche (si le moteur la juge pertinente).
Conseils de rédaction :
- 150–160 caractères environ (pas une règle dure ; préfère la clarté à la longueur).
- Résume le contenu réel de la page ;
- Évite les listes de mots-clés ; reste naturel et informatif ;
- Une description différente par page.

<meta name="description" content="Découvre les bases de HTML5 : structure de page, balises de texte et bonnes pratiques pour débuter côté front-end.">

Notes :

La description n’améliore pas directement le classement, mais améliore le taux de clic si elle est claire et attractive.
Si elle manque, le moteur peut afficher un extrait du contenu.

4) Lier des ressources avec `<link>`

4.1 Feuille de style CSS

<link rel="stylesheet" href="/assets/css/style.css">

Chargée de façon synchrone par défaut (peut bloquer le rendu si lourde).
Bonnes pratiques :
- Regrouper/minifier les CSS de rendu critique ;
- Éviter les CSS inutiles ou trop volumineuses ;
- Utiliser media pour des styles spécifiques (impression, grandes largeurs) :
```
<link rel="stylesheet" href="/assets/css/print.css" media="print">
```

4.2 Favicon (icône d’onglet)

Plusieurs options ; aujourd’hui, PNG et SVG sont courants. Fournir au moins un format supporté par tous :

Option moderne (SVG + PNG de secours) :

<!-- Favicon vectorielle -->
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml" sizes="any">

<!-- Fallback PNG classique -->
<link rel="icon" href="/assets/icons/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/assets/icons/favicon-16.png" type="image/png" sizes="16x16">

Apple touch icon (écran d’accueil iOS) :

<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">

Remarques :

Historiquement, favicon.ico à la racine fonctionne sans balise. Tu peux garder en plus les <link> explicites pour la clarté.
Fournir plusieurs tailles PNG (16×16, 32×32) et un 180×180 (iOS) est une base solide.
Si tu utilises un SVG, garde un PNG fallback par précaution.

(Tu n’as pas besoin de tout couvrir dans cette séance ; vise au moins une favicon fonctionnelle.)

5) Charger un JavaScript externe avec `<script>` (aperçu)

5.1 Syntaxe de base

<script src="/assets/js/app.js"></script>

Sans attributs, le chargement et l’exécution sont bloquants (mauvaise perf si placé dans <head>).
Bonnes pratiques modernes :

a) `defer` (recommandé pour scripts classiques)

<script src="/assets/js/app.js" defer></script>

Téléchargé en parallèle pendant l’analyse HTML ;
Exécuté après la fin du parsing, dans l’ordre des balises <script defer>.

b) `async` (pour scripts indépendants)

<script src="/assets/js/analytics.js" async></script>

Téléchargé en parallèle, exécuté dès qu’il est prêt (ordre non garanti) ;
À réserver aux scripts sans dépendances.

c) Modules ES : `type="module"`

<script type="module" src="/assets/js/main.js"></script>

Chargement différé par défaut (comportement proche de defer) ;
Supporte import/export natifs ;

Optionnel : fournir un fallback pour anciens navigateurs :

<script type="module" src="/assets/js/main.js"></script>
<script nomodule src="/assets/js/legacy.bundle.js"></script>

5.2 Autres attributs utiles (aperçu)

crossorigin="anonymous" : nécessaire si tu veux SRI ou des imports de modules cross-origin ;
integrity="sha384-…" : Subresource Integrity pour garantir l’intégrité d’une ressource CDN.

(Ces points sont avancés ; l’important ici est de connaître defer / async / type="module".)

6) Exemple complet de `<head>` minimal et propre

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 — Métadonnées et ressources</title>

    <meta name="description" content="Configurer le head d’une page : charset UTF-8, viewport mobile, title, description SEO, lien vers CSS, favicon, et chargement de scripts.">

    <!-- Favicon (SVG + fallback PNG) -->
    <link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml" sizes="any">
    <link rel="icon" href="/assets/icons/favicon-32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/assets/icons/favicon-16.png" type="image/png" sizes="16x16">

    <!-- CSS principal -->
    <link rel="stylesheet" href="/assets/css/style.css">

    <!-- Script de la page (différé pour ne pas bloquer le parsing) -->
    <script src="/assets/js/app.js" defer></script>
  </head>
  <body>
    <!-- … -->
  </body>
</html>

Remarques :

Pas de http-equiv="X-UA-Compatible" (obsolète/IE).
Évite de dupliquer inutilement des ressources.
Place des scripts bloquants en fin de <body> si tu ne peux pas utiliser defer.

7) Pièges fréquents

Oublier <meta charset="utf-8"> ou le mettre trop tard → caractères accentués illisibles.
Renseigner un viewport qui empêche le zoom utilisateur (user-scalable=no) → mauvaise accessibilité.
Multiplier les <title> ou des titres vagues/dédupliqués → mauvaise UX/SEO.
meta description manquante ou copié-collé partout → snippet peu pertinent.
Favicon absent ou format exotique sans fallback → icône manquante dans certains navigateurs.
Charger des scripts bloquants dans <head> sans defer → rendu lent.

8) Exercice (avec énoncé clair)

But : Ajouter un titre d’onglet, une description SEO et une favicon.

Consignes

Pars d’un fichier index.html minimal (doctype, html lang, head, body).
Dans <head>, ajoute :
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Un <title> descriptif (50–60 caractères environ)
- Une <meta name="description" …> pertinente (~150–160 caractères)
- Une favicon fonctionnelle : au choix
  1. un PNG 32×32 (avec link rel="icon" … sizes="32x32"),
  2. un SVG + fallback PNG (recommandé).
Place un <link rel="stylesheet" href="assets/css/style.css"> (même vide pour l’instant).
(Optionnel) Ajoute un script externe avec defer.

Arborescence suggérée

/index.html
/assets/css/style.css
/assets/icons/favicon-32.png
/assets/icons/favicon.svg (optionnel)

9) Corrigé possible

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Découvrir HTML5 — Métadonnées, CSS et favicon</title>

    <meta name="description" content="Apprends à configurer le head d’une page HTML5 : encodage UTF-8, viewport pour mobiles, titre d’onglet, description SEO, favicon et lien vers la feuille de styles.">

    <!-- Favicon : SVG + fallback PNG -->
    <link rel="icon" href="assets/icons/favicon.svg" type="image/svg+xml" sizes="any">
    <link rel="icon" href="assets/icons/favicon-32.png" type="image/png" sizes="32x32">

    <!-- CSS principal -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- (Optionnel) Script non bloquant -->
    <script src="assets/js/app.js" defer></script>
  </head>
  <body>
    <h1>Page de démonstration</h1>
    <p>Cette page teste le titre, la description et la favicon.</p>
  </body>
</html>

10) Mini-quiz

Pourquoi <meta charset="utf-8"> doit-il être placé au début du <head> ?
Donne une configuration viewport correcte et explique les deux paramètres principaux.
Quelles sont les caractéristiques d’un bon <title> ?
À quoi sert <meta name="description"> et quelle longueur viser ?
Donne deux façons valides de déclarer une favicon.
Différence entre <script defer> et <script async> ?
Que fait type="module" sur une balise <script> ?

Corrigé bref

Pour garantir l’interprétation correcte des caractères dès le parsing.
width=device-width, initial-scale=1.0 : largeur logique = écran ; zoom initial à 100 %.
Unique, descriptif, concis (~50–60 caractères), pertinent pour la page.
Fournir un résumé pour le snippet ; ~150–160 caractères, informatif et unique.
link rel="icon" href="favicon.svg" type="image/svg+xml" + fallback PNG 32x32, ou favicon.ico à la racine (avec/ou sans <link> explicite).
defer : exécution après parsing, ordre préservé ; async : exécution dès disponibilité, ordre non garanti.
Active les modules ES (imports), comportement de chargement de type defer par défaut.

11) Fiche-mémo

<head> : métadonnées & liens — pas de contenu principal.
Ordre : charset → viewport → title → description → icônes → CSS → JS.
UTF-8 : <meta charset="utf-8"> (tout en haut).
Mobile : <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Titre : unique, clair, concis.
Description : unique, informative (~150–160 car.), améliore le snippet.
CSS : <link rel="stylesheet" href="…"> (+ media si nécessaire).
Favicon : link rel="icon" (SVG ou PNG, tailles courantes 16/32, 180 pour iOS).
JS : préférer defer ou type="module" ; async pour scripts indépendants.