A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore preformatted text initial newline handling using a short example that you can inspect and change.
The Idea in Plain English
Inside pre, whitespace usually matters, but HTML parsing has a special initial-newline rule that can remove an immediately following newline in source.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<pre>
Line one
Indented line two
</pre>What Each Part Does
- The pre element preserves text spacing and line breaks.
- The browser reads these lines in order and uses them to build the page or request.
- Changing the relevant value lets you test what this feature controls.
The block preserves indentation and internal line breaks, with the documented special case at the beginning.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: compare authored source against the DOM tree in DevTools focused on HTML Preformatted Text Initial Newline Handling, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Confusing HTML parsing behavior with later CSS white-space styling.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Inside pre, whitespace usually matters, but HTML parsing has a special initial-newline rule that can remove an immediately following newline in source.
- The block preserves indentation and internal line breaks, with the documented special case at the beginning.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.