Last update: July 2003

HTML and CSS tutorial

Tutorial 2: Valid HTML

In the first HTML tutorial we had a look at two small HTML fragments. We also saw a few often-used HTML elements, like the h1 heading element, and the p paragraph element.

The HTML fragments you saw in the previous tutorial were not complete and valid HTML documents. A few lines of text was missing. When you have completed this tutorial you will know what it takes to write a complete valid HTML file.

Document type declaration, html and body element

The HTML examples we saw in the previous HTML tutorial are not valid HTML documents. They are HTML fragments. For those examples to become valid HTML documents you must add a few lines of text in front and after the text you have already seen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
  4.0 Transitional//EN">
<html>
<body>

<h1>Cobb salad</h1>
<p>
Cobb salad is a tasty salad, one 
of my favorites!
</p>

</body>
</html>

Here I have added the necessary lines of text to the first example we looked at in tutorial one.

Document type declaration

The first and second line of the example is a Document type declaration. Basically the document type declaration tells the web browser what variant of HTML the document is marked up with. Over the years several variants of HTML have been defined and by stating clearly which version you are using you will avoid many potential problems when the document is shown in a web browser.

You don't need to understand the syntax of the document type declaration. Just copy it to your own HTML documents.

HTML and BODY element

Following the Document type declaration there are two new elements enclosing the HTML you saw in the initial example. First there is the html element. This is always the outermost element in an HTML document. Then there is the body element. This element always encloses the part of the HTML document that contains visible text and images to be shown to the reader.

For now, when your make your own HTML documents just make sure you start the document with the Document type declaration shown here and enclose the main part of the document in the html and body elements.

Later we will look at the head element which is an element that may go in front of the body element.

Small is beautifull: The shortest valid HTML document

The World Wide Web Consortium (W3C) is developing the technical specifications for the Web's infrastructure, including HTML and CSS.

You already saw one small yet valid HTML document above. The important word here is valid. The World Wide Web Consortium has defined a set of rules the for how an HTML document should be structured. These rules are not very hard to follow and you will learn the most important rules in this tutorial and the following tutorials.

Most User Agents like Internet Explorer, Opera, Safari and Netscape Navigator are forgiving and will display your HTML documents even when there are errors in them. Later I will show you a tool you can use to check the validity of HTML documents you write yourself.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
  4.0 Transitional//EN">
<html>
<body>
<p>Hello, world!</p>
</body>
</html>

This HTML document starts of with a document type declaration, then follows the open tags for the html- and body elements. The core of the HTML document is a paragraph element with a short text. Then the open body and html elements are closed in the reverse order of which their open tags occurred.

That's just about as short as you can make a valid HTML document.

The head and title elements

Previously in this HTML tutorial I told you about the html and body elements. These are elements that you must include in any HTML document for it to be a complete and valid HTML document.

The head element is an optional element which is placed in front of the body element. The contents of the head element are other elements like the title element. Common for all the elements that may be placed inside the head element is that they say something about the document, like the title element telling the title of the document.

The contents of the tile element is the title of the document; often displayed by web browser at the top of the web browser window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
  4.0 Transitional//EN">
<html>
<head>
<title>Greetings to the world</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>

Above I have added head and title elements to the previous example. Can you spot the head element? The start tag <head>and the end tag </head>.

The head element can only be placed right after the html start tag and before the body element start tag. This is an example of a strict rule that govern the structure of HTML documents.

Summary - HTML tutorial 2

You now know quite a lot about HTML. In fact you are now able to create reports, letters, diaries, recipes and more using the HTML elements we have talked about. You can now create complete valid HTML documents ready to be published on the Web.

In this HTML tutorial we have focused on what it takes to create valid HTML documents. The reason I stress that you should make valid documents is because valid HTML documents are much more predictable when it comes to what they look like to a user viewing the document through one of the many different web browsers available.

For an HTML document to be valid it should start of with a document type declaration, followed by the html element and then the body element. The head element may follow the html start tag, and if present it must always appear fully before the body element start tag.