HTML <h1> to <h6> Element

HTML heading elements are used to define headings and subheadings on a webpage. They create a hierarchical structure for your content, with <h1> being the most important and <h6> the least important. Search engines use these headings to index the structure and content of your web pages.

Headings should be used semantically to structure content, not just for styling text. Always maintain proper heading hierarchy (h1 → h2 → h3, etc.) for accessibility and SEO benefits.

Basic Syntax

Here's how heading elements are written in HTML:

Examples

Example 1: Basic Heading Structure

A simple document outline with proper heading hierarchy:

Example 2: Styled Headings

Headings with inline CSS styling:

Example 3: Headings with Anchors

Creating linkable section headings:

Example 4: Dynamic Heading with JavaScript

Changing heading content with JavaScript:

Example 5: Responsive Headings with JavaScript

Adjusting heading levels based on screen size:

Tips and Best Practices

• Use only one <h1> per page for the main title
• Maintain proper heading hierarchy (don't skip levels)
• Headings should be concise and descriptive
• Use headings to create a document outline, not for styling
• Consider using ARIA landmarks with headings for better accessibility
• For SEO, include important keywords in your headings
• Use CSS for visual styling rather than choosing headings based on appearance

Accessibility Considerations

Screen readers use headings to navigate content. Proper heading structure helps users with disabilities understand your content's organization:

• Never use headings just for visual effect (use CSS instead)
• Ensure headings accurately describe the content that follows
• Don't use empty headings
• Test your heading structure with accessibility tools