« Previous Next »

Headings

HTML provides six levels of headings, from <h1> to <h6>.
Headings are used to define titles or subtitles that organize the content on a webpage.
<h1> represents the most important heading, and <h6> represents the least important.

Basic Syntax

  <h1>Main Heading</h1>

  <h2>Subheading</h2>

  <h3>Section Title</h3>

  <h4>Subsection</h4>

  <h5>Minor Heading</h5>

  <h6>Smallest Heading</h6>

Heading Size Comparison

This is <h1> Heading

This is <h2> Heading

This is <h3> Heading

This is <h4> Heading

This is <h5> Heading
This is <h6> Heading

Usage Tips

  • Use <h1> for the main title of the page (only once).
  • Use <h2> to <h6> to organize subtopics and content sections.
  • Headings help search engines understand your content better (SEO).
  • You can style headings using CSS for color, size, font, etc.
Output :

Practice Exercises

Task 1: Which tag creates main website title?

Goal: Practice defining the primary topic title of a webpage.
💡 Hint: Wrap Academy of Information Technology inside the <h1> tag.
💡 Show Solution 
<html>
  <body>
    <h1>Academy of Information Technology</h1>
  </body>
</html>
Output :

Academy of Information Technology

Explanation: The <h1> tag defines the most important heading on a page and should be used only once per page.
Task 2: How to structure subheadings under title?

Goal: Learn organizing content sections using lower hierarchy headings.
💡 Hint: Use <h2> for main subtopic and <h3> / <h4> for sub-sections.
💡 Show Solution 
<html>
  <body>
    <h2>About AIT</h2>
    <h3>Our Vision</h3>
    <h4>Courses Offered</h4>
  </body>
</html>
Output :

About AIT

Our Vision

Courses Offered

Explanation: Tags from <h2> to <h6> help structure document hierarchy for better user reading and SEO.
Task 3: Which tag makes smallest footer heading?

Goal: Practice using the least important heading level for minor notes/contacts.
💡 Hint: Wrap the contact info inside <h6>.
💡 Show Solution 
<html>
  <body>
    <h5>Certifications Available</h5>
    <h6>Contact: info@aitaurangabad.com</h6>
  </body>
</html>
Output :
Certifications Available
Contact: info@aitaurangabad.com
Explanation: The <h6> tag represents the smallest and least important level of heading in HTML.
« Previous Next »