The <p> element wraps one block of running text — a paragraph. It's the single most common tag for actual page content.
Syntax
<p>Your paragraph text goes here.</p>Basic Example
<p>CodingNow offers live, mentor-led courses in AI, Data Science and Full Stack development.</p>
<p>Every course includes real projects and placement support.</p>Browser output: two separate blocks of text, each starting on its own line with visible space above and below — that spacing comes from the browser's default CSS margin on <p>, not from anything you wrote.
How It Works
- Every
<p>is a block-level element — it always starts on a new line and takes the full available width by default. - Extra spaces, tabs, and line breaks typed inside your HTML source are collapsed into a single space when the browser renders the paragraph — HTML does not preserve your source formatting for normal text (that's what pre is for).
- The closing
</p>tag is technically optional in HTML5 because browsers auto-close a paragraph when they hit another block element — but you should always write it explicitly for clean, predictable code.
Important Attributes
| Attribute | Purpose |
|---|---|
class / id | The only attributes commonly used — <p> has no attributes of its own beyond the universal global set |
Real-World Example
<article>
<h1>5 Tips for Learning Python</h1>
<p>Start with the basics before jumping into frameworks. Focus on writing small scripts first.</p>
<p>Practice daily, even for 20 minutes — consistency beats long, occasional study sessions.</p>
</article>This is exactly how blog posts, articles, and course descriptions are structured — one <p> per distinct idea, not one giant block of text.
Common Mistakes
- Using several
<br>tags to fake the visual gap between paragraphs instead of just starting a new<p>— see line-break for why this matters - Nesting a block-level element like another
<p>, a<div>, or a<table>inside a<p>— this is invalid; the browser will silently close the outer<p>early to fix it, often producing unexpected layout - Writing one enormous paragraph packed with multiple unrelated ideas instead of breaking it into several focused ones
Best Practices
- One clear idea per paragraph — easier to read, easier to scan
- Control spacing between paragraphs with CSS
margin, never with manual line breaks - Keep paragraphs reasonably short on the web — dense text blocks are harder to read on a screen than on paper
Accessibility Considerations
Proper <p> boundaries let screen readers pause naturally between ideas, the same way visual whitespace helps sighted readers. A page built from <br>-separated text instead of real paragraphs removes that natural pacing.
SEO Considerations
Paragraph text is the main body content search engines actually read and index. Clear, well-structured paragraphs under the right headings help search engines understand what each part of the page is about.
Browser & Modern HTML Notes
Nothing has changed about <p> since early HTML — it remains one of the most stable, unglamorous, essential tags on the web.
Mini Practice
- Write a 3-paragraph "About Me" page, one idea per paragraph.
- Find a page (real or invented) using
<br><br>to separate ideas and rewrite it using proper<p>tags. - Try nesting a
<div>inside a<p>in a browser dev tools sandbox and observe how the browser "fixes" your invalid markup.
