HTML Tutorial: Basic HTML

Below are the tags every HTML document must have. In the past you could type the HTML tags in either lower case or capital letters, but there are a few that cause problems in certain browsers when entered in upper case.

Nowadays, because other languages such as XHTML require that tags be in lower case, and because many people are calling for the same requirement for HTML, I strongly urge you to code in lower case at all times. It may seem fussy, but cross-platform display consistency is the goal, and that can only be accomplished by having standards everyone follows.

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 the tags themselves do not show up on a web page unless an error is made. They are in the "source code," which is simply the underlying text file that contains the HTML code and content you want displayed for people see.

The browser interprets the HTML tags in the source code and displays your content according to those tags. It may help you to understand the concept by thinking of HTML tags as little instruction sets that inform the browser how to display the actual content.

If the above code were a real web page, the words "Content Area" would be 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 HTML 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. The title shows up in the title bar at the top of your browser, as the text for bookmarks unless it's changed, 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 Explained" 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>: Between the opening and closing body tags is where you place the actual content you want displayed to the public.
</body>: Closes the body section
</html>: Closes the html element, end of page.

On the next page we'll introduce something new, tag attributes.

Back | Next: HTML Attributes and Values | Web Design Tutorials Index

This was part two of a 4-part HTML Tutorial titled

HTML Tutorial: Basic HTML

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]