Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

5 of 24
HTML AttributesHTML ParagraphsHTML HeadingsHTML CommentsHTML Color

🔠 HTML Headings

📌 What are HTML Headings?

HTML heading tags (<h1> to <h6>) help organize your content. They improve accessibility, SEO, and make your page easier to read. HTML heading tags (<h1> to <h6>) are used to define titles and subtitles. Just like books have chapters and sub-chapters, web pages use headings to show importance. <h1> is the most important, and <h6> is the least.

✅ Heading Best Practices

  • Use only one <h1> per page (main title).
  • Use headings in order (don't jump from <h1> to <h4>).
  • Headings should describe the content below them.
  • Don't choose headings based on size—use them for structure, not style.
  • Use CSS to style headings (change color, font, etc.) instead of misusing levels.

📏 Default HTML Heading Sizes

AttributeDescription
<h1>🔴 2em (32px) – Main page title
<h2>🟠 1.5em (24px) – Section heading
<h3>🟡 1.17em (18.72px) – Sub-section
<h4>🟢 1em (16px) – Minor heading
<h5>🔵 0.83em (13.28px) – Small heading
<h6>🟣 0.67em (10.72px) – Least important

💡 HTML Headings Code Example

Example04
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5