Basic template for an html file

If you want to make a web page of your own, the information in this article is the absolute least you need to know to get started. Alternatively, if all you are after is a very simple website, you might be better off using your word processor to create your web page and then save it for web as an HTML file. Having said that, this is a very handy template to quickly run up a web page by hand.

 

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 some of the text onto the next line. Remember that the viewer's browser will sort out the text wrapping automatically to fit into whatever size space is available, so whatever text wrapping you have done inside your file will be ignored.

Just before we break it up into it's parts, you should note that to create or modify an html file by this method, you can use an ordinary text editor such as Notepad or Wordpad, but not a word processor. The file must always be saved as plain text and you must give it the extension .htm or .html (either works). To see this in action, go ahead and copy and paste the example above into your chosen text editor and save the file as myfile.html. Now double click on it and you will see it open up in your browser with only the text in the body being displayed. Incidentally, the starting page that you want to open when somebody goes to your website should, by convention, always be named either default.html or index.html.

Let's go ahead and look at the file in a bit of detail.

 

The HTML Document Type Declaration

...otherwise known as 'you don't really need to know this but be sure to paste it to the very top of each web page/file that you create'.

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

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 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. Your browser will almost certainly understand this (unless it's a very old browser) and will know what to do with it.

The <html> element

<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>

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

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; 
        charset=ISO-8859-1" />
</head>
    

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

<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> 
    

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.

Since the example contained here is the very least that should be in any properly laid out web page (obviously without the text I have put in the body) you can copy and paste the code above into each new file you create and then get on with putting in your own page body content. You won't need to work it all out again each time.

 

(Document updated 10 Nov 2011)