Subjects and lessons to explore.

Law

Web Development · Foundations

Headings and Paragraphs

9 min read 5 practice questions
6 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

HTML headings (h1 through h6) name and rank the sections of a page. Paragraphs (p) group ordinary prose into distinct paragraphs. They are , not font-size controls: a heading tells software that a passage begins a section, and a tells it that a block is paragraph text. A logical heading sequence and real paragraph elements make a page easier to read, maintain, and navigate with .

Why this matters

Readers use headings to scan a page before deciding what to read, and assistive technologies can use them for in-page navigation. Paragraph markup also gives prose a meaningful boundary instead of relying on visual spacing alone. In coursework, these elements are a compact introduction to semantic HTML: choose markup for what content is, then use CSS later for its appearance. That separation helps a team change a visual design without silently changing the document's organization.

The college version

Heading elements express rank

HTML supplies six heading elements: h1, h2, h3, h4, h5, and h6. The number is a rank in a document's organization, not an instruction to use a particular visual size. In a simple article, an h1 can name the page's main subject, h2 elements can name its peer sections, and an h3 can name a subsection within one of those sections. The WHATWG HTML Standard defines these as headings, while MDN advises authors to start with h1 and progress through the ranks without skipping levels. A useful authoring test is to imagine an outline: each lower-ranked heading should introduce a subdivision of the higher-ranked idea above it. Headings that merely make a phrase large or bold communicate the wrong structure. If text only needs a different look, CSS owns that decision; the should be chosen because the text actually labels a section. A page generally has one h1 that describes its content, although the HTML Standard permits multiple non-nested h1 elements. For introductory authoring, one clear page-level h1 is the less surprising convention. This lesson concerns the ranking of headings, not page landmarks or the full document outline algorithm.

Paragraphs are prose units

The p element represents a paragraph. A paragraph is often displayed as a separated block of text, but the HTML Standard emphasizes that the presentation can vary: a stylesheet or browser may render paragraph breaks differently. That is why blank-looking space, a line break, or a styled div is not automatically a substitute for a paragraph element. Use p for a coherent run of ordinary prose. A heading is not a tiny paragraph and a paragraph is not a heading with smaller default type; each has a different structural meaning. The content model for p is phrasing content, so it is not a general wrapper for any arrangement a design needs. In particular, a list cannot be placed inside a paragraph. Close the paragraph before the list and begin a new paragraph after it if the surrounding sentence continues. The standard also says that p should not be used when a more specific element fits the content. That principle does not require memorizing every element today. It does mean that authors should first ask whether the content is ordinary prose, then select p when the answer is yes rather than using paragraphs as a generic layout device.

Accessible organization comes from the sequence

Heading markup has practical accessibility consequences. W3C's Web Accessibility Initiative explains that headings communicate a page's organization and that browsers and assistive technologies can use them to provide in-page navigation. The text inside a heading should therefore describe the section it introduces. A page that jumps from an h1 directly to an h4 because the author prefers the smaller default appearance hides the relationship that the rank is meant to express. A better approach is to choose ranks by and use CSS separately if a particular visual treatment is needed. Consider a page about campus recycling. h1 might be “Campus Recycling”; h2 headings could be “What Goes in Each Bin” and “Pickup Schedule”; an h3 under the first h2 might be “Paper.” The paragraphs after each heading explain that topic until another heading starts a new section. This organization helps every reader scan the subject and gives navigation tools a useful hierarchy. It also makes later editing safer: a contributor can see which explanation belongs to which labeled topic. It is not a promise that headings alone make an entire page accessible: useful link text, images, form labels, keyboard behavior, and many other choices still matter. It is a concrete first step toward preserving the meaning of the content in the markup.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Think of a web page as a well-organized notebook. A heading is the label at the start of a big idea or a smaller idea inside it. A paragraph is the group of sentences that explains one part of that idea. The labels tell readers where they are before they read every word. Computers can understand those labels too when you use real HTML heading and paragraph elements. That lets a reader jump to the part they need instead of hunting through one long wall of text.

Picture it like this

An h1 is the label on a notebook's cover, h2 labels are major dividers, and h3 labels are smaller dividers inside one section. Paragraphs are the short blocks of notes filed under the right divider.

Where the picture stops working

A web page is not physically arranged in a notebook, and heading numbers do not have to match the font size that appears on screen. CSS can change the appearance without changing the markup's hierarchy.

Worked example

A student is marking up a page called “Campus Recycling.” They start with <h1>Campus Recycling</h1>, because it names the page's main subject. Two peer topics follow: <h2>What Goes in Each Bin</h2> and <h2>Pickup Schedule</h2>. Under the first topic, paper is a narrower category, so it receives <h3>Paper</h3>, followed by <p>Place clean paper in the blue bin.</p>. The student does not choose h3 because it looks smaller; it is h3 because Paper belongs inside What Goes in Each Bin. If the designer wants the h2 to look smaller, CSS can change its font size without changing the HTML rank.

Key takeaway

Use h1–h6 to label a real hierarchy of topics and p for ordinary prose. Let CSS control how those elements look; let HTML preserve what they mean.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

Which HTML element represents a paragraph of ordinary prose?

Choose an answer, then check it.
Question 2 of 3intermediate

What does the number in an h3 element primarily communicate?

Choose an answer, then check it.
Question 3 of 3intermediate

A page has <h1>Travel Guide</h1> and then begins a peer topic called “Packing.” Which markup best represents that new peer topic?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define the HTML heading elements and the paragraph element.
  • Explain how heading ranks communicate a document hierarchy.
  • Distinguish structural heading markup from visual text styling.
  • Apply a logical heading sequence to a short page fragment.
  • Identify when prose belongs in a paragraph rather than a heading.

Common mistakes

  • Choosing h3 or h4 solely for a preferred font size.

    Choose the rank from the content hierarchy, then use CSS for appearance.

  • Skipping from h1 to h4 because intermediate headings are unused.

    Use a sequence that reflects subdivisions, normally progressing through levels.

  • Putting an entire article in one paragraph element.

    Split distinct prose units into separate paragraphs.

  • Using a paragraph as a wrapper around content with a more specific structure.

    Use p for ordinary prose and choose the appropriate element when the content has another role.

Easily confused

Heading vs. Paragraph

A heading labels a section in the content hierarchy; a paragraph contains ordinary prose within that organization.

HTML heading rank vs. CSS font size

A rank communicates structure; a font size controls presentation and can be changed independently.

Key vocabulary

heading element
An HTML element from h1 through h6 that labels a section or subsection of content.
heading rank
A heading's level in the hierarchy, indicated by the number in its element name.
paragraph
A unit of ordinary prose represented in HTML by a p element.
structural markup
Markup chosen to express the role or organization of content rather than its visual styling.
hierarchy
An arrangement in which broader topics contain more specific subtopics.
assistive technology
Software or hardware that helps people access digital content, including tools that offer heading-based navigation.

Sources & references

  1. HTML Living Standard — The h1, h2, h3, h4, h5, and h6 elements — WHATWG
  2. HTML Living Standard — The p element — WHATWG
  3. MDN Web Docs — h1–h6: The HTML Section Heading elements — Mozilla / MDN Web Docs
  4. W3C Web Accessibility Initiative — Headings — W3C Web Accessibility Initiative

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.