HTML Heading Elements
HTML headings (<h1> - <h6>) structure the content of a document. They help organize text logically and highlight key parts like titles, subtitles, and section headers.
Visual Appearance of Headings
The following example shows how HTML heading elements appear in different sizes and styles. <h1> is the largest, and <h6> is the smallest.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Hierarchy and Structure
Headings should be used in a hierarchical order. <h1> represents the main topic of the page, while <h2>-<h6> represent subsections. Avoid skipping levels (e.g., <h1> followed by <h4>), as this breaks logical structure.
Semantic Importance
Headings are not just for style — search engines, screen readers, and other tools rely on them to interpret content. A well-structured heading hierarchy improves SEO.
Example of Structured Content
This example demonstrates a simple webpage content structure using different heading levels.
Tips for Using Headings
- Use only one <h1> per page.
- Follow a logical hierarchy — don’t skip heading levels.
- Don’t use headings just for styling — only use them when the content is actually a heading.
- Ensure that each <h2> has at least one subheading or content below it.
Task: Create an <h1> heading with the text 'Main Title'!
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
</body>
</html>Preview
Accessibility and SEO
Well-structured heading usage not only helps readers but also technology. For example, screen readers use these to create navigation lists, and search engines prefer logically structured content.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
