Every type of document we see has headings which divide the document into sections and subsections. For example, in a newspaper story, there are a heading and few subheadings. A web page is no different. It is the HTML headings that divide a web page into sections and subsections. The content inside the heading briefly describes about the section next to it.

The following document has some sections and subsections.

Schools of Web

SchoolsOfWeb offers the following courses. Our primary goal is to help a complete beginner to become a professional web developer. We’ll hold your hands in every step in this journey to achieve your goal. Here are our courses and tutorials.

HTML:

HTML is the language of the web. HTML is abbreviation for HyperText Markup Language. First you learn the language in our beginner’s course, and then solve the most common problems web developers face daily in HTML.

Course: HTML for Beginners

If you’re a complete beginner in HTML and web development, start from here.

Tutorials: HTML How-to

Completing the beginners doesn’t mean you learn everything in HTML. When writing your HTML code, you’ll find many difficulties that developers face daily. This section helps you to answer those questions.

CSS:

CSS is short for Cascading Style Sheet. First you learn the language in our beginner’s course, and then solve the most common problems web developers face daily in CSS.

Course: CSS for Beginners

After completing HTML, learn this course. In HTML you learnt how to write markup to structure a web site. In this course you’ll learn how to stylize your markup codes.

Tutorials: CSS How-to

When writing CSS in the real world, you’ll come across to many problems. This section helps you to overcome those.

JavaScript:

Okay, you’ve learnt HTML and CSS. Now, you know how develop a static site. The site is lack of interactivity. It doesn’t response against user’s action. So, here comes the JavaScript. First you learn the JavaScript language in our beginner’s course, and then learn the most common problems web developers face daily in JavaScript.

Course: JavaScript for Beginners

After completing HTML and CSS, learn this course. Our HTML course teaches you how to structure your site and CSS course taught you to add style in your HTML. This course will add the interactivities. For example, if visitors left a required field blank and click submit button in a form, JavaScript will display a message.

Tutorials: JavaScript How-to

When writing JavaScript in the real world, you’ll come across to many problems. This section helps you to overcome those.

To find what other courses we offer, see our “Courses” section.

Now, see how HTML code for the above document-


…
 <body>
     <h1>Schools of Web</h1>
     <p>SchoolsOfWeb offers the following courses. We’re working on more subjects. Our primary goal is
            to help a complete beginner to become a professional web developer. We’ll hold your hands in
            every step in your journey to help you achieve your goal. Here are our courses.</p>

    <h2>HTML:</h2>
     <p>HTML is the language of the web. HTML is abbreviation for HyperText Markup Language. First you
            learn the language in our beginner’s course, and then solve the most common problems web
            developers face daily in HTML.</p>
     <h3>Course: HTML for Beginners</h3>
     <p> If you’re a complete beginner in HTML and web development, start from here.</p>
     <h3>Tutorials: HTML How-to</h3>
     <p>Completing the beginners doesn’t mean you learn everything in HTML. When writing your HTML
           code, you’ll find many difficulties that developers face daily.  This section helps you to answer
           those questions.</p>
     <h3>Tutorials: HTML How-to</h3>
     <p>Completing the beginners doesn’t mean you learn everything in HTML. When writing your HTML
           code, you’ll find many difficulties that developers face daily.  This section helps you to answer
           those questions.</p>

     <h2>CSS:</h2>
     <p>CSS is short for Cascading Style Sheet. First you learn the language in our beginner’s course, and
           then solve the most common problems web developers face daily in CSS.</p>
     <h3>Course: CSS for Beginners</h3>
     <p>After completing HTML, learn this course. In HTML you learnt how to write markup to structure a
           web site. In this course you’ll learn how to stylize your markup codes.</p>
     <h3>Tutorials: HTML How-to</h3>
     <p>Completing the beginners doesn’t mean you learn everything in HTML. When writing your HTML
           code, you’ll find many difficulties that developers face daily.  This section helps you to answer
           those questions.</p>
     <h3>Tutorials: CSS How-to</h3>
     <p>When writing CSS in the real world, you’ll come across to many problems. This section helps you
           to overcome those.</p>

     <h2>JavaScript:</h2>
     <p>Okay, you’ve learnt HTML and CSS. Now, you know how develop a static site. The site is lack of
           interactivity. It doesn’t response against user’s action. So, here comes the JavaScript. First you
          learn the JavaScript language in our beginner’s course, and then learn the most common problems
          web developers face daily in JavaScript.</p>
     <h3>Course: JavaScript for Beginners</h3>
     <p>After completing HTML and CSS, learn this course. Our HTML course teaches you how to structure
           your site and CSS course taught you to add style in your HTML. This course will add the
          interactivities. For example, if visitors left a required field blank and click submit button in a form,
          JavaScript will display a message.</p>
     <h3>Tutorials: JavaScript How-to</h3>
     <p>When writing JavaScript in the real world, you’ll come across to many problems. This section helps
           you to overcome those.</p>
     <p>To find what other courses we offer, see our “Courses” section. </p>
 </body>
 …

