HTML Headings

HTML Headings Tutorial

Tutorial by: Codes with Pankaj

HTML headings are crucial for structuring the content of a web page, helping both users and search engines understand the hierarchy of information.

Step-by-Step Guide to HTML Headings

1. What Are HTML Headings?

Headings in HTML 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. Headings range from <h1> to <h6>, with <h1> being the highest (or most important) level and <h6> being the lowest.

2. Types of HTML Headings

HTML provides six levels of headings:

<h1>: Main heading, used for the most important title or section.
<h2>: Subheading, typically used for subsections under the main heading.
<h3>: Further division of content within an <h2> section.
<h4>, <h5>, and <h6>: Used for even more granular divisions, representing smaller, less important sections of content.

3. Use of Headings

Headings serve two main purposes:

Content Organization: They break content into logical sections, making it easier for users to scan and find relevant information.
SEO (Search Engine Optimization): Headings help search engines understand the structure and importance of the content. Search engines give more weight to <h1> and <h2> tags when indexing web pages.

4. Explanation of Each Heading Tag with Example

<h1>: Main Heading This is the most important heading on a web page. It’s usually used for the title of the entire page or a main section.
```
<h1>This is an H1 Heading</h1>
```
<h2>: Subheading <h2> is typically used for subheadings or major sections under the main title.
```
<h2>This is an H2 Heading</h2>
```
<h3>: Sub-subheading This heading tag is used for sub-sections of the <h2> section.
```
<h3>This is an H3 Heading</h3>
```
<h4>: Smaller Heading <h4> is used for even smaller subsections within an <h3> heading.
```
<h4>This is an H4 Heading</h4>
```
<h5>: Small Heading You can use this for more detailed subsections within an <h4> heading.
```
<h5>This is an H5 Heading</h5>
```
<h6>: Smallest Heading The <h6> tag is the smallest heading tag and is used for very minor headings or for minor detail sections.
```
<h6>This is an H6 Heading</h6>
```

5. Example of All Headings Together

Below is an example that uses all six heading tags in a structured manner:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Headings Example</title>
</head>
<body>

    <h1>Main Title of the Page (H1)</h1>
    <h2>First Section (H2)</h2>
    <h3>Subsection of First Section (H3)</h3>
    <h4>Details of Subsection (H4)</h4>
    <h5>Additional Details (H5)</h5>
    <h6>Smallest Heading for Minor Info (H6)</h6>

</body>
</html>

6. When to Use Which Heading

<h1>: Only one <h1> should be used per page, as it defines the primary purpose or title.
<h2>: Use for major sections or categories on the page.
<h3>: For subsections or subtopics within a section.
<h4>, <h5>, <h6>: For smaller sections, finer details, or additional notes under higher-level headings.

PreviousHTML Introduction NextHTML Paragraphs

Last updated 28 days ago