What Are HTML Headings?

HTML Heading

HTML headings are used to define the structure of your webpage content. They range from <h1> to <h6>, where:

• <h1> represents the highest or most important heading.
• <h6> represents the lowest or least important headin

Syntax:

<h1>This is a top-level heading</h1>
<h2>This is a subheading</h2>
<!-- ... -->
<h6>This is the smallest heading</h6>

Example 1: Basic HTML Headings (<h1> to <h6>)

Code:

<h1>Main Title of the Page</h1>
<h2>Subheading 1</h2>
<h3>Subheading 1.1</h3>
<h4>Subheading 1.1.1</h4>
<h5>Subheading 1.1.1.1</h5>
<h6>Subheading 1.1.1.1.1</h6>

Best Practices for Using Headings

1. Use <h1> Only Once Per Page

The <h1 > tag should ideally represent the main title of the page. It helps search engines understand what the page is about. Don’t overuse it.

<h1>Welcome to Our Online Store</h1> 

2. Use Headings Hierarchically

Headings should follow a logical order. For example, after an <h1>, use <h2>, then <h3>, and so on. Don’t jump from <h1> to <h4>

<h1>My Webpage</h1>
<h2>About Us</h2>
<h3>Our Mission</h3>

3. Don’t Skip Headings

Avoid skipping headings like using

4. Use Keywords in Headings for SEO

If possible, include relevant keywords in your headings to improve SEO. But, always keep it natural and relevant to the content.

<h2>Best Yoga Exercises for Beginners</h2>

5. Use Headings for Accessibility

Screen readers rely on headings to provide a navigable outline of the page for users with visual impairments. Keep headings clear and descriptive.

Example: Using Headings with Content

<h1>Ultimate Guide to HTML</h1>
<h2>What is HTML?</h2>
<p>HTML stands for HyperText Markup Language.</p>
<h2>HTML Tags and Elements</h2>
<p>HTML consists of various tags like &lt;div&gt;, &lt;p&gt;, etc.</p>
<h3>Common HTML Tags</h3>
<ul>
  <li>&lt;p&gt;</li>
  <li>&lt;a&gt;</li>
</ul>

Summary