October 22, 2011

The Header Tags

Header tags are used in HTML documents to display headings. It makes your heading larger or smaller and makes the heading bold. You use big headings for the main points in a webpage and small headings for the sub points. There are six header tags: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Each header tag indicates the relative importance of each section it is heading.
 H1 is the most prominent among the six types of heading and it is called as the level 1 heading. It is usually used for the main points in your webpage. H6 produces the smallest heading size and is called as level 6 heading. Open your favorite text editor now and key in the code below to see each header tag in action.

<head><title>Header Tag</title></head>

<h1>I am H1 and I am left aligned by default.</h1>
<h2 align="center">I am H2 and I am center aligned.</h2>
<h3 align="right">I am H3 and I am right aligned.</h3>
<h4>I am H4 and I am left aligned by default.</h4>
<h5>I am H5 and I am left aligned by default.</h5>
<h6>I am H6 and I am left aligned by default.</h6>


The given code produces this page in Mozilla Firefox:
click to enlarge

TIP: Headings can be aligned using the align attribute. You may use the value: left, right, center or justify.

Note: The strict version of HTML and XHTML requires web designers to use only class (to specify a class-name for an element), id (to specify a unique id for an element), style (to specify an inline style for an element) and title attributes. Instead of using align, width, size, noshade and other attributes, web designers require to use the cascading stylesheet and with the help of the class, id and style attributes in designing webpages.


Aileen said...

Now I know how to tweak things bit by bit thanks to you :-) I managed to have the title centered because it's actually an image and not header text hehehe