Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
HTML5 - Basic Template with Detailed Comments
<!doctype html> <!-- Tells browser that document is HTML5 -->
<html lang="en">
<!-- lang attribute specifies the language of the sites content. This version is english, a complete list is availabe at -->
<head> <!-- a container for the metadata about the website: character sets, styles, scripts etc. This info doesn't render -->
<!-- Specifies the character set for the webpage. UTF-8 is the default charset for HTML5 and the perferred charset for emails.
It can represent any character represented by the Unicode Standard. Reference table: -->
<meta charset="utf-8">
<title>Holds the Title of the Webpage</title>
<!-- Google and other search engine companies have stated that meta descriptions and keywords
don't factor into it's search algorithms, BUT the description is what's listed does appear on many SERPs
so it's important to write a compelling description as it may affect the sites Click-thru-rate.
Best Practice: treat the description as Advertising Copy -->
<meta name="description" content="A brief description about the sites content.">
<meta name="author" content="List Name or Design Company">
<!-- Automatically sets the viewport of the site to the users device width and the zoom scale to 100%.
This helps to ensure rendering accuracy across devices and is an important part of responsive design. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Links to websites style sheets. All styling info: color, fonts, background images etc
should be kept in a seperate css document -->
<link rel="stylesheet" href="css/styles.css">
<body> <!-- container for ALL VISIBILE CONTENT of the website: headers, text, images, video etc -->
<h1>The Most Important Header On The Page</h1> <!-- h1 can only be used once and affects the websites SEO -->
<p>Insert Content Here</p> <!-- Website content is typically marked up in paragraph tags -->
<!-- Loads external javascript to add enhanced functionality to the website.
This loads at the end to ensure the html/style of the website loads first and to ensure *some* functionality of
the website if there is an error/delay in loading the external scripts. -->
<script src="js/scripts.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment