Last active
June 25, 2020 18:21
-
-
Save veritygriscti/afb296382aeaf10bef25b12f88083c8f to your computer and use it in GitHub Desktop.
HTML5 - Basic Template with Detailed Comments
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 | |
https://www.w3schools.com/tags/att_global_lang.asp --> | |
<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: https://www.fileformat.info/info/charset/UTF-8/list.htm --> | |
<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"> | |
</head> | |
<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> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment