Lesson 4: HTML Headings
What are HTML Headings?
HTML headings are titles or subtitles that you want to display on a webpage. Headings help structure your content and make it easier to read.
Key Points:
- HTML provides 6 levels of headings: <h1> to <h6>
- <h1> defines the most important heading
- <h6> defines the least important heading
- Search engines use headings to understand page structure
The Six Heading Levels
HTML offers six heading tags from <h1> to <h6>:
HTML Code:
<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>
Output:
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
Heading Importance
Each heading level has a specific purpose in organizing your content:
- <h1> - Main page title (use only once per page)
- <h2> - Major sections
- <h3> - Subsections
- <h4> to <h6> - Further sub-divisions
Practical Example
Here's how you might structure a simple article:
HTML Code:
<h1>My School Website</h1>
<h2>About Our School</h2>
<p>Welcome to our school...</p>
<h3>History</h3>
<p>Our school was founded...</p>
<h3>Mission</h3>
<p>Our mission is to...</p>
<h2>Academics</h2>
<p>We offer various programs...</p>
Output:
My School Website
About Our School
Welcome to our school...
History
Our school was founded...
Mission
Our mission is to...
About Our School
We offer various programs...
💡 Best Practices:
- Always use <h1> for the main title of the page
- Don't skip heading levels (don't jump from h1 to h3)
- Use headings to create a logical structure, not just for styling
- Don't use headings to make text big or bold - use CSS instead
- Keep headings short and descriptive
Headings and SEO
Search engines like Google use headings to understand the content and structure of your web pages. Proper heading hierarchy helps with:
- Search engine optimization (SEO)
- Accessibility for screen readers
- Better user experience
Common Mistakes to Avoid
❌ Wrong:
<h1>Main Title</h1>
<h5>Subtitle</h5> ← Skipped h2, h3, h4!
✅ Correct:
<h1>Main Title</h1>
<h2>Subtitle</h2> ← Proper hierarchy!
Practice Exercise
Try This:
Create a webpage about your favorite hobby with:
- An <h1> for the main title
- Two <h2> headings for major sections
- At least two <h3> headings for subsections
- Paragraphs under each heading