HTML Headings

❮ Previous Next ❯

HTML Headings: Structuring Your Webpage

HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate for both users and machines.

Why Headings Matter:

Readability: Proper use of headings enhances readability by organizing content into clear, digestible sections.
SEO (Search Engine Optimization): Search engines (like Google) utilize headings to understand the structure and main topics of your webpage.

1. The 6 Levels of HTML Headings

HTML offers six levels of heading tags, ranging from <h1> to <h6>. Each serves a different purpose in structuring your content hierarchy.

Note: The 'h' inside the tag should always be written in lowercase as a best practice!

Heading Levels Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>This is the Main Heading</h1>
    <h2>This is a Subheading</h2>
    <h3>This is a Smaller Subheading</h3>
    <h4>This is a Sub-Subheading</h4>
    <h5>This is a Minor Subheading</h5>
    <h6>This is the Smallest Heading</h6>
</body>
</html>

2. Understanding the Hierarchy

Heading Tag	Purpose
`<h1>`	Main Heading (Largest): Represents the primary focus of the page. You should ideally use only one `<h1>` tag per page for best SEO practices.
`<h2>`	Subheadings: Ideal for dividing the main content into major sections.
`<h3>` to `<h6>`	Smaller Headings: Used for finer subdivisions under `<h2>` sections, gradually decreasing in size and importance. `<h6>` defines the least important heading.

3. Customizing Heading Sizes

Although HTML headings have default sizes set by the browser, you are not restricted to them. You can easily customize a heading's size, color, font, and alignment using the CSS style attribute.

Customizing Size Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Standard H1 Heading</h1>
    <!-- Using the style attribute to modify the font-size to 38 pixels -->
    <h1 style="font-family: 'Segoe UI', Verdana, sans-serif; 
               font-size: 38px; 
               font-weight: normal; 
               line-height: 1.2;">
        H1 with a custom size!
    </h1>
</body>
</html>

4. Best Practices for Using Headings

To ensure your website is professional, accessible, and ranks well on Google, follow these golden rules:

Use Only One <h1> per Page: The <h1> tag should be reserved for the main title of the page. Too many <h1> tags can confuse both users and search engines about the content’s actual priority.
Maintain a Logical Structure: Follow a sequential hierarchy (<h1> → <h2> → <h3>). Do not jump directly from <h1> to <h4>, as it breaks the structural flow and makes the content harder for screen readers to navigate.
Keep Headings Descriptive: Headings should clearly describe the content that follows them. This makes it easier for readers to quickly skim and understand what each section is about.
Don't Use Headings Just for Styling: Headings are meant for organizing content, not for making text bold or big. If you just want to make a regular paragraph visually larger, use CSS (e.g., <p style="font-size: 24px;">) instead of an <h2> tag!

Exercise 1 of 2

How many <h1> tags should you ideally use on a single webpage?

As many as you want Only one Zero

Exercise 2 of 2

Which heading tag represents the least important heading?