Boilerplate HTML : un modèle moderne, expliqué ligne à ligne

Générateur de boilerplate HTML

Boilerplate HTML : modèle annoté et générateur | We.Inc

Un boilerplate HTML5 moderne expliqué ligne à ligne, avec un générateur pour le titre, la description, la langue, Open Graph, les favicons, la couleur de thème et les liens CSS ou JS. Copiez ou téléchargez index.html.

Un boilerplate HTML5 minimal a besoin d'un doctype, d'un élément html avec un attribut lang, d'un head contenant le charset UTF-8, la balise meta viewport, un titre et une description, puis d'un body. Liez le CSS avec une balise link dans le head et le JavaScript avec une balise script différée. Générez le vôtre ci-dessous et téléchargez index.html.

Les lignes dont chaque page a besoin

Ligne
Pourquoi

<!doctype html>
Active le mode standards

<html lang="en">
Langue pour les lecteurs d'écran et la traduction

<meta charset="utf-8">
Caractères et symboles corrects

<meta name="viewport" ...>
Mise à l'échelle correcte sur téléphone

<title>
Texte de l'onglet et titre du résultat de recherche

Le générateur écrit un index.html complet et valide à partir de quelques options : titre et description de la page, langue, balises Open Graph pour les aperçus de liens, un jeu de favicons, une couleur de thème, des indications preconnect et les liens vers votre feuille de style et votre script avec l'attribut de chargement de votre choix. Chaque ligne qu'il peut produire est expliquée dans le modèle annoté plus bas.

Renseignez le titre, la description et la langue, et activez les options supplémentaires que vous voulez.
Choisissez le mode de chargement du script : defer, module ou async. L'aperçu du fichier se met à jour au fur et à mesure.
Copiez le code ou téléchargez-le sous forme d'index.html, prêt à ouvrir dans un navigateur ou un éditeur.
Lisez la version annotée ci-dessous pour comprendre chaque ligne avant de mettre en ligne.

Gardez la meta charset dans les 1024 premiers octets du fichier. La placer en premier dans le head est le moyen le plus simple d'en être sûr.
Écrivez un titre et une description uniques pour chaque page. Les moteurs de recherche les affichent souvent comme titre et extrait du résultat.
Évitez maximum-scale=1 ou user-scalable=no dans la balise viewport. Bloquer le zoom pénalise les lecteurs qui ont besoin d'un texte plus grand.
Chargez les scripts avec defer dans le head plutôt qu'à la fin du body. Le fichier se télécharge tôt et s'exécute quand même après l'analyse.
Utilisez des URL absolues pour og:image. Les réseaux sociaux la récupèrent depuis leurs propres serveurs et ne peuvent pas résoudre un chemin relatif.

Questions fréquentes

Comment lier un fichier CSS à du HTML ?

Ajoutez <link rel="stylesheet" href="styles.css"> dans le head. Le href est relatif au fichier HTML, donc css/styles.css pointe vers un dossier css situé à côté. Les feuilles de style dans le head bloquent brièvement le rendu, et c'est voulu : cela évite un affichage furtif de contenu sans style.

Où placer la balise script ?

Dans le head avec defer, par exemple <script src="app.js" defer></script>. Le navigateur la récupère en parallèle de l'analyse et l'exécute une fois le document analysé, dans l'ordre. Les scripts type="module" sont différés automatiquement. N'utilisez async que pour des scripts indépendants comme l'analytics.

Ai-je besoin de la balise meta X-UA-Compatible ?

Non. Elle ne concernait que les anciennes versions d'Internet Explorer, qui n'est plus pris en charge par Microsoft. Les boilerplates actuels l'omettent.

De quels fichiers favicon ai-je vraiment besoin ?

Un favicon.ico à la racine du site pour les anciens outils et les robots d'exploration, une icône SVG pour les navigateurs modernes et un PNG apple-touch-icon de 180 par 180 pixels pour les écrans d'accueil iOS couvrent presque tous les cas. Un manifeste de web app ajoute des icônes plus grandes si vous voulez que le site soit installable.

Quelle est la différence entre defer et async ?

Les deux téléchargent sans bloquer l'analyseur. defer attend la fin de l'analyse et conserve l'ordre des scripts dans le document. async exécute chaque script dès son arrivée, dans n'importe quel ordre, ce qui peut casser les scripts qui dépendent les uns des autres ou du DOM.

