In HTML, when is <br> the correct element to use, and what does <wbr> do?

## What `<br>` actually means `<br>` is a void element representing a line break **in the content**. The specification is unusually direct about it: `<br>` elements must be used only for line breaks that are actually part of the content, as in a poem or an address. The test is easy to apply in an interview: > If you deleted the break, would the content itself be wrong — or would it merely look different? An address whose lines run together is wrong. A poem whose lines run together is a different poem. A paragraph that sits closer to the next one merely looks different, and that is a styling change, not a content change. ```html <p> Acme Supplies Ltd<br> 114 Harbour Road<br> Bristol BS1 4TY </p> ``` ## What `<br>` is not for The misuses all share one shape: using a content element to achieve a visual result. - **Blank space between paragraphs.** Two `<p>` elements are two paragraphs; the gap between them is CSS. A stack of `<br><br>` produces neither semantics nor a maintainable gap. - **Faking a list.** Lines separated by `<br>` are one run of text. List markup carries the item count and structure that a screen reader announces; `<br>` throws that away. - **Forcing a heading or a marketing line to wrap at a chosen word.** That is purely presentational, and it breaks at other viewport widths anyway. - **Formatting an address or form layout into columns.** Layout is a styling concern. A useful reframing for candidates: `<br>` is not "the newline element", because newlines in HTML source are collapsed as whitespace. It is the element that says *this content is written as separate lines*. ## What `<wbr>` does `<wbr>` is also a void element, but its meaning is a **word break opportunity**: a point where the browser is allowed to break the line if it needs to, and where it will not break otherwise. It is the tool for long unbroken strings that would otherwise overflow or force horizontal scrolling — URLs, file paths, hashes, long identifiers, chemical names: ```html <p>https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>segment</p> ``` Two properties are worth stating explicitly, because they are what interviewers probe: 1. **It renders nothing when it is not used.** No space, no glyph, no visual artefact. It is purely permission. 2. **It adds no hyphen.** The break just happens. If you want a hyphen to appear at the break point, that is the soft hyphen character entity `&shy;`, which is a different thing: `&shy;` inserts a hyphen when the break is taken and shows nothing when it is not. So the pair is easy to remember: `<wbr>` means "you may break here, silently"; `&shy;` means "you may break here, and print a hyphen if you do". ## How the two interact with assistive technology A `<br>` typically causes a screen reader to treat the text as continuing on a new line, which is harmless when the break is genuinely part of the content and merely noisy when it is not — another reason a `<br><br>` layout hack is a poor idea. `<wbr>` contributes no content and is not announced. ## Choosing correctly, quickly - Lines that belong to the content (address, poem, lyric, a short verse-like caption) → `<br>`. - Separate blocks of prose → separate block elements, with spacing handled in CSS. - Structured items → list markup, not lines. - A long unbreakable string that overflows its container → `<wbr>` at sensible break points, or `&shy;` if a hyphen is wanted. ## Pitfalls Expecting `<wbr>` to force a break — it never forces, it only permits. Writing `<br/>` or `<br></br>` and thinking the form matters: `<br>` is void, it takes no closing tag, and the self-closing slash is tolerated but meaningless in HTML. Sprinkling `<wbr>` through ordinary prose, where the browser already breaks at spaces and the markers only clutter the source. And reaching for `<br>` in a component because a designer asked for "a bit more room" — that request is a stylesheet change, not a markup change.