HTML5 skeleton

basic HTML start

So what makes up a HTML document? Well basically you need a DOCTYPE declaration, then inside a html element is a head element that holds links to other documents like a style sheet, other metadata and other “invisible” data about the page. The body element holds all the semantic or structural information and content of what you see in your web browser, in other words the visible data.

So, what the doctype tells the browser, or user agent, which version of HTML that you’ll be using so it knows which version of the syntax to use in parsing… in theory. In practice it’s just triggering something called quirks mode which tries to ensure your page is rendered as you intended.

Over the history of HTML there have been many versions of HTML and their related DOCTYPE declaration with file references and all sort of complications. But thanks to HTML5 the DOCTYPE declaration is a simple

All html documents should start with a DOCTYPE declaration, be it the long winded ones of the past or the new streamlined one for HTML5.

Directly after the DOCTYPE declaration you “open” the html element using the following “tag”:

This opens up the html element itself, essentially starting your html. Directly after the html tag you’d open the head tag as such:

Inside the head element goes your so called “invisible” data for your page. This includes the title element which uses the following tags:

Other metadata and links to other resources for the page go inside the head element. Even on page CSS can go here, but that’s for another article.
So once we’ve added all we need in the head element we close the element with the head closing tag, then open the body element as such:

Now here inside the body element between the body tags is where the magic happens. This is where the structure and content of the whole visible page begins.
Want to learn more? Contact me here
So in full the starter code would look something like this:

Speak Your Mind