The HTML Document Body ~ Adsense blog tip and trick collection

Sunday 16 November 2008

The HTML Document Body

Written by Sarah from Stuff By Sarah

Last week I explained the HTML Document Head, that now leaves us with the Document Body. Once you’ve closed your header using the </head> tag, 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

</body> </html>

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.

HTML Tags in the Body

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.

Headings

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.

 <h1>The HTML Document Body</h1>     <h2>HTML Tags in the Body</h2>         <h3>Headings</h3>         <h3>Paragraphs</h3>     <h2>HTML vs XHTML</h2>

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

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.

 <p>First paragraph</p> <p>Second paragraph</p> <p>Third paragraph</p>

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.

Your Basic Page

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

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <title>My First Basic Page</title>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <meta name="author" content="SarahG" />     <meta name="copyright" content="Blogging Tips" />     <meta name="description" content="Just a basic page, nothing fancy really" />     <meta name="keywords" content="html, document, body, basic, page, blogging tips" />   </head>   <body>       <h1>Welcome to my Site!</h1>       <p>Hello World and thank you for visiting my site.</p>        <h2>About Me</h2>       <p>I'm short, blonde and shy!</p>       <h3>My Work</h3>       <p>I'm a Web Developer.</p>        <h2>About This Site</h2>       <p>It's just a basic site to demonstrate the HTML explained in the last couple of posts.</p>   </body> </html>

HTML vs XHTML

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

1. Tags must be written in lowercase: All XHTML tags must written in lowercase, for example, test would now have to be test
2. Tags must be correctly nested: While it has always been good form to use proper nesting, in HTML the reverse order of closing tags did not need to strictly match the order of the opening tags, however in XHTML they do. So test is fine for HTML but in XHTML this needs to be test
3. Tags must be closed: All tags must be closed correctly. Any tag surrounding content (non empty elements) must have its closing tag where applicable. Tags that do not surround content (empty elements) can be self closed. For example, a paragraph should be testing and a line break (empty element) should be . The exception to this are script tags, which may or may not have content within them, however require a closing script tag as opposed to a self closing tag.

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

Source : bloggingtips

Adsense blog tip and trick collection

Sunday 16 November 2008