Last week I explained the HTML Document Head, that now leaves us with the Document Body. Once you’ve closed your header using thetag, the next tag should be the opening body tag (note, this is different for frame based sites but I’ll explain those another day, for 90% of sites out there, this is the standard way!).

The body of your web page should include everything that is potentially visible on the actual web page, using (X)HTML markup to structure the document and CSS to control the layout and presentation. The end of your HTML document must then end with

There should be nothing between these two tags and nothing after the closing HTML tag. Any final JavaScripts should always go before the closing body tag.

There are a number of (X)HTML tags that you can use in the body of your document which I’ll be explaining over the next few weeks (as there’s quite a few!). The two basic tags below are the ones that are used in virtually every web site online.

Different to the Document Header, headings are typically found at the start of content or information. In this post the post heading can be seen at the top of the post – “The HTML Document Body”, then my sub headings can be seen throughout the post eg. “HTML Tags in the Body”. I now have a further subheading above called “Headings”. These are all varying levels of headings starting with a h1 tag and using h2 tags for the sub headings and h3 tags for the secondary headings. Headings can go down to a h6, which is the smallest heading available.

To use these you simply surround your text with the appropriate heading tag eg.

[sourcecode language=”html”]

[/sourcecode]

There are no set rules for where you should use your headers or how many headers to use, but for a well structured document you should try to ensure that text that is a heading, should be in heading tags, and structure your headings to follow the order of their size (the h1 being the largest and the h6 being the smallest).

Headings are block level elements. This means that they will typically take up 100% width of the page and shouldn’t be embedded into some other areas of content eg. a paragraph. Headings can be embedded into divisions (divs) and list items. Headings can also contain inline tags such as the emphasis tag (em), span tag and the anchor tag.

Paragraphs are used to hold paragraphs of text (I know, it sounds obvious but plenty of people forget that!). If there is no other appropriate markup to hold text, then it should be within paragraph tags. Each paragraph should be contained within the tags, and then a new paragraph should have a new set of tags around it i.e.

[sourcecode language=”html”]

First paragraph

Second paragraph

Third paragraph

[/sourcecode]

There is no real limit to using paragraphs, however paragraphs are block level elements, similar to headings, and should not contain other block level elements, nor should they be embedded into certain other block level elements such as headings. They can, as with headings, be embedded into divisions and list items however. Paragraphs typically contain inline styles such as anchor, strong and emphasis tags.

So to write your first basic page taking everything that has been covered in the past few weeks we can use the following

[sourcecode language=”html”]>

Hello World and thank you for visiting my site.

I’m short, blonde and shy!

I’m a Web Developer.

It’s just a basic site to demonstrate the HTML explained in the last couple of posts.

[/sourcecode]

I briefly mentioned this a couple of weeks ago. HTML 4.01 is perfectly fine to use as is XHTML 1.0. XHTML is an extension of HTML 4.01, with more strict rules which in turn creates cleaner code. The main differences when moving to XHTML from HTML are are

test

test

testing

Following these rules, regardless of which doctype you follow, will give you improved and clean valid code.