As you can see headings divide the entire web page into some sections and subsections. Text inside each heading element describes briefly about that section. In the above code, h1, h2, h3 are heading elements.

Heading types

There are two types of heading in HTML5 –

h1 through h6 elements, and
hgroup elements

h1, h2, h3, h4, h5, and h6 elements

There are six levels of headings in HTML – h1, h2, h3, h4, h5, and h6. h1 is the highest level and h6 is the lowest level. h2 is the subheading of h1, h3 is subheading of h3 and so on. Each heading element has start tag and end tag. Contents inside heading elements are flow contents.

In the browsers, headings show as bigger and bold sized text than the normal texts. Headings don’t have fixed font sizes. They vary browser to browser. But, one thing is common in all browsers: heading font sizes progressively decrease from higher level to lower level, h1 to h6. See the following picture

HTML Default Heading sizes

It is the best practice to use these heading elements in hierarchical order in your web page.

hgroup element:

Sometimes, there may have a sub heading just under the main heading. For example, see the following picture.

Schools of Web

Teach yourself web development and web development step by step with easy explanation.

It helps the main heading to further elaborate the meaning. This sub heading is also surrounded by heading element. See the following code.

…
 <body>
     <hgroup>
         <h1>Schools of Web</h1>
         <h2>Teach yourself web development and web development step by step with easy explanation.</h2>
     </hgroup>
     <p> SchoolsOfWeb offers the following courses. Our primary goal is to help a complete beginner to become a professional web developer. We’ll hold your hands in every step in this journey to achieve your goal. Here are our courses and tutorials.</p>
 …

This sub headline is not the part of the heading hierarchy. But, browsers have no way to understand that this sub heading is not the part of the heading hierarchy, rather it considers it so. To make browsers understand it, surround both headings with <hgroup> and </hgroup>. When more than one heading existed inside the hgroup element, only the first heading is considered as the part of the heading hierarchy. Screen reader softwares and other outlining tools will also treat it in that way.

You can’t use any other elements as direct child of the hgroup element. As the p element (tags) in the following example is direct child of tag, so it is not allowed.

…
 <body>
     <hgroup>
         <h1>Schools of Web</h1>
         <h2>SchoolsOfWeb offers the following courses. We’re working on more subjects. Our primary goal
               is to help a complete beginner to become a professional web developer. We’ll hold your hands
               in every step in your journey to help you achieve your goal. Here are our courses.
         </h2>
         <p>It is a paragraph.</p>
     </hgroup>
 …

Why headings are so important?

They divide your document with hierarchy of information. A document with properly written headings helps reader understand it quickly and correctly.
Properly written headings help your document to improve rank in SERP (Search Engine Result Page). Search engines weigh top levels headings, specially the h1 heading.
Screen reader programs use the heading hierarchy to navigate a page to assist visually impaired users to understand the document.
In HTML5, headings are also used to outlining the web page, which you’ll learn in HTML Documents Outline lesson.

How to use headings hierarchically in a web page

The main heading of your page should be included inside h1 element.
Example: In the first example above, “Schools of Web” is the main heading of the entire document and it is included between <h1> and </h1> tags.
The next important heading should be included in h2. The steps go downwards up to h6.
Example: In the first example above, after “Schools of Web”, one of the next important headings is “HTML” and it is included between <h2> and </h2> tags.
Same headings level indicates same level of important content in the document.
Example: In the first example above, all the subject lines – “HTML”, “CSS”, “JavaScript” are same level of content. So, each of those are surrounded by <h2> and </h2> tags.
A lower heading level under a higher heading level indicates subsection of the higher heading level.
Example: In HTML, there are two types of lessons – “Course: HTML for Beginners” and “Tutorials: HTML How-to”. These are subsections of HTML which has a h2 heading level, so, we surrounded the these two in <h3> heading.

Use heading elements semantically, not visually

Don’t use heading elements according to their visual sizes. Because of the default size of h1 is bigger than h2, it doesn’t mean you’ll use h1 to mark bigger texts and h2 to mark the smaller texts. Let CSS does those designing part. Use the heading texts according to their importance level. Users will skim your web page by the headings.

Among the six levels of headings, h1 is the most important tag, and then h2, then h3, and so on. Keep the most important heading in the h1 element, then use h2 element for the next important heading, so on and so forth.

If you consider the whole document body one section, then you’re allowed to use only one h1 element in one web page. So, keep the most important heading of your web page in the h1 element.

In HTML5, sectioning elements can add new sections. In each section, you can use all h1 to h6 heading elements. Assign the most important heading of that section in h1 element.

Don’t mix headings with page title

Be careful about headings and title of a web page. These are completely different things. Title is the identification name of a web page which displays in the title bar of the browser. It is written between <title> and </title> tags which is the child of the head element. Every web page should have one and only one title.

On the other hand, headings are visually emphasized text displays in the main browser window. It is very common to have more than one heading in a single web page.

You’ll find these two words are using interchangeably on the web. But, remember the difference.

<< HTML Content Models : Previous Lesson

Next Lesson : HTML Paragraphs >>