Introduction to HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage. They are defined with the <h1> to <h6> tags.
<h1> defines the most important heading (largest in size by default) while <h6> defines the least important heading (smallest in size by default).
Heading Hierarchy Example
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Code Example
<!DOCTYPE html>
<html>
<head>
<title>Headings Example</title>
</head>
<body>
<h1>Main Title</h1>
<p>Introduction text...</p>
<h2>Chapter 1</h2>
<p>Content for chapter 1...</p>
<h3>Section 1.1</h3>
<p>Content for section 1.1...</p>
<h2>Chapter 2</h2>
<p>Content for chapter 2...</p>
</body>
</html>Best Practices
- Use only one
<h1>per page (for main title) - Maintain a logical heading hierarchy (don't skip levels)
- Use headings to structure content, not just for styling
- Headings should be meaningful and describe the content that follows
- Search engines use headings to index the structure of your content
Accessibility Considerations
Screen readers and other assistive technologies use headings to navigate content. Proper heading structure is crucial for:
- Users who navigate by headings
- Understanding the page organization
- Context for the content that follows
Always ensure your heading structure represents the document outline accurately.
