Headings

HTML uses the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags to mark up content that can be classified as a heading. The "h" in these tags stands for "heading," and the number prescribes the level of importance, or hierarchy.

Think of these tags like headings in a school report. We usually make the main heading of the report the largest. Then sub-headings smaller. Sub-headings of sub-headings are usually smaller yet. We organize our content with a hierarchy defined by the size of the heading. This is the same way we should organize the content on a website.

The <h1> tag has the highest importance, and should usually contain the main heading for the page. The <h6> tag has the lowest importance. It is good practice to break your content up using headings, but it is not required that every page has <h1> through <h6> tags. The number of headings used should be determined by the content/sections.

Headings tags are the only HTML tags that use numbers to determine importance. It is common for beginners to add numbers to other tags such as paragraphs (ex. <p1>, <p2>, <p3>, etc). This is not correct, and should be noted so you don't make this mistake.

Try it for yourself

Instructions

Put the correct heading tags around the text in the window below. Remember to think about headings like a school report.

  1. Replace all the <div></div> tags with the appropriate heading tags (h1, h2, h3, etc)
  2. There are five heading tags that need to be placed around this text.

HTML

CSS

JavaScript

Output