Headings and paragraphs
HTML uses tags to structure the page. <h1> is the biggest heading, <h2> smaller, and <p> is a paragraph. Every tag has an opening and closing part.
Appy Says…
Headings aren't just for making text big and bold — they're the outline of your webpage. Screen readers, search engines, and browsers all use heading levels to understand your content's structure. Get them right and your pages are accessible and SEO-friendly.
What are HTML Headings?
HTML has six heading levels: <h1> through <h6>. They define a hierarchy — <h1> is the main page title (there should be only one), and each level is a sub-section of the one above.
- •
<h1>— main page title (one per page) - •
<h2>— major section headings - •
<h3>— sub-sections within an<h2> - •
<h4>–<h6>— deeper sub-levels (rarely needed) - •Browsers display headings larger and bolder by default
- •Use CSS to control visual size — don't pick headings just for their look
Think of it like a YouTube chapter list
A YouTube video description uses chapters: the main title is h1, each chapter is h2, sub-points inside a chapter are h3. Headings give your page the same navigation structure — users and search engines can jump straight to what they need.
How It Works
- •1. Use
<h1>once for the page title - •2. Use
<h2>for each major section (About, Projects, Contact) - •3. Use
<h3>for sub-sections inside an<h2> - •4. Never skip levels (don't jump from h2 to h4 — it breaks accessibility)
- •5. Screen readers read headings to give visually impaired users an overview
- •6. Google weights
<h1>heavily for SEO — make it descriptive
Real-World Examples
- •Wikipedia: the article title is
<h1>, each section is<h2> - •A portfolio:
<h1>Appy Dev</h1>,<h2>Projects</h2> - •A blog post: one
<h1>for the title,<h2>s for each section - •A news site uses
<h1>for the main headline,<h2>for article previews
Key Facts
- •Only one
<h1>per page — this is an SEO and accessibility rule - •WCAG accessibility guidelines require a logical heading hierarchy
- •Heading text is a key signal Google uses to index page content
- •CSS can make an
<h3>look larger than an<h2>— choose tags for meaning, not appearance
Watch Out!
Don't use headings just to make text bigger or bolder — use CSS for that. Misusing heading levels breaks screen readers and confuses search engines. If you just want bold text, use <strong> or CSS font-weight.
Remember
One <h1> per page. Then <h2> for sections, <h3> for sub-sections. Never skip levels.
What You Learned
- •Six heading levels
<h1>–<h6>create a content hierarchy - •One
<h1>per page; never skip levels; choose tags for meaning not appearance - •Unlocks: SEO, accessibility, screen reader navigation, clean document structure
Key Facts
- →Only one
<h1>per page — this is an SEO and accessibility rule - →WCAG accessibility guidelines require a logical heading hierarchy
- →Heading text is a key signal Google uses to index page content
- →CSS can make an
<h3>look larger than an<h2>— choose tags for meaning, not appearance
Real-World Examples
Remember
One <h1> per page. Then <h2> for sections, <h3> for sub-sections. Never skip levels.
Quick Quiz
What tag is for a paragraph?