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">

</html>

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.

Normalize.css is a good option.

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">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

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

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

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.