HTML Headings Tutorial

by shedders December 15, 2024

Headings are an essential part of HTML, helping to organize and structure content on a webpage.

HTML provides six levels of headings, ranging from <h1> (the largest and most important) to <h6> (the smallest and least important).

In this tutorial, you’ll learn:

The syntax for headings.
How to use different heading levels.
Examples of styling headings using CSS.
Accessibility considerations for headings.

1. Syntax for HTML Headings

HTML headings use the <h1> to <h6> tags. The general syntax is:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

2. Using Different Heading Levels

Example 1: Headings in a Blog Post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Example</title>
</head>
<body>
    <h1>My Blog Title</h1>
    <h2>Introduction</h2>
    <p>Welcome to my blog. This section introduces the topic.</p>

    <h2>Main Content</h2>
    <h3>Topic 1: HTML Basics</h3>
    <p>This is content for Topic 1.</p>
    <h3>Topic 2: CSS Basics</h3>
    <p>This is content for Topic 2.</p>

    <h2>Conclusion</h2>
    <p>Thank you for reading!</p>
</body>
</html>

Output:
<h1> is used for the main title. <h2> is used for section headings, and <h3> is used for sub-sections.

3. Styling Headings with CSS

Headings can be styled using CSS to change their appearance.

Example 2: Customizing Heading Styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Headings</title>
    <style>
        h1 {
            color: darkblue;
            font-size: 36px;
            text-align: center;
        }
        h2 {
            color: darkgreen;
            font-size: 28px;
            border-bottom: 2px solid gray;
        }
        h3 {
            font-style: italic;
            color: purple;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <h2>About Us</h2>
    <p>We provide useful content to our readers.</p>
    <h3>Our Mission</h3>
    <p>To make learning easy and fun!</p>
</body>
</html>

Explanation:
- <h1> has a dark blue color, larger font size, and centered alignment.
- <h2> has a dark green color, slightly smaller font size, and a bottom border.
- <h3> is styled with italics and a purple color.

4. Importance of Heading Order

Headings should follow a logical order to maintain proper document structure and improve accessibility.

Do:
- Use headings in a descending order: <h1>, <h2>, <h3>, and so on.
- Use only one <h1> per page for the main title.
Don’t:
- Skip heading levels (e.g., jumping from <h1> to <h4>).
- Use headings purely for styling. Use CSS instead.

Example 3: Proper Heading Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proper Heading Structure</title>
</head>
<body>
    <h1>Main Title of the Page</h1>
    <h2>Section 1</h2>
    <p>This is content under Section 1.</p>

    <h3>Subsection 1.1</h3>
    <p>Details for Subsection 1.1.</p>

    <h2>Section 2</h2>
    <p>This is content under Section 2.</p>

    <h3>Subsection 2.1</h3>
    <p>Details for Subsection 2.1.</p>
</body>
</html>

5. Accessibility Considerations

Screen readers rely on properly ordered headings to help visually impaired users navigate content.
Use <h1> only once for the page’s main heading.
Always include headings in a logical sequence.

Conclusion

HTML headings (<h1> to <h6>) are fundamental to creating well-structured, accessible, and easy-to-read content. Combine them with CSS for styling, and always follow best practices for proper document structure.

With these examples, you can now:

Create headings for your HTML pages.
Style headings using CSS.
Maintain accessible and well-ordered content.

HTML Headings