BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Using Headers And Paragraphs

When and Where To Use The Header And Paragraph Tags.

When creating a web page using HTML, there are many things you can do, there are many things you can not do, and then there are many things you should do. Correct use of the header and paragraph elements are good examples of things that you really should do.

Why You Should Use Headers And Paragraphs

A web page can be built without the use of the header and paragraph elements and will for all intense and purposes look and feel to any viewer no different to a page that does use these elements.

What you must realise is that it is not just people that will be viewing your web page. Search engines for example will visit you pages from time to time and effectivly read your HTML code in an attempt to understand what the page is about. Without getting to bogged down with the inner working of the search engines just realise that having used Header and Paragraphs will make the job of the search engines much easier, thats always a good thing.

The Heading Or Header Element.

The first of these recommended elements is the Header or Heading element, as its name would suggest it should be used to markup header text like titles and chapter names for example. There are actually six variations of the header tag and they are all shown below.

HTML
<h1>This is the main header</h1>
<h2>This is the sub header</h2>
<h3>The h3 element</h3>
<h4>The h4 element</h4>
<h5>The h5 element</h5>
<h6>The h6 element</h6>
Examples of the header elements

You will see the various header tags in action, notice that they range is size from the largest h1 to the smallest h6.

The basic idea of using the heading elements is firstly that the main header text or document title if you prefer should be enclosed within the h1 tags. There should be no other occurrences of the h1 element on this page you are strictly advised to use only one h1 element per page.

On this page for example the text at the top reading Using the header and paragraph tags is the main header title and therefore it is the most important text on the page and is contained within the h1 tags.


The h2 tag is like the sub-header of the page and can be used to separate different sections of text, therefore you my create multiple h2 elements, say three or four. If you require more than this it may be a good idea to separate your sub-sections into sub-sections using the h3 elements.

Okay you get the idea, the later headings h4 - h6 are not often used or needed but are avaliable nonetheless. Remember to include at least the h1 element on any web page you create as its importants can not be over empahsised.

Using HTML Paragraphs.

The next logical element to look at is the p or paragraph element. Its fairly clear what this element is best used for, using it will split the text up into paragraphs determined by the open and close tags. Notice in the below example that each of the paragraphs is slightly seperated from the other, it is this which can helps divide your web pages up.

HTML
<p>The first paragraph of text</p>
<p>The second paragraph of text</p>
<p>The third paragraph of text</p>
Examples of the paragraph element

Paragraphs Can Improve Your User Experience

Large blocks of text on a web page can be a little over whelming and difficult to follow and may put some readers off. Using the parragraph tag you can easily break a page into more managable and therefore appealing chuncks.


Putting these two simple HTML elements together you will see that you have a basic web page structue, header / sub-header / paragraph / sub-header / paragraph... and so on.

Following these guidelines will make your web pages clearer both for human readers and search engines alike, as a result make for a more successfull web page.

Hit the next article button below to continue with these tutorials.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus