Html basics - headings in HTML - basics of HTML - HTML for beginner - heading tags in HTML

Main navigation tabs of the web site:

HTML basics - Headings

HTML tutorial

Web development tutorials

Homepage

Main navigation links of HTML Tutorial section

HTML basics - Headings

Headings help in defining the format and structure of the document. They provide valuable tool in highlighting important topics and the nature of the document as a whole.

There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6> tags. The outputs of these in a browser are as follows:

<H1>I am heading 1</H1> gives:

I am heading 1

<H2>I am heading 2</H2> gives:

I am heading 2

<H3>I am heading 3</H3> gives:

I am heading 3

<H4>I am heading 4</H4> gives:

I am heading 4

<H5>I am heading 5</H5> gives:

I am heading 5

<H6>I am heading 6</H6> gives:

I am heading 6

As you can see, the heading tags come in pairs with the opening and closing tags. Any text surrounded by these tags will be displayed differently depending on the heading number.

Let us make another HTML file. Open Notepad and type in the following text. Save this document as 'headings.html'. View it in your browser.

<HTML>
<HEAD>
<TITLE>My fist HTML page with headings</TITLE>
</HEAD>
<BODY>
<H1>I am heading 1</H1>
<H2>I am heading 2</H2>
<H3>I am heading 3</H3>
<H4>I am heading 4</H4>
<H5>I am heading 5</H5>
<H6>I am heading 6</H6>
</BODY>
</HTML>

Attributes
Attributes change the properties of tags and are placed ONLY inside the starting tag. Each attribute usually has a value associated. The attribute-value pair is written as:

<TAG ATTRIBUTE="VALUE">some text ... </TAG>

Thus,

The attribute-value pair is placed INSIDE the starting tag
An "equal to" sign separates the attribute from its value.
The value part is surrounded by quotes. The quotes are necessary if the value contains spaces. However, I always use them and advice you to do so too.

Note: Some attributes do not require a value part.

All heading tags <H1> to <H6> have attributes. The important one are 'ALIGN' and 'TITLE'.

The ALIGN attribute
The 'ALIGN' attribute takes one of the four values: LEFT, RIGHT, CENTER, or JUSTIFY.

<H3 align="left">I am aligned to the left</H3> yields:

I am aligned to the left

<H3 align="right">I am aligned to the right</H3> yields:

I am aligned to the right

<H3 align="center">I am centrally aligned</H3> yields:

I am centrally aligned

The TITLE attribute
With the 'TITLE' attribute you can include some advisory text that is displayed when a user places the mouse pointer over the heading. Note, Netscape Communicator version 4.xx ignores the TITLE attribute of the headning tags.

<H3 title="Here is my important heading">Some Important Heading</H3> is displayed as:

Some Important Heading

(If working in Internet Explorer, place your mouse cursor over the heading above to see how the TITLE attribute works.)

Default values to attributes
The keen-eyed would have noticed that the heading is aligned to the left even without explicitly specifying align="left" inside a heading tag. This is because align="left" is a default attribute-value pair for the heading tag.

An important point
Headings provide a logical flow to the document and should be used for that very purpose. They should never be used for changing font sizes. Font sizes can be easily changed by using the SIZE attribute of <FONT> tag or using style sheets.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.

Page contents: Html basics - headings in HTML - basics of HTML - HTML for beginner - heading tags in HTML

Page URL: http://www.webdevelopersnotes.com/tutorials/html/ html_basics_headings.php3

50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine

Search WebDevelopersNotes.com