Lorsque vous lancez un nouveau site web, il doit impérativement être compatible HTML5 pour une performance optimale. Pas envie de repartir de zéro et de maîtriser toutes les subtilités du HTML5 ? C'est compréhensible.
Heureusement, HTML5 Boilerplate est la solution idéale. Ce modèle frontal professionnel vous permet de démarrer un site HTML5 en quelques minutes seulement. Puissant et extensible, il sert de base solide même pour des projets complexes.
Ce tutoriel complet explore le contenu du modèle, les essentiels pour l'utiliser et des ressources pour aller plus loin. Je vous montre aussi comment j'ai créé un site basique avec quelques lignes de HTML uniquement.
En téléchargeant HTML5 Boilerplate depuis son site officiel, vous obtenez une structure complète de dossiers et fichiers. Voici le contenu du fichier ZIP :
css
--- main.css
--- normalize.css
doc
img
js
--- main.js
--- plugins.js
--- vendor
--- jquery.min.js
--- modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngNous nous concentrerons sur les bases ici. Pour exploiter pleinement le modèle, consultez d'abord la documentation fournie.
La documentation exhaustive est hébergée sur GitHub et incluse dans le dossier doc sous forme de fichiers Markdown (.md). Parfaite pour résoudre des questions techniques ou comprendre les choix de conception.
Commencez par TOC.md pour naviguer, ou usage.md pour un aperçu rapide. Recherchez le fichier correspondant à votre besoin.
Le modèle inclut deux fichiers CSS essentiels : main.css et normalize.css.
normalize.css assure une cohérence de rendu entre navigateurs. Découvrez plus sur GitHub.
main.css est votre espace pour les styles personnalisés. Le CSS par défaut, issu d'expertise communautaire, est optimisé pour tous les navigateurs.
Ajoutez vos règles dans la section "Styles personnalisés". Exemple pour des liens stylés :
Des classes utilitaires (masquage, responsive, impression) sont incluses, commentées clairement.
Partez du CSS de base pour une fondation fiable.
Deux fichiers HTML : 404.html et index.html.
Modifiez index.html pour votre page d'accueil. Remplacez le code Google Analytics ("UA-XXXXX-Y") par le vôtre.
Le reste intègre métadonnées HTML5, polyfills et scripts prêts à l'emploi. Ajoutez votre contenu entre les balises <body> :
Pour plus de pages, dupliquez index.html et renommez. Personnalisez 404.html pour une erreur 404 créative.
Remplacez favicon.ico (16x16 pixels, format .ico). Utilisez un générateur en ligne si besoin. Inspirez-vous des meilleurs favicons.
Autres icônes : icon.png (Apple Touch), tile.png et tile-wide.png (Windows 10).
Priorisez selon vos besoins (PWA ou non).
Votre site est prêt : HTML personnalisé, CSS, favicon. Uploadez sur serveur et publiez !
Quelques lignes suffisent pour un site fonctionnel et extensible. Explorez la doc pour plus, ou nos tutoriels web avancés.
[]