Web Design - Introduction to HTML: Formatting Text
Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4   |  Section 5
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G

The Header Tag

The Header Tags

Often times, when creating a web page, you would like to incorporate headers to let users know what is being presented on a web page.

Stop and Think?

Visit the DoDEA web page and another web page you visit frequently and consider the following questions:

  • Do the web pages visited have any headers?
  • If so, how where the headers different from the regular text?

When we think of headers, we typically think of bolded, large text. Thankfully, HTML includes six pre-defined header tags that can be used to easily create headers of varying size. The tags are listed below in order from biggest to smallest:

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>

As you may have noticed, the header number size is contrary to the size of the header displayed – meaning the smallest header number creates the largest header and the largest header number creates the smallest header.

To use any of these tags simply place them in an HTML document where you would like to have a header and place the header text in between the tags.

Let's See it in Action

header tags

Like <p></p> tags, header tags provide specific meaning for visitors who use assistive technology. Also like <p></p> tags, attributes can be added to header tags to modify their display and functionality. For instance, you can add the align="left/center/right/justify" attribute to any header tag to adjust its alignment.

For instance to create a center-aligned <h1> header you would use the following HTML code:

<h1 align=”center”>My Awesome Page</h1>

Next Next

© 2008 KCDL. All rights reserved.