Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Heading Tags

Getting Personal with the h1 Heading Tag

Just like a book, Web pages can consist of text organized by headings and paragraphs. These tags give your page structure and pull it together, giving it order & meaning.

When you want to start your page off with a bang, the <h1> tag is a good choice. This tag needs to be closed with a </h1> tag.

<h1>A Very Important Heading Goes Here</h1>

Remember, the Web browser understands that each <tag> has a specific function to perform, and interprets it in that way. Well, let’s expand on that with a specific example.

When a Web browser reads an <h1> tag, it renders the text nested in this tag as utmost important text, hence the #1 in its tag name.

Some facts to learn about the <h1> tag:

  • By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)
  • Logically, this tag should only be used once on each page, but it is not specifically an error if you use it more than once.
  • Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.
  • The text typed for an <h1> tag should be a simple, all encompassing description of the Web page. It can optionally be the same text you used in the <title> tag.
  • Do not confuse the <h1> heading tag with the <head> tag we learned about in an earlier tutorial. They are two different tags doing two different things.

More Than One Heading To Go Around

Now that you have learned about the <h1> tag, I have
to let you in on a secret: There are actually six levels for text headings.

The h1 Tag

<h1>Important Text Heading goes here</h1>

You already know about the level one heading. It should be used for the important text or the title of your page. By default, most browsers will render the text enclosed between this tag set as very large and bold.

The h2 Tag

<h2>Sub-heading text goes here</h2>

Second level indicates text sub-headings. This tag set may be used several times on a web page, but each <h2> heading should be of equal importance. By default, most browsers will render this text as large (smaller than <h1> text) and bold.

The h3 Tag

<h3>Third level heading text goes here</h3>

Indicates a third level sub-heading. Can be used as sub-headings several times on the page. All <h3> heading text should be of equal importance on the page. By default, most browsers will render this text bold and smaller than the <h2> tag.

The h4 Tag

<h4>Fourth level heading text goes here</h4>

Fourth level of heading tag. By default, most browsers will render this text bold and smaller than the <h3> tag. It is also usually the same size as the text enclosed in a paragraph tag.

The h5 Tag

<h5>Fifth level heading text goes here</h5>

Fifth level of heading tag. By default, most browsers will render this text bold and smaller than the <h4> tag.

The h6 Tag

<h6>Sixth level heading text goes here</h6>

Sixth and final level of heading tag. By default, most browsers will render this text bold and smaller than the <h5> tag. It will view as very small text.

Fast Facts on the <hx> tag:

  • Text will reside on its own line with automatic line breaks above
    and below it.
  • The <hx> tags should not be used to format the size of your text. Nope! Do not do it! If you want some random text on your web page to display as larger, don’t just plunk a <h1> tag in the middle of your page. Use <hx> tags to show headings and sub-headings on your web page. Leave the formatting to (CSS) Cascading Style Sheets!
  • Use these tags in logical order. Don’t start out with a <h2> tag and place a <h1> tag later in the page. Keep your headings using a consecutive hierarchy.
  • Even if you hate that the <h1> text is too large for your Web page design, it still should be used as your #1 heading. Do not use a <h3> heading in place of a <h1> just because it visually displays smaller. Don’t worry, you will soon be learning to let CSS format the size, font and color of your headings!

We can talk about heading tags until the cows come home, but you won’t understand them until you see them in action on a web page, right?

Take a look at my headings.html file to view each heading tag and how they display by default in your browser. View Source while you are there to see the actual XHTML coding.

What do you want to learn next? « Viewing Web PageParagraphs »

One Comment

  1. Comment by Llewelyn Tudor on May 5th, 2008

    Hi Debbie
    Really getting excited now, I can’t wait to get to CSS (whatever that means:-)
    Best regards
    Llew Tudor

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.