HTML Paragraphs

In HTML, the paragraph is one of the most basic and important ways to organize text content. We use the <p> tag to define a paragraph.

Why use a dedicated paragraph tag?
By default, browsers treat continuous text as a single block. If you write multiple lines of text in HTML and press Enter, the browser will not display line breaks. The <p> tag tells the browser: “Here is a complete paragraph.” The browser automatically adds margins (blank lines) before and after each paragraph, making the article structure clear and easy to read.

Automatic line wrapping
When the text width exceeds the container width, the browser automatically wraps lines between words. You do not need to manually insert <br> for line breaks – <br> is only for forced breaks (e.g., poems, addresses, etc.). For normal narrative content, always use <p> to wrap each paragraph.

Multiple paragraphs
A document can contain any number of <p> tags. Each <p> should represent an independent semantic unit. Do not use multiple empty <p> or <br> tags to increase spacing – that breaks HTML semantics and is unfriendly to search engines and assistive technologies (such as screen readers). The proper way is to adjust paragraph spacing with CSS.

Semantics and accessibility
Using <p> is not just about making the page look good. It helps search engines understand the structure of your article and allows visually impaired users using screen readers to quickly jump between paragraphs. In contrast, using <div> with CSS to mimic paragraphs loses this semantic information.

Common mistakes to avoid

• ❌ Using <div> instead of <p> to wrap text paragraphs

• ❌ Using multiple <br> tags to separate lines of text as paragraphs

• ❌ Putting <br> directly after a heading without using <p>

• ✅ Correct approach: after a heading, start the text with <p>, and use one <p> per natural paragraph

Summary
Remember: paragraphs are the foundation of web content. Learning to use the <p> tag correctly not only helps you write more standard, W3C‑compliant HTML but also lays a clean structural foundation for later CSS styling and JavaScript interactions.