Ce qui va dans le head

Le head contient des informations sur la page plutôt que du contenu : jeu de caractères, viewport, titre, description, liens vers les feuilles de style, icônes et balises d'aperçu social. Rien de ce qu'il contient ne s'affiche dans le corps de la page.
L'ordre compte un peu. Le charset d'abord, puis le viewport, puis le titre et la description. Placez les indications preconnect avant les feuilles de style qui en ont besoin pour que la connexion démarre le plus tôt possible.

Open Graph et aperçus de liens

Quand quelqu'un partage votre URL dans une messagerie ou sur un réseau social, la carte d'aperçu provient de og:title, og:description, og:image et og:url. Sans elles, les plateformes devinent, souvent mal.
Une image de 1200 par 630 pixels fonctionne sur les principaux réseaux. twitter:card réglé sur summary_large_image demande à X la grande version de la carte.

Le boilerplate, ligne à ligne

Un index.html moderne complet

Tout ce dont une page en production a généralement besoin, rien de superflu. Le tableau ci-dessous explique chaque ligne.

Ce que fait chaque ligne

Ligne
Ce qu'elle fait
Obligatoire ?

<!doctype html>
Indique au navigateur d'utiliser le mode standards au lieu du mode quirks
Oui

<html lang="en">
Déclare la langue de la page pour les technologies d'assistance, la césure et la traduction
Oui

<meta charset="utf-8">
Encodage des caractères pour que les accents, symboles et emoji s'affichent correctement
Oui

<meta name="viewport" content="width=device-width, initial-scale=1">
Empêche les téléphones d'afficher une page de bureau dézoomée
Oui

<title>
Onglet du navigateur, favoris et généralement titre du résultat de recherche
Oui

<meta name="description">
Souvent utilisée comme extrait dans les résultats de recherche
Fortement recommandé

<link rel="canonical">
L'URL préférée quand la page est accessible à plusieurs adresses
Recommandé

<meta name="theme-color">
Colore la barre d'outils sur certains navigateurs mobiles
Facultatif

<link rel="icon"> et apple-touch-icon
Icône de l'onglet et icône de l'écran d'accueil
Recommandé

Balises meta og: et twitter:
Titre, texte et image pour les aperçus de liens partagés
Recommandé

<link rel="preconnect">
Ouvre une connexion vers une autre origine avant qu'elle soit nécessaire
Facultatif

<link rel="stylesheet">
Charge votre CSS
Si vous avez du CSS

<script defer>
Charge le JavaScript sans bloquer l'analyse, l'exécute après
Si vous avez du JS

<main>
Signale le contenu principal aux technologies d'assistance
Recommandé

Lier du CSS à du HTML

Trois façons d'ajouter du CSS

Un fichier externe est la norme car le navigateur le met en cache d'une page à l'autre. Un bloc style convient aux règles propres à une page ; l'attribut style convient aux valeurs ponctuelles.

Les chemins relatifs expliqués

La plupart des feuilles de style qui ne se chargent pas ont un mauvais chemin. Cherchez une erreur 404 dans le panneau réseau des outils de développement.

Lier correctement le JavaScript

Options de chargement des scripts

Balisage
Bloque l'analyse ?
S'exécute quand
Ordre conservé ?

<script src="a.js">
Oui
Immédiatement quand il est atteint
Oui

<script src="a.js" defer>
Non
Après l'analyse, avant DOMContentLoaded
Oui

<script src="a.js" async>
Non (pause brève pour s'exécuter)
Dès qu'il est téléchargé
Non

<script type="module" src="a.js">
Non
Comme defer
Oui

Balises script recommandées

Les modules bénéficient du mode strict, de leur propre portée et de la prise en charge d'import. nomodule permet de servir une solution de repli aux très anciens navigateurs si vous en avez encore besoin.

Générateur de boilerplate

Titre de la page

Code de langue

en, fr, es-MX

Description

URL de la page (canonical et og:url)

Chemin de la feuille de style (vide si aucune)

Chemin du script (vide si aucun)

Chargement du script

Balises Open Graph et Twitter

Jeu de favicons

Preconnect vers Google Fonts

og:image (URL absolue)

Couleur de thème

Copier le HTML

Télécharger index.html

Commencer gratuitement · Sans carte bancaire