What is the purpose and difference between <p>, <h1>–<h6>?

Difficulty: 2/10

semantic HTML, accessibility, document structure

The <p> tag is used to define a paragraph of text, while <h1>–<h6> are heading tags that define section headings. Headings represent a document’s structure and hierarchy, where <h1> is the highest-level heading (most important) and <h6> is the lowest-level heading (least important).

Example of <p> and <h1>–<h6>

Key Differences

1<p> defines **blocks of text** as paragraphs, focusing on content flow.
2<h1>–<h6> define headings, establishing the document’s outline and hierarchy.
3<h1> should be **used once per page** to represent the main title.
4
Headings (<h1>–<h6>) improve accessibility and SEO by providing structure.
5
Paragraphs can follow headings to add descriptive content.

Semantic Structure Example

Scenario Questions

0-2 years experience

1You're building a simple blog post page. How would you use <h1>, <h2>, and <p> tags to structure the title, subtitle, and body text?
2If you accidentally used a <p> tag for the article title, what visual and accessibility issues might a user encounter?
3What default browser styling differences would you notice between a <p> element and an <h2> element?

Follow-up Questions

How does proper heading hierarchy influence SEO and screen‑reader navigation?
What problems arise if you replace headings with styled <div> or <p> elements?
Can you describe a scenario where changing a heading level caused a layout or accessibility regression?