HTML Headings

Table of Contents +

Now that you have a basic understanding of HTML elements and tags, now we will learn about HTML headings.

🏷️ What Are HTML Headings?

HTML headings are used to define the structure and hierarchy of your content. We have six levels of headings in HTML, from <h1> to <h6>, where <h1> represents the top level heading and <h6> represents the lowest level heading.

🏗️ HTML Heading Tags

There are six types of HTML heading tags:

<h1>Main Heading</h1>
<h2>Subheading Level 1</h2>
<h3>Subheading Level 2</h3>
<h4>Subheading Level 3</h4>
<h5>Subheading Level 4</h5>
<h6>Subheading Level 5</h6>

The output of the above code will look like this:

Output

Main Heading

Subheading Level 1

Subheading Level 2

Subheading Level 3

Subheading Level 4
Subheading Level 5

You can see that each heading level is smaller than the previous one, which helps to create a clear hierarchy in your content.

📚 Why Use Headings?

Headings are important for several reasons:

  • User: They help users understand the structure of your content and find information quickly.
  • SEO: Search engines use headings to understand the structure and content of your page. Properly using headings can improve your site’s SEO and help it rank on top of search results.
  • Accessibility: Screen readers use headings to navigate content. Properly structured headings make your content more accessible to users with disabilities.

📊 Best practices to use HTML headings

There are some best practices to follow when using HTML headings:

  • Use <h1> for the main title: Every page should have one <h1> tag that describes the main topic of the page.
  • Use <h2> to <h6> in order: Use <h2> for main sections, <h3> for subsections, and so on. This creates a clear hierarchy.
  • Avoid skipping heading levels: Don’t jump from <h1> to <h4> without using <h2> and <h3>. This can confuse both users and search engines about the structure of your content.
  • Be descriptive: Use meaningful text in your headings that describes the content of the section. This helps users and search engines understand what to expect in that section.
  • Limit the number of headings: While you can use all six heading levels, it’s best to keep your content organized with a limited number of levels. Typically, <h1>, <h2>, and <h3> are sufficient for most pages.
  • Don’t overuse headings: Use headings only when necessary. Overusing them can make your content harder to read and understand.

Best Practices can be skipped

Although these are best practices but we can use headings in any order, but it is not recommended.

📝 Example of Using Headings

Here is an example of how you can use headings in an HTML document:

<!DOCTYPE html>


<html lang="en">
  <head>
    <title>How to Organize a School Event</title>
  </head>
  <body>
    <h1>How to Organize a School Event</h1>
    <h2>Planning Phase</h2>
    <h3>Choose Event Type</h3>
    <h4>Sports Day</h4>
    <h4>Cultural Festival</h4>
    <h3>Set Budget</h3>
    <h4>Venue Costs</h4>
    <h4>Equipment Rental</h4>


    <h2>Preparation</h2>
    <h3>Team Building</h3>
    <h4>Assign Roles</h4>
    <h4>Schedule Meetings</h4>
    <h3>Resource Management</h3>
    <h4>Book Venue</h4>
    <h4>Order Supplies</h4>


    <h2>Event Day</h2>
    <h3>Setup</h3>
    <h4>Decorations</h4>
    <h4>Sound System</h4>
    <h3>Execution</h3>
    <h4>Welcome Guests</h4>
    <h4>Monitor Activities</h4>
  </body>
</html>

This example shows how to structure a guide on becoming a web developer using headings. The main title is <h1>, followed by sections and subsections using <h2>, <h3>, and <h4>.

Output

How to Organize a School Event

Planning Phase

Choose Event Type

Sports Day

Cultural Festival

Set Budget

Venue Costs

Equipment Rental

Preparation

Team Building

Assign Roles

Schedule Meetings

Resource Management

Book Venue

Order Supplies

Event Day

Setup

Decorations

Sound System

Execution

Welcome Guests

Monitor Activities

🛠️ Try it yourself!

You can practice using headings by creating a simple HTML document. Please follow the steps below:

  1. Create a folder name elements,
  2. Create an HTML file name headings.html,
  3. Add a code snippet similar to the example above,
  4. Open the file in a web browser to see the headings are displayed in a hierarchical manner in terms of size.

🚀 What’s Next?

In the next section, we will explore HTML paragraphs and how to use them effectively to structure your content.

Previous HTML Elements and Tags Next HTML Paragraph

Share & Connect

Share on LinkedIn