HTML Snippet – Basic HTML5 Page Template


I quite often find myself retyping the same HTML5 layout over and over again, which can begin to get fairly repetitive. So I’ve composed a simple backbone template for creating HTML documents, containing some essential components and attributes to keep you covered in your next web project.

Despite the fact that there are some extremely useful frameworks out there (namely, HTML5 Boilerplate) it can be a lot more effective to start from scratch. This allows you to better understand the language you’re using and provides much more flexibility with the foundation on which you’re working with.



HTML5 Template

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


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/favicon.png">



<script src=""></script>
<script src="js/scripts.js"></script>






Declare The Document Type

This is an essential starting point for any HTML5 document, and tells the browser which version or flavour is HTML the document is written in.

<!doctype html>



Declare The Document Language

It’s also good practice to declare the language of the webpage. In this case, we’re using English.

<html lang=”en”>



Specify The Character Coding

New in HTML5, this line defines the character encoding of the document.

<meta charset=”utf-8″>



Define The Viewport Width

By specifying the width of the viewport, it prevents zooming and horizontal scrolling and provides better optimisation for mobile technology.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>



Create a Page Title

Of course, the <title> tags are used to create a page title, displayed in the browser.




Link To External Style Sheets

Include links to external CSS files to add better styling and flexibility. Common paths might include css/styles.css and css/main.css.

<link rel=”stylesheet” href=”css/styles.css”>



Define The Favicon

If you want to add a favicon to your webpage, add this to your HTML5 document. Common paths include img/favicon.png and images/favicon.png.

<link rel=”icon” href=”img/favicon.png”>



Include a jQuery Library

If you’re planning to use jQuery, include a jQuery library! Google is one of the most popular library hosts.

<script src=””></script>



Link To External Scripts

Using Javascript? Remember to include links to your scripts! Common paths include js/scripts.js and javascript/scripts.js.

<script src=”js/scripts.js”></script>




Please show support by sharing my content!