The HTML Skeleton

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.

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

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 XHTML Skeleton

The HTML skeleton needs a few additions to make it into a standards conforming XHTML (or HTML 4.0.1 and 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 XHTML/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.

There are three "flavors" of XHTML DOCTYPEs; Transitional, Strict, and Frameset

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Transitional DOCTYPE will validate with deprecated tags and tag attributes from HTML 4.0.1 except for framesets. We will be using the Transitional DOCTYPE for this class!
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Strict DOCTYPE is as it is titled, very strict. No deprecated tags and tag attributes allowed. It does produce lean code though...
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    Frameset DOCTYPE allows deprecated tags and tag attributes from HTML 4.0.1 including framesets. We will use this DOCTYPE for the framesets exercise.

<html> Tag

The opening <html> tag in an XHTML document is a more involved than the HTML 4.0.1 tag. It looks like this:
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML follows the same syntax rules as xml; the attribute xmlns (xml name space) leads the browser to a document with the rules the page must follow.

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. For the webhawks.org server, use:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Other servers may not "force" the utf-8 standard or you may have created your files with a different character set. Another common character set is:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

What does the XHTML skeleton look like with all these additions? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body>

</body>
</html>

Jump into the future, go see the HTML5 skeleton!

bottom graphic for DM 60A pages