Skeletons Aren't Just for Halloween!

Web browsers read the text files that are the code for web pages from left to right and top to bottom. It is helpful to remember that when you code.

The basic HTML skeleton is comprised of the four pairs of tags listed in order below.

Every page on the web contains this skeleton (or should). From this skeleton we hang all the other parts, seen and unseen, that comprise a web page. You could also think of this skeleton as the framework for a house or building.

The Pairs

It is helpful to think of HTML tag pairs as containers; each opening and closing tag contains and effects whatever text or code that is between them.

<html></html> - Contains the entire page. Has two sub containers, head and body. Lets the browser know when the html code starts and ends.

<head></head> - Contains page information invisible to the user except the title. Can contain "meta" tags which supply additional information about the page to search engines; links to javascript or cascading style sheet files; scripts or CSS code; and other instructions to the browser.

<title></title> - Contains the text you want to appear in the title bar at the very top of the browser window. The title pair contains the only information visible to the user in the head section.

<body></body> - Contains the page information that is visible to the user. The text you are reading now is in the "body" of the web page.

The HTML skeleton is worth committing to memory. You will use it for every page that you create.

The HTML5 Skeleton

The HTML skeleton needs a few additions to make it into a standards conforming HTML5 document and thus one that will validate.

DOCTYPE

The DOCTYPE declaration is the first line of code at the beginning of your document that informs the browser just what flavor of HTML you are using. Without the DOCTYPE, your browser will render the page in "quirks" mode and give you its best guess of how you meant to display your page.

The HTML5 DOCTYPE has been streamlined, lucky for us! It only has to tell the browser that the page uses HTML and does not worry about any specific DTDs (Document Type Declarations). It looks like:

<!DOCTYPE html>

<html> Tag

The opening <html> tag in an HTML5 document is a slightly more involved than the HTML 4.0.1 tag and much simpler than the xHTML one. It looks like this:
<html lang="en">

The lang (language) attribute is not required but it is the polite thing to do for your user and their browser.

Character Set

The character set declaration is contained within a meta tag; it and other meta tags live in the head section of the XHTML document. It lets the browser know which character set to use when displaying text on the page. In general, use:
<meta charset="utf-8">

There are other character set encodings, utf-8 is the recommended one currently. Also, certain browsers need the character set just after the opening head tag.

The Complete HTML5 Skeleton

And here is what the complete HTML5 skeleton looks like:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>