html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
Top Related Projects
A modern alternative to CSS resets
A simple guide to HTML <head> elements
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
Web Starter Kit - a workflow for multi-device websites
A gulp.js generator for modern webapps
Quick Overview
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. It provides a set of files and folders that help developers quickly start new projects with a solid foundation, including HTML, CSS, and JavaScript best practices.
Pros
- Includes a well-organized file structure and sensible defaults for HTML, CSS, and JavaScript
- Incorporates best practices for performance, security, and accessibility
- Regularly updated to keep up with modern web development standards
- Highly customizable and can be used as a starting point for various types of web projects
Cons
- May include more features than needed for simple projects, potentially leading to bloat
- Requires some time to understand the structure and customize it for specific needs
- Some developers might prefer to build their own boilerplate from scratch for more control
- Could become a crutch for developers who don't fully understand the underlying technologies
Code Examples
- Basic HTML structure:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
- CSS example (main.css):
/* Main CSS file */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
- JavaScript example (main.js):
// Main JavaScript file
// Add your custom JavaScript here
document.addEventListener('DOMContentLoaded', (event) => {
console.log('HTML5 Boilerplate loaded!');
});
Getting Started
-
Clone the repository:
git clone https://github.com/h5bp/html5-boilerplate.git -
Navigate to the project directory:
cd html5-boilerplate -
Customize the HTML, CSS, and JavaScript files according to your project needs.
-
Start developing your web application using the provided structure and best practices.
Competitor Comparisons
A modern alternative to CSS resets
Pros of normalize.css
- Focused solely on CSS normalization, making it lightweight and specific
- Regularly updated to address new browser inconsistencies
- Can be easily integrated into existing projects without conflicts
Cons of normalize.css
- Lacks additional features and tools provided by HTML5 Boilerplate
- Requires more manual setup for a complete project structure
- May need supplementary CSS for a fully styled baseline
Code Comparison
normalize.css:
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
HTML5 Boilerplate:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
Summary
normalize.css is a focused CSS normalization tool, while HTML5 Boilerplate provides a more comprehensive starting point for web projects. normalize.css excels in its simplicity and ease of integration, but lacks the additional features and structure offered by HTML5 Boilerplate. The choice between the two depends on project requirements and developer preferences. normalize.css is ideal for projects needing only CSS normalization, while HTML5 Boilerplate suits those seeking a more complete frontend foundation.
A simple guide to HTML <head> elements
Pros of HEAD
- Focused specifically on
<head>elements, providing a comprehensive list of possible tags - Regularly updated with modern web standards and best practices
- Lightweight and easy to reference quickly
Cons of HEAD
- Lacks full HTML structure and body content guidance
- Doesn't include CSS, JavaScript, or other assets
- No build process or development environment setup
Code Comparison
HEAD example:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
HTML5 Boilerplate example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
Summary
HEAD is a specialized resource for <head> elements, offering a comprehensive list of possible tags and metadata. It's regularly updated but focuses solely on the document head.
HTML5 Boilerplate provides a complete starting point for web projects, including HTML structure, CSS, JavaScript, and development tools. It offers a more comprehensive solution but may include unnecessary elements for some projects.
Choose HEAD for quick reference on <head> elements or HTML5 Boilerplate for a full project starter kit with additional features and structure.
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
Pros of Front-End-Checklist
- Comprehensive checklist covering various aspects of front-end development
- Regularly updated with modern best practices and techniques
- Includes performance, SEO, and accessibility considerations
Cons of Front-End-Checklist
- Lacks actual boilerplate code or starter files
- May be overwhelming for beginners due to its extensive nature
- Requires manual implementation of each checklist item
Code Comparison
HTML5-Boilerplate provides a basic HTML structure:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
Front-End-Checklist doesn't provide code but offers guidelines:
- [ ] The `charset` is set to UTF-8 in the `<head>` (No `BOM`).
- [ ] The `<title>` is used on all pages.
- [ ] The description is correctly filled (`<meta name="description">`).
Both repositories serve different purposes. HTML5-Boilerplate offers a starting point with actual code, while Front-End-Checklist provides a comprehensive guide for best practices in front-end development. HTML5-Boilerplate is more suitable for quickly starting a project, whereas Front-End-Checklist is better for ensuring all aspects of front-end development are considered and implemented correctly.
Web Starter Kit - a workflow for multi-device websites
Pros of Web Starter Kit
- Includes a more comprehensive build process with Gulp
- Offers a responsive layout system out of the box
- Provides a service worker for offline functionality
Cons of Web Starter Kit
- Less frequently updated compared to HTML5 Boilerplate
- More opinionated structure, which may not suit all projects
- Steeper learning curve due to additional tools and features
Code Comparison
HTML5 Boilerplate (index.html):
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
Web Starter Kit (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
Both projects provide a solid starting point for web development, but they cater to different needs. HTML5 Boilerplate offers a minimal, flexible foundation suitable for various projects, while Web Starter Kit provides a more opinionated and feature-rich starting point with additional tools and structures in place. The choice between the two depends on the specific requirements of your project and your preferred development workflow.
A gulp.js generator for modern webapps
Pros of generator-webapp
- Provides a more comprehensive project scaffolding with build tools and task runners
- Offers customization options during project generation
- Includes modern development tools like Sass, Babel, and Browserify out of the box
Cons of generator-webapp
- Steeper learning curve due to more complex setup and tooling
- May include unnecessary features for simpler projects
- Requires Node.js and Yeoman to be installed
Code Comparison
html5-boilerplate:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
generator-webapp:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
Summary
html5-boilerplate provides a simpler, more lightweight starting point for web projects, focusing on essential HTML5 features and best practices. It's easier to understand and customize for beginners.
generator-webapp offers a more feature-rich development environment with modern tools and workflows. It's better suited for larger projects or developers who prefer a more opinionated setup with integrated build processes.
The choice between the two depends on project requirements, developer experience, and desired level of tooling and automation.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
HTML5 Boilerplate
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
This project is the product of over 10 years of iterative development and community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.
About This Repository
This repository is where HTML5-Boilerplate is authored. Some of the tools, files and processes that you see here are solely for the production of HTML5 Boilerplate and are not part of HTML5 Boilerplate. For one example, the gulpfile.mjs script is used to build the project. It's not part of the project itself.
The project we publish is represented by the contents of the /dist/
folder. Everything else in this repository is used to author the project.
Think of it this way, in the same way that you don't clone vuejs/core to create a Vue.js app, you don't need to clone this repository to start a new site or app based on HTML5 Boilerplate.
So, if you're looking for a quick start template to build a website or application, look at the options in the Quick Start section of this document.
If you want to help us improve HTML5 Boilerplate then you can start with the documentation here, which includes steps to clone this repo in order to get it set up for development.
Quick Start
Choose one of the following options:
-
Using the create-html5-boilerplate script, instantly fetch the latest npm published package (or any version available on npm) with
npx,npm initoryarn createwithout having to install any dependencies. Running the followingnpxcommand installs the latest version into a folder callednew-sitenpx create-html5-boilerplate new-site cd new-site npm install npm run start -
Using our new Template Repository create a new GitHub repository based on the latest code from the main branch of HTML5 Boilerplate.
-
Install with npm:
npm install html5-boilerplateor yarn:yarn add html5-boilerplate. The resultingnode_modules/html5-boilerplate/distfolder represents the latest version of the project for end users. Depending on what you want to use and how you want to use it, you may have to copy and paste the contents of that folder into your project directory. -
Download the latest stable release from here. This zip file is a snapshot of the
distfolder. On Windows, Mac and from the file manager on Linux unzipping this folder will output to a folder named something likehtml5-boilerplate_v9.0.0. From the command-line, you will need to create a folder and unzip the contents into that folder.mkdir html5-boilerplate unzip html5-boilerplate*.zip -d html5-boilerplate
Features
- A finely-tuned starter template: Reap the benefits of 10 years of analysis, research and experimentation by over 200 contributors.
- Designed with progressive enhancement in mind.
- Includes:
- Placeholder Open Graph elements and attributes.
- An example package.json file with WebPack commands built in to jumpstart application development.
- Placeholder CSS Media Queries.
- Useful CSS helper classes.
- Default print styles, performance optimized.
- "Delete-key friendly." Easy to strip out parts you don't need.
- Extensive documentation.
Browser Support
HTML5-Boilerplate supports the latest, stable releases of all major browsers.
Check the default configuration from Browserslist
for more details on browsers and versions covered.
Documentation
Take a look at the documentation table of contents. This documentation is bundled with the project which makes it available for offline reading and provides a useful starting point for any documentation you want to write about your project.
Contributing
Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to contribute. However, if you decide to get involved, please take a moment to review the guidelines:
License
The code is available under the MIT license.
Top Related Projects
A modern alternative to CSS resets
A simple guide to HTML <head> elements
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
Web Starter Kit - a workflow for multi-device websites
A gulp.js generator for modern webapps
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot