Browsers normally collapse a run of ordinary spaces and line breaks into a single space when displaying text. That means you can indent HTML for readability without creating strange gaps on screen.
What You Need to Know
Use separate paragraphs for separate ideas, <br> for meaningful line breaks, and <pre> only when keeping text spacing is truly part of the content.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
<p>Two spaces usually appear as one.</p>
<p>Line breaks in source
do not automatically make new lines.</p>
<pre>These spaces stay exactly as typed.</pre>Let’s Understand the Example
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Pre preserves ordinary spacing and line breaks so formatted examples remain readable.
Look for the text “Two spaces usually appear as one.” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “Two spaces usually appear as one.”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Add several spaces inside a paragraph, then compare what happens inside a pre element.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Trying to create a layout by typing dozens of spaces into a paragraph.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Browsers normally collapse a run of ordinary spaces and line breaks into a single space when displaying text.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Use separate paragraphs for separate ideas, <br> for meaningful line breaks, and <pre> only when keeping text spacing is truly part of the content.