# How to Add a Line Break in HTML Line breaks are one of the most basic building blocks in HTML, yet they're also one of the most frequently misunderstood. Whether you're writing your first webpage or cleaning up someone else's markup, knowing exactly how and when to insert a line break — and which method to use — makes a real difference in how your content renders and how clean your code stays. ## The Core Tool: The `
` Tag The primary way to add a line break in HTML is with the **`
` tag** (short for *break*). It's a **self-closing void element**, meaning it has no closing tag and no content between opening and closing tags. ```html
` and `
` are valid. The self-closing slash (`
`) was required in XHTML and is still widely used, but in standard HTML5 it's optional. Either form works in every modern browser. When the browser renders the above code, the text after `
` drops to the next line — without starting a new paragraph or adding extra vertical spacing. ## `
` vs. Starting a New Paragraph This is where a lot of beginners make markup decisions that cause styling headaches later. | Method | What it creates | Adds vertical spacing by default? | |---|---|---| | `
` | A line break within the same block | ❌ No | | `
` Tag The primary way to add a line break in HTML is with the **`
` tag** (short for *break*). It's a **self-closing void element**, meaning it has no closing tag and no content between opening and closing tags. ```html
This is the first line.
This continues on a new line.
` and `
` are valid. The self-closing slash (`
`) was required in XHTML and is still widely used, but in standard HTML5 it's optional. Either form works in every modern browser. When the browser renders the above code, the text after `
` drops to the next line — without starting a new paragraph or adding extra vertical spacing. ## `
` vs. Starting a New Paragraph This is where a lot of beginners make markup decisions that cause styling headaches later. | Method | What it creates | Adds vertical spacing by default? | |---|---|---| | `
` | A line break within the same block | ❌ No | | `
` | A new paragraph element | ✅ Yes | | `
` | A new block-level container | ✅ Yes (as a block) | **Use `
` when** you want text to continue on the next line but remain part of the same logical unit — like a postal address, a poem, or song lyrics. **Use `
` or a block-level element. ## The ``, or `
` when** you want text to continue on the next line but remain part of the same logical unit — like a postal address, a poem, or song lyrics. **Use `
` tags when** you're separating genuinely distinct paragraphs of content. Stacking `
` to simulate paragraph spacing is a bad practice because it creates invisible whitespace that's hard to control with CSS and meaningless to screen readers. ```html
123 Main Street
Springfield, IL 62701
First paragraph text.
Second paragraph text.
Line one Line two
``` Will display as: *Line one Line two* This is intentional design. It lets developers format their code for readability without affecting the visual output. The only way to force a visual line break is with `` or a block-level element. ## The `
` Tag: When You Want Whitespace Preserved If you're displaying code, poetry, or any content where exact spacing and line breaks matter, the **`` (preformatted) tag** is the right tool. It tells the browser to render all whitespace exactly as written in the source. ```htmlName: Alex Johnson Email: [email protected] Role: Developer``` The font defaults to monospace and every newline in the source becomes a visible line break. You can override the font with CSS while keeping the whitespace behavior. ## CSS as an Alternative: The `white-space` Property For more nuanced control, CSS offers the **`white-space` property**, which determines how whitespace inside an element is handled. | Value | Effect | |---|---| | `normal` | Default — collapses whitespace | | `pre` | Preserves whitespace like the `` tag | | `pre-wrap` | Preserves whitespace but wraps at container edge | | `pre-line` | Collapses spaces but preserves line breaks | ```css .address { white-space: pre-line; } ``` This approach separates content from presentation — your HTML stays clean, and your CSS handles the visual formatting. It's particularly useful when you're rendering user-generated content or dynamic data that may contain natural line breaks. ## Line Breaks in Forms and User Input When dealing with **`
` tags before rendering ## Accessibility Considerations 📋 Screen readers handle `
` tags in varied ways depending on the software and its settings — some pause briefly, others ignore them entirely. For this reason, using `
` to create visual separation that carries semantic meaning (like separating distinct sections) can create an inconsistent experience for users relying on assistive technology. If the separation between content pieces has meaning — it's a new topic, a new speaker, a distinct item — a block element like ``, `
` communicates that structure to both browsers and assistive tools far more reliably. ## Variables That Affect Which Approach Works Best Several factors shape which line break method makes the most sense for a given project: - **Content type** — poetry and addresses suit `
`; prose suits `
`; prose suits `
`; code suits `
` or a styled `` block - **Dynamic vs. static content** — dynamically generated or user-submitted text often requires server-side processing before `
` is injected - **CSS control** — projects with a strong stylesheet may prefer `white-space` over inline `
` tags to keep markup clean - **Framework or CMS context** — some CMSs (like WordPress) automatically convert newlines to `
` or `` tags, which can conflict with manual markup - **Accessibility standards** — projects adhering to WCAG guidelines may prefer semantic block elements over visual-only line breaks The right method for one project — a hand-coded static page with a mailing address — will be the wrong method for another, like a content-managed blog or a styled web application where the CSS handles all spacing decisions.