HTML5 Boilerplate

This article will give you a simple HTML5 boilerplate that you can copy, and use as you please.

HTML can be more useful to you if you use proper HTML, and this article contains the HTML5 code you can and should use on page. While you can actually add additional HTML code, this is the bare minimum I would recommend using in any web page. Using valid and proper HTML has many advantages including having your site display properly in most browsers.

HTML5 Boilerplate code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>

</body>
</html>

A Description Of The HTML5 Boilerplate code

Now for a quick description of what all the code does. The top part, with the doctype declaration<!DOCTYPE html>, tells the browser that it should render the page as HTML. For this element to work, it MUST be the first line of an HTML page.

The html element

Next, the html tags, which are recommended on every HTML page, are the parent of all other HTML tags. The start tag is the <html> and the end part of it is the </html> part.

The head element

Next, is the head element and its closing tag. The head element is basically about metadata, which could potentially include many things such as the title, language information, and more. Additionally, this is likely where you should link to any CSS style sheets and many kinds of scripts such as Javascript scripts. The head element starts with <head> and ends with </head>.

The title and meta elements

Next, are the title, meta charset, and meta name=”viewport” tags. The <title> tag and its ending tag </title> will show the title which is displayed in the tab of a browser. So, for example, when you go to google.com, you will see the Google logo and the name “Google” in the tab. The name Google is the title. You could verify this by looking at the Google.com code and seeing <title>Google</title>. Next, is the <meta charset=”utf-8″> part. Note, this element does not need a closing tag. The charset information tells the browser to render the text as UTF-8. Basically, UTF-8 supports nearly all languages, emoijs, and in fact supports more than 1 million code points. Generally, you shouldn’t use ANSI or other encodings now. UTF-8 is the way to go with encoding, and if you do that, it is very likely any browser would render the text correctly, no matter which language you use.

The part with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
is so that the website will scale properly in a mobile device.

The body element

Finally is the body element with its opening <body> and closing </body> tags. The body tag is basically where you should put all of the content of your web page inside of. The <head> tag is where you should put meta information in, but the body tag is where all real content should go. You will likely be using <p>, <div>, <a> tags, and many more, and these should all go in the body element.

Do you have anything to add? Let’s discuss it in the comments below.

Posted on Categories HTML

Leave a Reply

Your email address will not be published. Required fields are marked *