Write an HTML comment as <!-- note -->; browsers skip everything between the markers. Force a line break inside text with <br>, and start a new paragraph with <p>. Browsers squeeze runs of spaces into one, so use for a single fixed space, or the CSS white-space property to keep the spacing you typed.
| You want | Use | Notes |
|---|---|---|
| A note in HTML | <!-- note --> | Visible in page source, never on screen |
| A note in CSS | /* note */ | The only comment form CSS has |
| A line break in a line of text | <br> | Addresses, poems, lyrics |
| A new block of text | <p> ... </p> | Gives spacing you can style |
| One space that never collapses or wraps | | Between a number and its unit |
| Keep every space and newline | white-space: pre-wrap | Still wraps long lines |
Updated
Every case on this page shows the code and what the browser actually draws. Edit any example and the result updates, so you can see why a space vanished or a break did nothing before you change your own page.
A comment starts with <!-- and ends with -->. It can sit between elements or wrap whole blocks to switch them off while you test.
Only the two paragraphs are drawn. The comments, including the one that wraps a whole paragraph, leave no trace on screen.
<!-- Opening hours come from the shop's sign -->
<p>Open Monday to Saturday.</p>
<!--
<p>Closed for the holidays.</p>
-->
<p>Sunday by appointment.</p>The first --> closes the outer comment early, so the leftover text and the final --> appear on the page.
<!-- outer start
<!-- inner note -->
this part leaks out
-->Only Internet Explorer 9 and older read these. Current browsers skip the warning entirely, so the old trick is safe to delete.
<p>Page content.</p>
<!--[if lt IE 9]>
<p>Please update your browser.</p>
<![endif]-->| Element | Meaning | Use it for |
|---|---|---|
| <br> | A break inside one block of text | Addresses, poems, lyrics |
| <p> | A separate paragraph | Any new thought or block of text |
| CSS margin or gap | Space between blocks | Layout spacing that changes per screen size |
| <hr> | A change of topic | A themed break between sections |
The breaks are part of the address, so <br> is the correct choice here.
<address>
Harbour Bakery<br>
14 Quay Street<br>
Galway H91 E2X4
</address>Both look similar, but the second version has real paragraphs and a gap you can change in one place.
<div>
We deliver on weekdays.<br><br>
Orders after 2pm ship the next day.
</div>
<hr>
<style>.spaced p { margin: 0 0 1.25rem; }</style>
<div class="spaced">
<p>We deliver on weekdays.</p>
<p>Orders after 2pm ship the next day.</p>
</div>| Entity | Character | Width | Typical use |
|---|---|---|---|
| | U+00A0 no-break space | Normal space, never wraps | 10 kg, page 3 |
|   | U+2002 en space | Half an em | Gaps in lists or menus |
|   | U+2003 em space | One em | Indenting a single line |
|   | U+2009 thin space | Narrow | Between digit groups in some styles |
In the narrow box, the first line can wrap between 50 and km. The no-break space keeps the second pair together.
<div style="width: 9.5rem; border: 1px dashed #999; padding: 6px">
<p>The trail is about 50 km long.</p>
<p>The trail is about 50 km long.</p>
</div>Five typed spaces turn into one. Each entity keeps its own width.
<p>A B (five typed spaces)</p>
<p>A B (three &nbsp;)</p>
<p>A B (en space)</p>
<p>A B (em space)</p>| Value | Spaces | Newlines | Wraps long lines |
|---|---|---|---|
| normal | Collapsed | Collapsed | Yes |
| nowrap | Collapsed | Collapsed | No |
| pre | Kept | Kept | No |
| pre-wrap | Kept | Kept | Yes |
| pre-line | Collapsed | Kept | Yes |
| break-spaces | Kept, and can wrap | Kept | Yes |
The same text in three boxes. pre keeps everything but runs off the edge, pre-wrap keeps everything and wraps, pre-line keeps only the line breaks.
<style>
div { width: 12rem; border: 1px solid #ccc; margin: 0 0 8px; padding: 4px; font: 13px monospace; overflow: hidden }
</style>
<div style="white-space: pre">Item Qty
Coffee beans, dark roast 2</div>
<div style="white-space: pre-wrap">Item Qty
Coffee beans, dark roast 2</div>
<div style="white-space: pre-line">Item Qty
Coffee beans, dark roast 2</div>Notes from a textarea keep their line breaks when shown with pre-line, without the risk of turning their text into HTML.
<p style="white-space: pre-line">Please leave the parcel at the side gate.
The dog is friendly.
Ring twice.</p>The commented-out colour is ignored and the green one applies.
<style>
/* Brand colour for notices */
.notice { color: #0a7d3c; /* color: red; */ font-weight: 600 }
</style>
<p class="notice">Your order has shipped.</p>The // line is read as part of a selector, so the whole .warning rule is thrown away and the text stays black.
<style>
// warning colour
.warning { color: #b42318; font-weight: 700 }
</style>
<p class="warning">This should be red, but it is not.</p>| Mistake | What happens | Fix |
|---|---|---|
| Typing several spaces between words | They collapse into one | or white-space: pre-wrap |
| Using <br><br> for paragraph spacing | Spacing cannot adapt to screen size | Separate <p> elements and a margin |
| Nesting comments | Text after the inner --> leaks onto the page | Use one comment, or delete the block |
| Writing // comments in CSS | The next rule is ignored | Use /* */ |
| Writing <!-- --> in a JavaScript file | Syntax error or odd behaviour | Use // or /* */ in JS |
| Leaving private notes in HTML comments | Anyone can read them in View Source | Remove them or strip comments in the build |
| Indenting text with rows of | Breaks on small screens | padding-left or text-indent |
| Two hyphens inside a comment | Older validators flag it; it reads poorly | Avoid -- inside comment text |
| Writing <br> without a slash in JSX | The JSX compiler reports an error | Write <br /> in React |
| Expecting newlines from a textarea to show | They collapse into spaces | white-space: pre-line on the output |
A <br> belongs where the line break is part of the content itself: the lines of a postal address, a verse of a poem, a signature block. In those places a reader would keep the break if they copied the text by hand.
Everywhere else, the break is layout, and layout belongs in CSS. Two paragraphs separated by <br><br> look fine until the design needs more space on desktop and less on a phone. Two <p> elements with a margin can change at any breakpoint, and screen readers announce them as separate paragraphs.
The browser's default for normal text is white-space: normal, which merges every run of whitespace into one space and wraps lines where it needs to. That is why indentation in your source never shows on screen.
To keep spaces you can use entities ( and the wider   and  ), a <pre> element, or one of the white-space values pre, pre-wrap, pre-line and break-spaces. Entities suit one or two fixed gaps; the CSS values suit whole blocks of text such as code, poems or user-entered notes.
HTML comments ship to every visitor. They do not appear on the page, but they are in the source, in saved copies and in what search engines download. Never leave passwords, internal addresses, customer names or TODO notes about security holes in a comment.
Most build tools can strip comments for you. Vite and similar bundlers minify JavaScript and CSS comments away; HTML comments in your index file may need an HTML minifier step if you want them gone.
Put <!-- before the first line and --> after the last. Everything between, across any number of lines, is ignored. You cannot nest one comment inside another, because the first --> ends the whole comment and the rest shows up as text.
HTML treats any run of spaces, tabs and newlines in normal text as a single space. That lets you indent your source freely without changing the page. To keep several spaces, use entities or set white-space: pre-wrap on the element in CSS.
All three work in HTML. <br> is the plain HTML form. The slash is optional and ignored by the HTML parser, but JSX in React requires the self-closing <br />.
No. CSS only understands /* */. A line starting with // is not a comment: the parser treats it as broken code and throws away the declaration or even the whole rule that follows, which is why the bug can look random.
No. Conditional comments such as <!--[if IE]> were only read by old versions of Internet Explorer and were dropped in Internet Explorer 10. Every current browser treats them as normal comments, so any markup inside them never appears.
Related: HTML links guide, CSS text styling playground, HTML viewer, Text to HTML converter, Markdown cheat sheet.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.