I'm writing long-form copy on a sales page with this sort of style (shortened for brevity):
We get it…
Finding an X that understands X is difficult.
It seems like they all X.
So, how are you supposed to decide?
That's a loaded question, but what we can tell you is this:
Should I be using double <br/> tags to keep it within a single semantic paragraph, or should I just use a <p> tag for each line even though they are part of the same thought?
Originally I wrote it like:
<p>
We get it..
<br/><br/>
Finding an X that understand X is difficult.
<br/><br/>
It seems like they all X.
<br/><br/>
So, how are you supposed to decide?
<br/><br/>
That's a loaded question, but what we can tell you is this:
</p>
My thought process was that it's all supposed to be part of one thought, and I'm trying to be semantically- and accessibility-minded.
The problem is that to me, using two <br/>
tags to create space is undesirable, and likely not semantically correct based on other threads I've seen on here. This isn't poetry or a mailing address, no. But it is a single thought.
I then tried using a single <br/>
tag and then went to style it only to find that I can't.
So I decided to wrap each line in its own <p>
tag (easier for space styling with CSS).
<p>We get it..</p>
<p>Finding an X that understand X is difficult.</p>
<p>It seems like they all X.</p>
<p>So, how are you supposed to decide?</p>
<p>That's a loaded question, but what we can tell you is this:</p>
But I'm still unsure if that's a problem for semantics and accessibility.
For my purposes, which approach is correct?
The
<br>
HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. [Emphasis mine]
While not a poem or address, the division of lines is significant. The arguments against it that you've found are most likely against misuse of it, where it is being used to create paragraphs. That is not the case here, so I don't see anything wrong with using it.
However, you don't need multiple. That's where styling/CSS comes in. You can't really style a <br>
, but it creates a linebreak, and you can style lines. Specifically, you can use line-height
to set the spacing:
p {
line-height: 2em;
}
<p>
We get it…<br>
Finding an X that understands X is difficult.<br>
It seems like they all X.<br>
So, how are you supposed to decide?<br>
That's a loaded question, but what we can tell you is this:<br>
</p>
Note that natural line breaks will also cause this spacing, so you may need to use multiple if that is an issue.
I see now that @TemaniAfif commented this already.