Basic layout of an HTML file

(Documented 2 Jan 2010)

This is what an HTML file looks like with the bare minimum in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
	The text and contents of the web page go here. This is the bit that actually 
	shows up in your browser. If you save everything in this box as a plain text 
	file with the extension .html, then double click the file, it will open in 
	your browser and only this scrap of text will be visible. Try it.
</body>
</html>

I have indented some of the contents for clarity of reading but it makes no difference to the way the file works. Similarly, I have wrapped the text in the first line onto a second line, but this is purely for our convenience. Let's break it up into it's parts and find out what they do.

The HTML Document Type Declaration

File fragment showing the document type declaration

There are a range of document types that are transmitted across the web. By far the most common document type is the HTML family of document types or HTML files as they are more commonly known. The line beginning <!DOCTYPE is a document type declaration that tells your browser this is some form of HTML, so that it knows what sort of instructions to expect. There is more than one type of HTML. The type we are focusing on is the most current, elegantly designed and broadly implemented (works on most browsers) version of HTML at the time of writing. It is called XHTML version 1.0 Transitional. This first line tells the browser that the type of HTML file it can expect is XHTML version 1.0 Transitional.

The <html> element

The next line starts <html>. This tag tells your browser this is the beginning of the active part of the HTML file. You will notice that the very last line of the file is </html>. This is called the closing tag and tells your browser that the active content of your HTML file is ended. It is always the last line in an HTML file. All the working parts of an HTML file are contained within this element, between the <html> and the </html> tags.

The <head> element

The <head> tag marks the beginning of the <head> element which contains any instructions specific to the visible contents of the web page. There are a couple of mandatory instructions about the page, after which, the element is closed a few lines later with the </head> closing tag. You will have noticed that the tags tend to come in pairs, the second one contains a / forward slash character that tells the browser that this is the end of whatever element it is defining.

Between the head tags are the <title> tags. These should be included as a matter of good practice, although in this example, no title has been given to our document so there is no title between these two tags. Find out more about the <title> tags in any HTML documentation. You will notice there is also a tag that starts <meta. The one you see here is important because it tells your browser which spoken language you are using. Different languages of course have their own conventions. Chinese is very different in the way it should be formatted to English. Even French is significantly different in it's layout conventions. The particular meta tag information here is the one for you unless you are not planning to write your pages in English. In which case, you need to look up the character set reference for your chosen language place it here, in this meta tag. The meta tag has other uses which you will find in your HTML documentation.

Notice that the meta tag is not followed by a closing </meta> tag. Instead it has /> at the end of the line. This tells the browser that this is a self closing tag since there is no further information to be imparted so there is no need for an element with a tag at each end. You will quickly get the hang of which tags are self closing.

The <body> element

Now to the interesting bit. The body of your file contains the stuff we are really interested in that will appear on the screen when your browser reads your HTML file. There is an immeasurable amount of exciting content we could put on the web page, as you will have seen when surfing the web, so it may be a disappointment to you that all that I have put in this HTML file is one miserable line of text. I'll leave you to create more imaginative content to put in here.

To finish, we close the body with the </body> tag and as stated earlier, we end the entire file by closing the HTML element with the </html> tag. Once you get used to pasting the basic content shown here into every new HTML file that you create, you will rarely need to consider what most of it is for.