HTML Headings
The Six Heading Levels
HTML has six heading tags, from <h1> (largest, most important) to <h6> (smallest, least important):
HTML
<h1>Main Page Title (biggest)</h1> <h2>Major Section</h2> <h3>Sub-section</h3> <h4>Minor Heading</h4> <h5>Small Heading</h5> <h6>Smallest Heading</h6>
SEO Rules for Headings
Search engines (Google) use headings to understand your page structure. Follow these rules:
- Only one
<h1>per page — it is the main title. Google reads this first. - Use
<h2>for major sections,<h3>for sub-sections within those - Do not skip levels (don't jump from h2 to h4)
- Include your target keyword in the
<h1> - Keep headings descriptive — they tell both users and Google what the section is about
Real Page Example
HTML
<h1>HTML Tutorial for Beginners</h1> <!-- page title, 1 only --> <h2>Getting Started</h2> <h3>What is HTML?</h3> <h3>Setting Up VS Code</h3> <h2>HTML Basics</h2> <h3>Tags and Elements</h3> <h3>Attributes</h3> <h4>The href Attribute</h4> <h4>The class Attribute</h4> <h2>Conclusion</h2>
Headings vs Bold Text
Do not use headings just to make text big or bold. Use them to define document structure. If you just want bold text, use <strong> or CSS.
HTML
<!-- WRONG: using h3 just for big bold text --> <h3>Important note: save your file!</h3> <!-- CORRECT: use strong or CSS --> <p><strong>Important note:</strong> save your file!</p>