HTML headings are defined using the <h1> to <h6> elements, representing different levels of headings. Here's a step-wise breakdown of how to use HTML headings:

1.  Heading 1 (<h1>):

  • Represents the main heading or title of the page.
  • Should be used for the most important text on the page.
  • There should be only one <h1> per page.
<h1>This is Heading 1</h1>

Output:

This is Heading 1

 

2. Heading 2 (<h2>):

  • Represents a subheading or section heading under Heading 1.
  • Indicates a lower level of importance compared to Heading 1.
  • Can have multiple <h2> elements on a page.
<h2>This is Heading 2</h2>

Output:

This is Heading 2

 

3. Heading 3 (<h3>):

  • Represents a subheading under Heading 2.
  • Indicates a lower level of importance compared to Heading 2.
  • Can have multiple <h3> elements on a page.
<h3>This is Heading 3</h3>

Output:

This is Heading 3

 

4. Heading 4 (<h4>):

  • Represents a subheading under Heading 3.
  • Indicates a lower level of importance compared to Heading 3.
  • Can have multiple <h4> elements on a page.
<h4>This is Heading 4</h4>

Output:

This is Heading 4

 

5. Heading 5 (<h5>):

  • Represents a subheading under Heading 4.
  • Indicates a lower level of importance compared to Heading 4.
  • Can have multiple <h5> elements on a page.
<h5>This is Heading 5</h5>

Output:

This is Heading 5

 

6. Heading 6 (<h6>):

  • Represents the lowest-level heading.
  • Often used for subsections or less important headings.
  • Can have multiple <h6> elements on a page.
<h6>This is Heading 6</h6>

Output:

This is Heading 6

 

Here's an example incorporating all these headings:

<!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 (Heading 1)</h1>
    <h2>Subsection (Heading 2)</h2>
    <h3>Sub-subsection (Heading 3)</h3>
    <h4>Another Sub-subsection (Heading 4)</h4>
    <h5>Yet Another Sub-subsection (Heading 5)</h5>
    <h6>Minor Section (Heading 6)</h6>
</body>
</html>