The paragraph (<p> tag) is the most common element on the web. This unit covers how paragraphs work, how browsers handle whitespace, and how to structure blocks of text cleanly.
A paragraph is wrapped in <p> and </p> tags. The browser adds a blank line above and below each paragraph automatically — you don’t need to add spacing manually. In the example below, we add two paragraphs.
<p>The web is made of paragraphs.</p>
<p>Each one gets its own breathing room.</p>Careful! HTML ignores extra spaces, tabs, and line breaks inside your code. No matter how you format the source, the browser renders it as a single block of text. For the following example:
<p>
This text has
lots of spaces.
</p>
The browser will display “This text has lots of spaces.” without any space or breakline!
Use the self-closing <br> tag. But use it sparingly — if you need many line breaks, you probably want multiple <p> tags instead.
You can nest inline tags inside <p> to style runs of text without breaking the paragraph flow.
| Tag | Purpose |
|---|---|
<strong> | Important text (bold) |
<em> | Emphasised text (italic) |
<code> | Inline code or commands |
<br> | Manual line break |
<p>
Save your file as <code>index.html</code>,
then open it in <strong>any browser</strong>.
</p>
Headings (<h1> through <h6>) introduce sections; paragraphs carry the content within them. A common mistake is using headings just to make text bigger — resist the urge. Screen readers and search engines read heading structure as a table of contents for your page.
<h2>Why paragraphs matter</h2>
<p>They are the backbone of readable web text.</p>
<p>Each idea gets its own paragraph.</p>
Copy this into your index.html from Unit 1 and open it in a browser:
<body>
<h1>My paragraphs page</h1>
<p>This is my <strong>first</strong> paragraph.</p>
<p>This is a second one, <em>with emphasis</em>.</p>
<p>And a third with a<br>manual line break.</p>
</body>
Notice how the browser adds space between paragraphs automatically, collapses your whitespace, and renders the inline tags correctly.
<p>...</p> — a paragraph block<br> — a line break (no closing tag needed)<strong> — bold/important text<em> — italic/emphasised text<code> — monospace inline code