HTML 101: Back to Basics - Yes, yes, but what is HTML made of?

Yes, yes, but what is HTML made of?

I mentioned that HTML is an application of SGML. This means that every HTML document is also an SGML document. The first thing an SGML document must have is a Document Type Declaration. This means exactly what it sounds like: a Document Type Declaration declares the document to be of a specific type. In our case this type is HTML. I won't go into much depth on Document Type Declarations right now. For the moment, you should use the following declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "https://www.w3.org/TR/REC-html40/strict.dtd">

Do not let the angle brackets confuse you. The above is not an element. If you look carefully, you'll notice that the content of the above construct starts with an exclamation mark; this indicates that this is SGML code. And after looking at it a bit you might be glad you don't have to learn SGML. So just take me on my word for this once, and put this at the top of your document. In a future tutorial, we'll explain what this Document Type Declaration means and show that it's really quite simple.

Now that we have specified that this is an HTML document, we can start adding elements. The first element will always be the HTML element. All HTML documents have an HTML element, which contains all the other elements. Let's put in the start-tag and end-tag for this element and we'll worry about its contents later. Here's what we've got so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
</HTML>

Every HTML document is split into a head and a body, which are marked by similarily named elements, HEAD and BODY. Every HTML document must have one of each, inside the HTML element. In fact, these two are the only things you can have inside the HTML element. So let's put these in as well and see where we are:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
 <HEAD>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

Notice that I've used a slight indent for the HEAD and BODY element tags. This has no special meaning and is only there to make the HTML more legible. You might have noticed that white-space (that is, spaces, tabs and linefeeds) is collapsed in HTML. This means you can add as much of it as you want to, in order to make your HTML easier to read, without any change in the meaning of the document.

The difference between the head and body of a document is that the head contains mostly information about the document, while the body contains the document itself. Before we go on to the body, we'll deal with the one element every document head must contain: a title.

The title of your document is very important. It distinguishes your document and makes it unique, as well as describing it to the reader. In this case, the title "Acme Computer Corp." is unsuitable, because it doesn't describe our document. A more descriptive title would be "About Acme Computer Corp.", but since this is the world of marketing and we can't afford to be bland, we'll give it a title of "Acme Computer Corp.: Who We Are".

The TITLE element is a very simple element. It cannot contain anything but text and that text is the title of the document. So let's insert our title into our document, which is almost complete:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Acme Computer Corp.: Who We Are</TITLE>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

We're almost finished! All that remains is to add our document body.

URL: https://www.webreference.com/html/tutorial1/4.html
Created: May 28, 1998
Revised: May 28, 1998

HTML 101: Back to Basics - Yes, yes, but what is HTML made of?

Find a programming school near you