Using Headings in HTML

Tutorial 1 of 5

1. Introduction

This tutorial is designed to provide clear instructions on how to properly use HTML headings. HTML headings are an essential part of structuring your web content, making it easier for both users and search engines to understand the content on your page.

By the end of this tutorial, you'll have a solid understanding of:

How to use HTML headings from <h1> to <h6>
The importance of correct heading structure for accessibility and SEO
Best practices for using HTML headings

Prerequisites: Basic understanding of HTML

2. Step-by-Step Guide

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
...
<h6>This is a Heading 6</h6>

Best practices and tips

Use headings to structure your content.
Each page should have one <h1> tag, which is usually the title of the page or post.
Subsections should be defined with <h2>, sub-subsections with <h3>, and so on.
Do not skip heading levels (i.e., from <h1> directly to <h3>), as this can confuse users and search engines.

3. Code Examples

Example 1: Basic Heading Structure

<!DOCTYPE html>
<html>
<body>

<h1>Page Title</h1> <!-- This is the main heading of the page -->

<h2>Section 1</h2> <!-- This is a subsection -->

<h3>Subsection 1.1</h3> <!-- This is a sub-subsection -->

<p>Some text here...</p>

<h2>Section 2</h2> <!-- Another subsection -->

<p>Some text here...</p>

</body>
</html>

In this example, "Page Title" is the main heading of the page. "Section 1" and "Section 2" are subsections, and "Subsection 1.1" is a sub-subsection under "Section 1".

Example 2: Incorrect Heading Usage

<!DOCTYPE html>
<html>
<body>

<h1>Page Title</h1>

<h3>Section 1</h3> <!-- Incorrect - skipped heading level -->

<p>Some text here...</p>

<h2>Section 2</h2> <!-- Incorrect - inconsistent heading level -->

<p>Some text here...</p>

</body>
</html>

In this example, heading levels are skipped and used inconsistently, which can cause confusion.

4. Summary

In this tutorial, we have learned how to use HTML headings correctly. You now understand that headings are not just for styling text but play a crucial role in structuring your content and making it accessible and SEO-friendly.

For further learning, you may want to explore more about HTML content structuring and SEO best practices.

5. Practice Exercises

Exercise 1: Create a simple HTML page with a title and three sections, each with a title and some text.

Exercise 2: Create an HTML page with nested subsections. Use at least three different heading levels.

Exercise 3: Review an existing HTML page and identify any issues with the heading structure. Rewrite the headings to correct the issues.

For each exercise, remember the best practices: use only one <h1> per page, don't skip heading levels, and use headings to structure your content. Continue practicing to become more comfortable with these concepts.