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.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/styles.css"> <link rel="icon" href="img/favicon.png"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/scripts.js"></script> </body> </html>
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.
Declare The Document Language
It’s also good practice to declare the language of the webpage. In this case, we’re using English.
Specify The Character Coding
New in HTML5, this line defines the character encoding of the document.
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.
Link To External Scripts
Please show support by sharing my content!