Is it sometimes bad to use ` `?

html

responsive-design

best-practices

accessibility

byNikita Barsukov·Feb 24, 2025

Use CSS, not  , for layout and spacing. Using   for these purposes is a bad practice, impairing maintainability and accessibility. Rely on CSS properties like margin or padding for improved structure.

Bad Practice:

<!-- Not cool, bro -->
Line 1<br />Line 2

Good Practice:

<!-- Way better! -->
<p>Line 1</p>
<p>Line 2</p>

/* Stylish spacing */
p { 
   margin-bottom: 1em; 
}

Using   for quick fixes might seem tempting, but it compromises long-term scalability and misses the powerful capabilities of CSS for responsive and accessible design.

Usage and abuse of tag

Using   tags in place of CSS for layout disrupts your document's semantic structure, which is key for both accessibility and SEO.

Remember: HTML should relay the content's meaning, not control its appearance—appearance should be managed by CSS.

Advantages of using CSS

By opting for CSS over   tags, you gain a centralized control point for styles. This allows you to apply whole-site changes by merely adjusting a single CSS line, guaranteeing consistency and optimizing time.

Better practice:

/* Global style rule for glorious, consistent spacing */
.content-section { 
   margin-bottom: 2em; 
}

Avoid at all costs:

<!-- This is a NO-NO -->
<div class="content-section">
  Content here<br /><br />
</div>

Reflect on whether the   usage really makes sense. If it's about visual spacing, CSS can handle it. If it's about preserving content semantics, then   might be the right choice.

Alternative strategies for layout

Using `` tags for spacing

For text-based content, use the  tags to create a meaningful text block. You can style and space them using CSS, adding flexibility.

Rely on CSS for layout control

CSS provides cross-browser consistency and aids responsive design, enabling your site to look impeccable on various screen sizes—something that   tags can't achieve.

Other semantic HTML elements

Use semantic HTML elements like <div> and <section> for more complex structures, maintaining an organized and meaningful layout—much better than injecting countless   tags.

Visualization

Visualize a   tag as a stair step. Here's a playful illustration of when it's a good or bad idea to use these steps:

Proper Use:
"We need to climb to the next level.🚶‍♂️
Here's a single step: <br /> 👣
Perfect! Just what we needed to continue smoothly."

Overuse:
"We need to keep climbing.🚶‍♀️
Here's a step: <br /> 👣
Another one: <br /> 👣
And another: <br /> 👣
Oops! Now we're just going up with no real direction - it's exhausting and perplexing!"

Use only when:

You need a *new line* without starting a new paragraph (`<p>`). 📝👉📄
There's a *poetic line break* or an *address format*. 📜✍️🏠

Avoid when:

You want to create *vertical space* or *layout control*. Use CSS instead! 🎨👩‍🎨
You're separating *chunks of content*. Opt for `<p>`, `<div>`, or other semantic HTML! 🛠️🏗️

Problems with ` ` misuse

Accessibility issues

Excessive   tags might confuse screen readers, also causing accessibility issues.

Responsiveness problems

A   tag heavy design won't scale well across different devices. A responsive design approach with CSS ensures your site looks great on all screen sizes.

Update difficulties

Future updates become a nightmare with   tags. Use CSS classes for spacing—it's significantly easier to manage.

Dealing with line breaks

Correct usage of ` `

Addresses
Poetry
Quotations where line breaks hold significance

Controlling spacing with CSS

Margin: Use margin-top or margin-bottom for vertical spacing
Padding: Employ padding to create space within elements
Flexbox & Grid: Modern layout techniques that kiss   and old-school table layouts goodbye