p
A paragraph of prose or explanation.
Platform under construction
HTML Text Block Elements
Learn p, blockquote, pre, hr, address as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Text blocks
Text block elements give paragraphs, quotes and code-like text proper shape.
Text is not one single thing. A paragraph, a quote, a preformatted block and a thematic break each mean something different.
Using the right text block element makes content easier to read, style, quote, scan and maintain.
Element group:
p, blockquote, pre, hr, address. Paragraphs, quotes, preformatted text, contact details and topic breaks. Syntax in context
Use text blocks for the role of the text.
Do not create paragraphs with line breaks or divs. Use p for prose and specialized elements when the text has a special role.
<p>HTML describes the structure of a document.</p> <blockquote> <p>Structure first. Styling second.</p> </blockquote> <pre>line 1 line 2 indented line</pre> <address>Contact: hello@example.com</address> <hr>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<p>HTML describes the structure of a document.</p> <blockquote> <p>Structure first. Styling second.</p> </blockquote> <pre>line 1 line 2 indented line</pre> <address>Contact: hello@example.com</address> <hr>
Weak
<div>HTML describes the structure of a document.</div> Text line<br><br>Another fake paragraph <p>"A quote without quote markup"</p>
Rules that matter
Use these rules before publishing real HTML.
Paragraphs use p
Do not use div or br to fake normal paragraphs.
Quotes use blockquote
Use blockquote for longer quoted material, not only italic styling.
Whitespace needs pre
Use pre when spaces and line breaks are part of the content.
Use hr sparingly
An hr signals a topic break, not a decorative line.
Use address only for contact details
Do not use address for every physical address; it is for contact information tied to the page or article.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.
Accessibility
Correct text blocks help assistive technology communicate the kind of text a user is reading.
Production note
Clean text markup makes CMS content, documentation and article templates much easier to style consistently.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Shape text with the right block elements
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?