HTML5 Boilerplate (HTML skeleton or shell)

#html

Before we start

Let's make sure we understand that HTML is not coding or scripting. HTML is simply a mark up language. HTML5 uses tags to control the structure and rendering of content in the browser.

Because there is no programming, HTML is not really that complicated. However, clean and well-written HTML is essential element for the implementation of CSS (cascading stylesheets) and JS (JavaScript).

To start writing HTML code, you only need a text editor. If you are on Windows, I strongly recommend doing your Hello World with Notepad, and for Mac users, BBEdit (formerly TextWrangler). You could also try to use TextEdit on the Mac, but there is a few things you need to set up in order to use it to edit HTML (you may also need to turn off smart quotes on your keyboard settings).

How to save a document using Notepad

Once you feel comfortable with the most simple editors, there are many other options of enhanced text editors. My favorites are Atom, Brackets, and SublimeText, but there are plenty to choose. Please feel free to leave a comment if you would like to recommend one.

There are also some WYSIWYG editors like Dreamweaver, but I do not recommend their use until you grow your basic HTML legs.

A simple HTML5 boilerplate (with no content) looks like this:

  <!doctype HTML>
<html>
<head>
<title>The title of your page</title>

</head>
<body>
All displayed content goes between the body open and closing tags.
</body>
</html>

Let's take a few seconds to go over every line:

Basic Structure Elements of an HTML Document

<!doctype html>

The document type declaration is not really a part of the HTML document. The document type tells the browser what HTML rules to use to render the mark-up.
If the document type declaration is not included, the browser renders the page in quirk mode, that is, it tries to render the page to the best of its abilities to maximize compatibility with older browsers, but the results are hard to predict.

<html>

The html tag is the container for all the rest of the HTML tags

<head>

The head section contains the title, meta tags, scripts, styles, and any other non-content tags

<title>

The title tag is required and provides a title for the document.

Defines the title in the browser bar
provides a name for the page when bookmarked
Displays the name of the page in search results

<body>

The body is where all the content of a web page is displayed. This includes text, links, graphics, media, and everything else that will show on the browser

That is how an HTML5 boilerplate is built.
Now, go try it!

Definition Reference: www.w3schools.com