How to Use Header Elements in (X)HTML

Header elements are those tags used on an XHTML or HTML  page that provide the bold, large font headings. Using header elements you can have up to six (6) levels of hierarchical headers. The tag for a header element would look like: – where the ” n ” would be replaced with a 1, 2, 3, 4, 5 or 6 depending on the level of header you want to create. Since these headers are considered hierarchical dividers for a page, they should be used consistently.



For example:   You have a page that lists restaurants for all the cities in your state. Your

element might be the city name, the

element might be the type of food,i.e., Italian, and the

element might be the restaurant name itself.

In this example, for each city listed on the page you would use an

tag for the city, an

tag for each type of  food and and

element for each restaurant.

The only ‘rule’ about headers is that the higher the level, the smaller the number, and the more prominently it should be displayed. Major browsers currently display header elements in ‘Times New Roman, bold-face’ at 24, 18, 14, 12, 10 and 8 pixels (9 on a Mac), respectively.

Formatting Header Elements

What if you want  change the way the header element looks? Or perhaps you want to use a single header element for search engines purposes – there’s more about this below –  but you don’t want the large, bold font to display? Easy, you use styles to format the header element. You can change or assign:

  • Font face
  • Font color
  • Font size
  • Italics
  • Underline
  • Remove bolding

For Example:

This is my main header

– will display Times New Roman, bold-face, font size: 24

This is my main header

– will display in Arial, red lettering, font size: 3, unbolded

… this gives you the strength of using a header element but allows you to tailor it to fit the look you want.

Note: The tags to change the way the header element displays are inside of the tags. Tags to underline or italicize should also be inside the header tags.

How to Link a Header Element

Header elements are an effective way to navigate from page to page, especially when you want to direct the visitor to a specific place on a particular page.

You would link a header element using the same method for creating an ‘anchor’ link, making sure the link information is placed within the and tags.

For example: 

Main Header

How to Align a Header Element

If you want to define the alignment of a header element, this can be done within the opening header tag. The header element can be aligned right, left or center by typing the information in the opening tag.

For example:

This is my main header

– would align the header in the center of the page. To align it left or right, just replace the ‘center’ with one of the other locations *. 

* If you have aligned the text in the individual page style sheet, that alignment will take precedence over the alignment assigned in the tag itself. (see below)

Header Elements in Style Sheets

Individual page style sheets can be used to define the header elements rather than have to code each element individually. The style sheet below sets the attributes for header elements 1 and 2 such that they will display as:

  • Font face – Arial
  • Font size – 10 px
  • Font weight – Normal (no bolding)

Using  a style sheet is particularly effective if you plan on using numerous header elements on one page.

 Conclusion (& Search Engines)

Make use of header elements to divide your page into hierarchical sections for easier viewing and navigation.  It should be noted that header elements are an effective tool for helping search engine ranking.  For this reason, you always want to use good key words for the header elements whenever possible.

Comments are closed.