The HTML Skeleton

About This Tutorial

This is one of dozens and dozens of tutorials in the Webmaster section of the member-only area.

The tutorials can walk someone new to web design through the entire process of creating a web site. For experienced webmasters, you'll be able to jump right into specific tutorials in areas where you'd like to learn more.

All the tutorials are well-written, and technical jargon is kept to a minimum. Colored text, images, and other visual aids where appropriate help making learning easy, and bits of humor here and there help make learning fun.

The HTML Skeleton

Every web page needs just a few basic HTML elements in order to function as a web page. An element is simply a bit of code that represents a part of the page structure or appearance, such as a paragraph or the text color. These code bits are often called tags, or sometimes commands.

Below are the tags every HTML document must have. You can type the HTML tags in either lower case or upper case, but there are a few that used to cause problems in some browsers when entered in upper case.

Other languages such as XHTML require that tags be in lower case, and some people are calling for the same requirement for HTML. XHTML is supposedly the direction web design is s-l-o-w-l-y moving, but whether or not that actually evolves is yet to be seen.

Don't worry, all my tutorials are XHTML compliant (unless otherwise noted) so you needn't be concerned unless you follow tutorials from other sources (which may or may not be XHTML compliant). Either way, I do strongly urge you to code in lower case at all times. It's better to start off with a good habit so you won't have to break a bad habit.

These tags are the bare necessities:

<html>
<head>
<title> Title Text Goes Here </title>
</head>
<body>

Content Area

</body>
</html>

That is the basic HTML skeleton, but it's not really as confusing as it looks. I've shown the HTML tags in red, but these tags do not show up on a web page. They remain hidden in the source code when the page is displayed. The source code is simply the text file that contains the HTML code and content you want displayed on the page people see.

The browser interprets the HTML commands in the source code and displays your content according to those HTML instructions. If the above code were a real web page, the words "Content Area" is the only thing that would show up in a browser window.

Here's a brief explanation of each tag...

<html>: Identifies the language used (file type) for the browser, in this case, a web page written in the HTML programming language.
<head>: Acts as a container for the page title and meta data. The title is necessary, but meta data is not. You can learn more about meta data later, I don't want to clutter this up with too much information.
<title>: The title is the name of the page, more or less. The title shows up in the title bar at the top of your browser, as the text for bookmarks unless the user changes it when bookmarking the page, and in some search engines as the link text. If you look at the very top of your browser window you should see "The HTML Skeleton" as the title of this web page.
</title>: Closes the title. The forward slash ( / ) in front of the HTML element means that command is now canceled.
</head>: Closes the head section.
<body>: The body is where you place the actual content of the web page.
</body>: Closes the body section
</html>: Closes the html element, end of page.

In that list of tags, html, head, title, and body are all HTML elements. Learning to design a web site, then, is simply learning these and a few other elements, and knowing what they do. Easy!

As a member, you'd have access to dozens and dozens of quality tutorials like this one. You can hunt and hunt the web for good tutorials, or you can just come here and learn all about web design in one place.

Back