# How to Add the `
` Tag in HTML The `
` tag is one of the simplest elements in HTML — but how and when you use it matters more than most beginners expect. Used correctly, it controls line breaks within content without starting a new paragraph. Used carelessly, it creates layout problems that are painful to untangle later. ## What the `
` Tag Actually Does The `
` tag inserts a **single line break** at the point where it appears. Unlike wrapping text in `
` | HTML5 | Preferred in modern HTML | | `
` | XHTML / XML | Required in XHTML documents | | `
` | Older HTML | Works but not best practice | In modern HTML5 documents — which covers the vast majority of websites today — `
` without the slash is the correct form. If you're working inside an XML-based template, SVG file, or XHTML document, the self-closing `
` form is required. ## Where to Place the Tag The `
` tag goes **inline**, directly inside block-level elements like `
` Tag in HTML The `
` tag is one of the simplest elements in HTML — but how and when you use it matters more than most beginners expect. Used correctly, it controls line breaks within content without starting a new paragraph. Used carelessly, it creates layout problems that are painful to untangle later. ## What the `
` Tag Actually Does The `
` tag inserts a **single line break** at the point where it appears. Unlike wrapping text in `
` tags, which creates a full paragraph block with top and bottom spacing, `
` simply moves the cursor to the next line — nothing more. This makes it useful in specific contexts: - **Poetry or verse**, where line breaks are meaningful - **Addresses**, where each line is part of one logical unit - **Form labels or captions**, where a soft break improves readability without splitting the content into separate blocks ## The Basic Syntax Adding a `
` tag is straightforward: ```html
123 Main Street
Springfield, IL 62701
` | HTML5 | Preferred in modern HTML | | `
` | XHTML / XML | Required in XHTML documents | | `
` | Older HTML | Works but not best practice | In modern HTML5 documents — which covers the vast majority of websites today — `
` without the slash is the correct form. If you're working inside an XML-based template, SVG file, or XHTML document, the self-closing `
` form is required. ## Where to Place the Tag The `
` tag goes **inline**, directly inside block-level elements like `
`, `
`, ` `, or ``. It sits at the exact point where you want the line to break. ```html
` tags if you need extra vertical spacing: ```html
` tags to create spacing is generally considered bad practice**. CSS margin and padding properties handle spacing more reliably and are easier to maintain across different screen sizes. ## Common Use Cases — and Misuses 🚦 Understanding when `
` is appropriate versus when CSS is the better tool changes depending on your project type and technical setup. ### When `
` Makes Sense **Addresses and contact information:** ```html TechFAQs HQ
100 Dev Lane
San Francisco, CA 94105 ``` **Poetry or structured text where line breaks carry meaning:** ```html
` tags to: - Push content down the page - Create space between sections - Force a layout change across multiple elements …CSS is the right tool. Properties like `margin-top`, `padding`, `line-height`, and `display: block` give you control that scales cleanly across devices and screen sizes. ## `
` in Different Environments How the tag behaves depends on **where you're writing HTML**: | Environment | Behavior | |---|---| | Plain HTML file | Works immediately, no special handling | | WordPress (Visual editor) | Editor may auto-convert line breaks | | WordPress (Block editor) | Shift+Enter inserts `
` in HTML view | | React / JSX | Use `
` (JSX requires self-closing syntax) | | Markdown | Two spaces at line end or `` may render a `
` | | Email HTML | `
` is widely supported across email clients | This variability matters. A `
` you type manually in a CMS text field might be stripped, escaped, or doubled depending on how the editor processes HTML. Always preview your output in the environment you're publishing to. ## Accessibility Considerations 🔍 Screen readers handle `
` as a pause — similar to a line break in spoken reading. This is generally fine for addresses or poetry. Where it becomes a problem is when developers use repeated `
` tags as a layout substitute, which can create confusing reading experiences for assistive technology users. If your line breaks are meant to create **visual structure**, wrapping content in proper semantic elements (` `, `
First line of text.
Second line of text.
` tags if you need extra vertical spacing: ```html
Above the gap.
Below the gap.
` tags to create spacing is generally considered bad practice**. CSS margin and padding properties handle spacing more reliably and are easier to maintain across different screen sizes. ## Common Use Cases — and Misuses 🚦 Understanding when `
` is appropriate versus when CSS is the better tool changes depending on your project type and technical setup. ### When `
` Makes Sense **Addresses and contact information:** ```html TechFAQs HQ
100 Dev Lane
San Francisco, CA 94105 ``` **Poetry or structured text where line breaks carry meaning:** ```html
Roses are red,
Violets are blue,
HTML is simple,
Once you push through.
` tags to: - Push content down the page - Create space between sections - Force a layout change across multiple elements …CSS is the right tool. Properties like `margin-top`, `padding`, `line-height`, and `display: block` give you control that scales cleanly across devices and screen sizes. ## `
` in Different Environments How the tag behaves depends on **where you're writing HTML**: | Environment | Behavior | |---|---| | Plain HTML file | Works immediately, no special handling | | WordPress (Visual editor) | Editor may auto-convert line breaks | | WordPress (Block editor) | Shift+Enter inserts `
` in HTML view | | React / JSX | Use `
` (JSX requires self-closing syntax) | | Markdown | Two spaces at line end or `` may render a `
` | | Email HTML | `
` is widely supported across email clients | This variability matters. A `
` you type manually in a CMS text field might be stripped, escaped, or doubled depending on how the editor processes HTML. Always preview your output in the environment you're publishing to. ## Accessibility Considerations 🔍 Screen readers handle `
` as a pause — similar to a line break in spoken reading. This is generally fine for addresses or poetry. Where it becomes a problem is when developers use repeated `
` tags as a layout substitute, which can create confusing reading experiences for assistive technology users. If your line breaks are meant to create **visual structure**, wrapping content in proper semantic elements (`
`, `
- `, etc.) gives screen readers better context than a series of `
` tags. ## How Your Workflow Changes the Equation A developer writing raw HTML has full control over every `
` tag placed. A content editor working inside a CMS may never touch the HTML directly — the editor handles it. A front-end developer working in a component-based framework like React or Vue needs to remember JSX rules and may use conditional rendering rather than hardcoded breaks. The tag itself is the same three characters in every case. What varies is how your tools handle it, whether your stylesheet or reset CSS affects line-height around it, and whether your content structure makes a `
` the right choice or a workaround for a layout problem that CSS should be solving instead.