What Are HTML Headings?

HTML headings are tags used to define titles, sections, and subsections of web content. They range from <h1> (most important) to <h6> (least important). These tags not only define visual hierarchy but also communicate structure to screen readers and search engines.

Syntax and Examples

Here’s a basic example of how headings are written in HTML:

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
    

Visual Appearance in Browsers

Each heading level has a predefined font size and weight in most browsers:

Where to Use Which Heading?

• <h1>: Use once per page for the main page title (e.g., "My Portfolio", "Contact Us").
• <h2>: Use for major sections under the main heading (e.g., "About", "Services").
• <h3>: Use for sub-sections inside <h2> areas (e.g., "Frontend Development" under "Services").
• <h4>, <h5>, <h6>: For deeper nesting in outlines or structured documents such as tutorials or technical manuals.

Why Are Headings Important?

Headings give your webpage a clear structure and help both humans and machines understand the content layout. Search engines use headings to determine content relevance, and assistive technologies like screen readers rely on them for navigation.

• They improve SEO by emphasizing keywords and structure.
• They enhance user experience with clear navigation and readability.
• They help screen readers navigate pages for visually impaired users.

Best Practices

• Use only one <h1> per page for the main topic.
• Use headings hierarchically — do not skip levels (e.g., avoid jumping from <h2> to <h4>).
• Don’t use headings just for styling; use CSS for visual presentation instead.
• Keep headings meaningful and relevant to the content they introduce.

Sample Document Layout

Here is a sample structure for a typical blog post using HTML headings:

<h1>How to Learn HTML</h1>
  <h2>Introduction</h2>
    <h3>What is HTML?</h3>
    <h3>Why Learn HTML?</h3>
  <h2>Main Concepts</h2>
    <h3>HTML Tags</h3>
    <h3>Attributes</h3>
    <h3>Headings</h3>
  <h2>Conclusion</h2>
    

Conclusion

HTML headings form the backbone of your webpage structure. Using them wisely improves content hierarchy, accessibility, and search engine performance. Always think about how your content is structured, not just how it looks.