HTML5 Template For Starting Project
As you start learning HTML5, you will want to build yourself a boilerplate from which you can begin all your HTML-based projects.
In this article, we will take a look at a simple boilerplate HTML5 code for any project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="CodeSpot">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
HTML5 template for starting project
Now let’s see what are the significant parts of the markup and why are they important.
The Doctype
On the top, we have the Document Type Declaration or doctype. This is nothing more than a way to the browser what type of document it’s looking at. In the case of HTML, it means the specific version of the HTML document. The doctype should always be on top of the HTML file.
<!doctype html>
HTML5 document type declaration
The html element
Next is the html element which has included the lang attribute with a value of en, which specifies that the document is in the English language. The html element has not changed much in the HTML5.
<!doctype html>
<html lang="en">
</html>
The head element
The head element is the container for metadata (Metadata is data about the HTML document. Metadata is not displayed). In the head element we typically define:
meta- meta element is for metadatatitle- title element is for the page titlelink- link element is for external style sheet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="CodeSpot">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
</html>
the body element
The body element contains all the contents of an HTML document. In the body element we typically define elements like headings, paragraphs, images, hyperlinks, tables, lists. At the bottom of the body element we also define:
script- script element is used to embed a client-side script (JavaScript).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="CodeSpot">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
Putting scripts at the bottom of the body is considered the best practice for embedding JavaScript. This is important for page-loading speed; when a browser sees a script tag, it will pause downloading and rendering the rest of the page while it parses the script. This way the page loads much more slowly when large scripts are included at the top of the page before any content.
In some special cases, the script may need to be placed in the head of your document, to take effect before the browser starts rendering the page.
Tweet