Your HTML 5 Skeleton Boilerplate

2019-10-19 • ☕️ 3 min read

Embarking on a new HTML5 project often begins with a blank canvas for me. I tend to steer clear of frameworks initially, preferring to build from the ground up. When it comes to laying a solid foundation, HTML5 Boilerplate stands out as an invaluable resource, encapsulating the collective wisdom of hundreds of top-tier developers.

Let's dissect a basic HTML5 page structure, highlighting key elements and best practices within the markup.

1. Declare the document type

It is simply a way to tell the browser - or any other parser - what type of document it is looking at.

<!DOCTYPE html>

2. Define the html element

The html element with lang attribute has a value of en, which specifies that the document is in English, defines it as the language of the element's content.

<!DOCTYPE html>
<html lang="en">


3. Define the character encoding

The first line of the header is the one that defines the character encoding of the document. UTF-8 is the value you will use in your documents, in almost all cases.

<meta charset="utf-8">

4. Define the width of the viewport

The viewport is the area of a web page that is visible to the user. The viewport varies by device and will be smaller on a cell phone than on a computer screen.

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

5. Reset browser inconsistencies with a CSS reset

The purpose of a reset style sheet is to reduce browser inconsistencies in areas such as default line heights, title margins and font sizes, etc.

6. Include links to custom css file

Define the style sheet. Create a link element in the header area of the HTML page to define the link between the HTML file and the CSS file.

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

7. Include links to custom javascript file

Define the script file. Create a script element in the head or body area of the HTML page to define the script between the HTML and the JavaScript file.

<script type="text/javascript" src="/path/to/js/script.js"></script>

Basic HTML5 page

Keep your code concise and simple.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


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

    <script src="/path/to/js/script.js"></script>

Next steps

Here are some modern and responsive HTML5 frameworks that you could consider to extend your boilerplate skeleton. They play an important role in creating websites in less time.

  1. Chakra UI
  2. Ark UI
  3. Tailwind CSS
  4. ShadCN/UI
  5. React Aria
  6. Next UI
  7. Ant Design
  8. Material UI
  9. Radix UI
  10. Twitter Bootstrap