Skip to content

HTML5 Boilerplate

A starter template of HTML, CSS and JavaScript files for building fast, robust websites.

Stars
57.7k
Forks
12.2k
Licence
MIT
Language
JavaScript
Last update
5 days ago
Type
Other

What it is

HTML5 Boilerplate is a front-end starter template: a set of ready-made HTML, CSS and JavaScript files that give a new website a sensible foundation. It includes things like placeholder meta and Open Graph tags, CSS helper classes, media query placeholders and print styles. It does not force a specific framework, so people can build on it in whatever way they prefer.

  • Create a new site folder with the create-html5-boilerplate script via npx
  • Use the dist folder as a starting point for a static website
  • Install the html5-boilerplate npm package and copy its dist folder into a project
  • Start a new GitHub repository from the project's Template Repository

Great for

  • Developers starting a new static website who want a tested baseline
  • Front-end developers who want placeholder meta tags and CSS helpers already in place
  • Teams that want to avoid choosing a framework up front
  • Developers who prefer to strip out unused parts of a starter

Not ideal for

  • People who want a complete framework with components and routing, since the README says it does not impose a framework or philosophy
  • Beginners looking for a visual website builder, since it is a set of code files
  • Projects that need a specific build tool, as the bundled webpack setup is only an example
Step-by-step guide: how to use HTML5 BoilerplateInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm (needed for the npx and npm commands shown in the README)

    Create a new site with the create-html5-boilerplate script

    npx create-html5-boilerplate new-site

    Install dependencies in the new site

    npm install

    Start the project

    npm run start
  2. 2

    Run it

    • Run npx create-html5-boilerplate new-site to create a folder called new-site
    • Change into the new-site folder with cd new-site
    • Run npm install to install dependencies
    • Run npm run start and open the project in a browser
  3. 3

    Get the most out of it

    • Read the bundled documentation starting at docs/TOC.md, which is available offline
    • Use the placeholder Open Graph elements and attributes to set up social sharing metadata
    • Use the included CSS helper classes and media query placeholders as a starting point for layout
    • Use the example package.json webpack commands as a base for application development

Downloads

Strengths

  • Built on years of iterative development and community contributions, according to the README
  • Designed with progressive enhancement in mind
  • Easy to remove parts you do not need, as the README describes it as delete-key friendly

Trade-offs

  • Only a starter template, so you still need to build the site and decide on your own tools
  • The README does not specify exact browser versions beyond pointing to Browserslist defaults
  • Some files in the repository are for maintaining the project and are not needed by users

How it compares

ProjectStarsTypeLevelUpdatedBest for
html5-boilerplate (this)57.7kOtherbeginner5 days agoDevelopers starting a new static website who want a tested baseline
bootstrap175kLibrarybeginner4 days agoDevelopers building responsive websites or web app interfaces quickly
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
Skeleton19.3kLibrarybeginner3.0 years agoDevelopers who want a simple responsive grid without a build tool
milligram10.2kLibrarybeginner2 months agoDevelopers who want a light starting point for a simple website or prototype
guiadevbrasil15.8kCurated listbeginner2 months agoBrazilian Portuguese speakers starting out in programming

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.