You will learn how to structure text using the <p> element and understand why HTML ignores extra spaces and line breaks in your source code.
What it is
The <p> element defines a paragraph of text. It is a block-level element, meaning it starts on a new line and takes up the full width available. In HTML, whitespace (spaces, tabs, and newlines) between tags is collapsed into a single space when rendered by the browser. This behavior allows developers to format their source code for readability without affecting the visual output.
Why it matters
- Semantic Structure: Using
<p>tells browsers and assistive technologies that the content is a distinct unit of thought, improving accessibility. - Coding Readability: You can break long lines of text across multiple lines in your editor without creating unwanted gaps in the webpage.
- Consistent Rendering: Browsers apply default margins to paragraphs, ensuring consistent spacing between blocks of text without needing CSS.
- SEO Benefits: Search engines use semantic tags like
<p>to understand the hierarchy and relevance of content.
Syntax or steps
To create a paragraph, wrap your text inside opening and closing <p> tags. The syntax is straightforward: <p>Your text here</p>. You do not need to close the tag explicitly if followed immediately by another block-level element, but best practice is always to include the closing tag for clarity.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is the first sentence.
This is the second sentence.</p>
<p>This is a separate paragraph.</p>
</body>
</html>In this example, the newline and indentation before "This is the second sentence" are ignored. The browser renders them as a single space. However, because they are in different <p> elements, there is a visible gap between the two paragraphs due to default browser margins.
Common mistakes
- Using
<br>for spacing: Do not use multiple<br>tags to create space between paragraphs. Use separate<p>elements instead. - Nesting block elements: Never place a
<p>inside another<p>. This creates invalid HTML and unpredictable rendering. - Assuming line breaks matter: Remember that pressing Enter in your code editor does not create a new line on the screen unless you use
<br>or start a new block element. - Forgetting closing tags: While technically optional in some contexts, omitting
</p>can lead to confusion when debugging complex layouts.
When to use it
Use <p> for standard prose. Compare it with other text containers below:
| Element | Best For | Behavior |
|---|---|---|
<p> |
Blocks of continuous text | Adds vertical margin; collapses internal whitespace |
<div> |
Generic grouping/layout | No default styling; requires CSS for spacing |
<span> |
Inline styling within text | Does not break line; no vertical margin |
Practice
Guided Exercise: Write an HTML snippet with three sentences. Put the first two sentences on one line in your code editor, and the third sentence on a new line. Observe how the browser renders them.
Challenge: Create two paragraphs where the second paragraph contains a nested list (<ul>). Ensure the list items are properly indented in your source code but render correctly without extra spaces.
Quick check
Question: If you type ten spaces between two words inside a <p> tag, how many spaces appear in the browser?
Answer: One space. HTML collapses consecutive whitespace characters into a single space.
Summary
The <p> element is the fundamental building block for text in HTML, providing semantic meaning and automatic spacing. Understanding whitespace collapsing allows you to write clean, readable code without worrying about accidental formatting errors in the final output.