Section 2: The Heading Tag

Often times, when creating a web page, you need to incorporate headings into your web page to let users know what is being presented on the page.

Stop and Think

Visit the DoDEA web page (link opens in a new tab) and another web page you visit frequently and consider the following questions:

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

Heading Tags

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

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

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

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

Let's See it in Action: Heading Tags with Alignment

Like the <p> </p> tags, headings provide specific meaning for visitors who use assistive technology by typically  signaling a new section within a webpage. Also like <p> </p> tags, attributes can be added to heading tags to modify their display and functionality.

Adding the style="" attribute to the opening tag <h1> tag and giving it a "color value" will force the browser to  display a different color as opposed to the default color; grayscale black.   So:

<h1 style="color: blue"> words in the heading </h1>

will change all the text between the opening <h1> and closing </h1> tags to blue.