Loading...
Loading...
Organize text content with headings of different levels and paragraph tags
Headings are like the chapter titles and section headers in a book. HTML gives you 6 levels of headings, from (most important) to (least important). They help organize content, improve readability, and are critical for accessibility and SEO.
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<p>This is a paragraph of text. Paragraphs automatically
have space above and below them.</p>
<p>This is another paragraph.</p>| Tag | Purpose | Size (default) |
|---|---|---|
`` | Page title ā use once per page | Largest |
`` | Major sections | Large |
`` | Subsections | Medium |
``-` | Deep nesting | Small ā Tiny |
| ` ` | Body text / paragraphs | Normal |
<h1>My Blog</h1>
<p>Welcome to my blog about coding!</p>
<h2>Latest Articles</h2>
<p>Today we learned about HTML headings.</p>
<h3>Why Headings Matter</h3>
<p>Headings make content scannable...</p>The browser renders this as a clear hierarchy:
| ā Wrong | Why | ā Right |
|---|---|---|
`Title` | Tag names should be lowercase | `Title` |
Multiple `` on one page | Confuses search engines and screen readers | One ``, rest ` |
`` then ` | Shouldn't jump from h3 back to h1 ā breaks hierarchy | Use `` between them |
Using `` because it looks big | Headings are for structure, not just size | Use CSS to style text size |
Create a page with:
` paragraph under each section describing yourself
<h1>My Learning Journal</h1> <h2>About Me</h2> <p>I'm learning HTML to build websites.</p> <h2>My Goals</h2> <p>I want to become a frontend developer.</p>