HTML Headings

HTML Heading are the titles or subtitles that you want to display on a web page. There are 6 different types of heading i.e <h1> to <h6>. <h1> is the biggest and most important Heading whereas <h6> is the smallest one.

Examples of HTML Headings

Example 1: Basic Headings

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings Structure</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>Nepal Coding School</h2>
    <h3>Nepal Coding School</h3>
    <h4>Nepal Coding School</h4>
    <h5>Nepal Coding School</h5>
    <h6>Nepal Coding School</h6>
  </body>
</html>

Explanation: each heading tag from <h1> to <h6> is used to create headings of varying its importance.

Example 2: Using Headings for Content Structure

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings Structure</title>
  </head>
  <body>
    <h1>Welcome to Nepal Coding School Blog</h1>
    <p>This is an introductory of paragraph.</p>

    <h2>About Us</h2>
    <p>Information about the author.</p>

    <h2>Blog Posts</h2>
    <h3>Post 1: Introduction to Heading</h3>
    <p>Content of the first blog post.</p>

    <h3>Post 2: Understanding CSS</h3>
    <p>Content of the second blog post.</p>

    <h2>Contact</h2>
    <p>How to get in touch.</p>
  </body>
</html>

Explanation: headings are used to structure the content of a blog, making it clear and easy to navigate.

Best Practices for Using HTML Headings

  1. Use Headings Hierarchically: Start with <h1> for the main heading, followed by <h2>, <h3>, and so on. Do not skip heading levels.
  2. Use Only One <h1> per Page: The <h1> tag should be used for the main heading of the page for the SEO purpose.

By following these practices, you can create well-structured, accessible, and SEO-friendly web pages that are easy to navigate and understand.

Share this Tutorials

HTML Headings

Or copy link

CONTENTS
Scroll to Top