The basic structure of a web page.

HTML: Web page structure explained.

In my practical guide to HTML for beginners I have explained the four most used tags in HTML <p>, <div>, <a>, and <H1>. Now we will continue our beginners guide by having a look at the basic structure of a web page.

Head and Body tags of an HTML page

A basic HTML page contains a Head section and a Body section. The contents of the Head section is normally invisible in a web browser and mainly consists of some Metatags (more on this later), The Body consist of those HTML elements that you want to have displayed in your browser. To identify this structure of a web page we use the following tags:

<html>
<head>
</head>
<body>
</body>
</html>
There is no need to learn these tags, because you normally start a new web page with a template of that page, which already contains these tags. As you can see there is a <html> tag at the start of a web page followed by a <head> tag to identify the start of the Head section. The head section will at least contain the very important title of your web page:
<title> Page Title </title>
Please make sure that all your pages have a different title. Search engines don't like it when you have the same title for two or more web pages and will punish you for such a mistake by not ranking those pages as high as they normally would.

The head section normally also contains one or more HTML elements called metatags:

<meta name="tagname" content="text of tag">
Notice that the metatag is one of the few HTML elements that does not have an end tag. The two most important metatags are title and description, which contain another title and a somewhat longer description of your web page. Again it is important that each web page has its own unique title and description metatags. More on metatags later.

A real example of an HTML page structure

Now we have explained the most used HTML elements and the basic structure of a page let's look at a real page: The one you are reading now! Go to the menu bar of the browser and find the menu that allows you to look at the page source. Every browser is slightly different. In Firefox it can be found under View and is called Page Source. Other browsers have a slightly different menu item such as View Source in Safari (on a Mac).

Although there are a number of HTML elements we have not discussed yet, you should be able to recognize the main structure with the head and the body. The body consists of a nested Div structure (Yes, I could have documented the end tags to make it easier for you) followed by a footer. The div with the name container is the outermost of the nested div structure. It contains 3 named Div elements or sections: the sitename, the mainmenu, and the wrap element. The named div called wrap is again split into 3 inner Div elements, the three columns. Wrap also has a special div used to create some empty space at the bottom, to separate the three columns from the footer. Just have a look how this web page is displayed.

Now we know enough about the general structure of a web page, it is time to look at the way the CSS helps you define the presentation of your web page.