HTML Headings Basics

HTML Headings Basics

HTML Headings

The headings of sections on a webpage are defined using HTML Headings. From <h1>to<h6>, there six levels of headings. <h1> is the highest level(or more significant) and <h6> is the lowest level.

Headings Explanation

Below is a quick synopsis of every heading level:

<h1>: This is a page’s primary heading, usually used only once to indicate the main title.

<h2>:Applicable to the content’s main sections.

<h3>:Applies to those sections’ subsections.

<h4>:Applicable to shorter subsections.

<h5>: use <h5> for subsections that are even smaller.

<h6>:For the tiniest subsections, use<h6>.

Example

This is an illustration of how headings could be organized in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML Headings</title>
</head>
<body>
    <h1>Main Title of the Page</h1>
    <p>This is a paragraph under the main title.</p>
    
    <h2>Section 1</h2>
    <p>Content of section 1.</p>
    
    <h3>Subsection 1.1</h3>
    <p>Content of subsection 1.1.</p>
    
    <h2>Section 2</h2>
    <p>Content of section 2.</p>
    
    <h3>Subsection 2.1</h3>
    <p>Content of subsection 2.1.</p>
    
    <h4>Sub-subsection 2.1.1</h4>
    <p>Content of sub-subsection 2.1.1.</p>
    
    <h5>Sub-sub-subsection 2.1.1.1</h5>
    <p>Content of sub-sub-subsection 2.1.1.1.</p>
    
    <h6>Sub-sub-sub-subsection 2.1.1.1.1</h6>
    <p>Content of sub-sub-sub-subsection 2.1.1.1.1.</p>
</body>
</html>

Live Code Example

See the Pen
HTML Headings
by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

In this instance, the page’s primary title is indicated by <h1> and <h2> denotes the main title of the website.The subsections <h3>,<h4>,<h5> and <h6> are progressively most nested.

To give your material structure and make it easier for visitors and search engines to comprehend how it is organized, utilize headings in a hierarchical fashion.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top