View Categories

HTML Headings

HTML headings, ranging from <h1> to <h6>, indicate the hierarchy and significance of content. Search engines use them for indexing, while users rely on headings to navigate. The <h1> tag is used for the main titles, while <h2> to <h6> tags are used for progressively less important content, ensuring clear structure and readability.

HTML provides six levels of heading elements, from <h1> (the highest level) to <h6> (the lowest level).

Purpose and Usage of Heading Tags:

  1. <h1> – Main Heading (Largest):
    Represents the primary topic or title of the page.
    Use sparingly to maintain clarity and focus.
  2. <h2> – Subheadings:
    Ideal for dividing content into distinct sections.
    If further subsections exist, use <h3> for those subdivisions.
  3. <h3> to <h6> – Smaller Headings:
    These headings gradually decrease in size and are used for finer content subdivisions.

Syntax:

Note: The ‘h’ inside the tag should be lowercase.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
.
.
.
<h6>Heading 6</h6>

Why Are Headings Important?

  1. SEO Impact:
    Search engines index headings to understand the content structure, enhancing visibility and rankings when used properly.
  2. Highlighting Key Topics:
    Headings emphasise the essential information and allow readers to quickly understand the document’s layout.

Example:

This example demonstrates the use of various HTML heading tags:

<!DOCTYPE html>
<html>
  <body>
    <h1>This is heading h1</h1>
    <h2>This is heading h2</h2>
    <h3>This is heading h3</h3>
    <h4>This is heading h4</h4>
    <h5>This is heading h5</h5>
    <h6>This is heading h6</h6>
  </body>
</html>

Customisation in HTML Heading Tags

The default size of HTML headings can be adjusted using the style attribute.

Example:

This example explains how to customise HTML heading tags by specifying font sizes.

<!DOCTYPE html>
<html>
  <body>
    <h1>H1 Heading</h1>

    <!-- Using the style attribute to modify the size of the heading, as done below -->
    <h1 style="font-size: 50px">H1 with new size.</h1>

    <!-- Here, "font-size" is the property used to modify the heading, set to 50px -->
  </body>
</html>

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment