24

I have a HTML document with some distinct rows of text, is there some decided correct way to display them?

Example:

Here are
some lines
of text

Should I use the <p> tag for each row, or is there some other/better way to do it?

Examples:

<p>Here are</p>
<p>some lines</p>
<p>of text</p>

or

<p>
  Here are <br>
  some lines <br>
  of text <br>
</p>

Or something completely different?

The CSS & other things isn't really relevant at the moment, I'm just wondering which is the "most correct" way to use.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Sebastian Norr
  • 7,686
  • 2
  • 12
  • 17
  • So far it seams that I have got one of each answer, use: Example 1, Example 2 & there is no correct way. So which of them is right? – Sebastian Norr Apr 08 '18 at 16:41
  • I think I will use the Example 2 style, but only because I think it makes the code look better, because some of the lines is so long so they wrap around which makes it look weird with tags that looks like they are mixed into the text, my opinion is that
    tags fit better mixed into text than tags.     – Sebastian Norr Apr 08 '18 at 18:15

7 Answers7

44

if you have a string with new lines that you want to display for example in a div, you can use white-space: pre-wrap css style:

.multiline {
  white-space: pre-wrap;
}

<div class="multiline">
    A multiline text
    for demo purpose
</div>
vir us
  • 9,920
  • 6
  • 57
  • 66
7

Or you can try this without tag wrapping each line:

<div style="white-space:pre">
Here are
some lines
of text
</div>
Lerner Zhang
  • 6,184
  • 2
  • 49
  • 66
  • Nah, then I prefer the solution from @Vir us. It's essentially the same solution, but there the CSS is defined in the CSS part, and the HTML in the HTML part, as it should be. Vir Us's solution: https://stackoverflow.com/a/58661809/7880517 – Sebastian Norr Jun 26 '22 at 14:19
  • Yes, you are right! @SebastianNorr But this works better in some cases like [Jupyter](https://jupyter.org/), (though it is possible to [add CSS](https://stackoverflow.com/a/33570738/3552975) there also.) – Lerner Zhang Jan 18 '23 at 09:22
2

The correct way to do things is using things made for the things you need. If you want a line break (enter), use <br>; If you want to define a paragraph, use <p>.

D. Pardal
  • 6,173
  • 1
  • 17
  • 37
1

According to this, the <br> element is used to insert a line break without starting a new paragraph. Hence you should prefer the second solution over the first.

w3schools comes with a marvelous article about style guides and coding conventions.

Daniele Cappuccio
  • 1,952
  • 2
  • 16
  • 31
1

The spec makes it very clear that <br> should never be used unless the line breaks are actually part of the content forming a single unit of text.

As these are distinct rows of text, not a single unit that happens to contain line breaks, they need to be split into separate <p> elements.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

There is no such thing in most correct way, at least according to the current specification of your needs. Yes, you can put them all in separate paragraphs, using the <p></p> tag or you can separate them via a <br> tag at every line. You can also use spans combined with the white-space CSS attribute, so you have a lot of options. To choose the best option for you, you will need to try them out and see what fits your requirements the best.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
0

If you want to create a multiline paragraph that maintains the line seperation in your code without throwing
s everywhere. Simply use the html tag.

Jay Racine
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 23 '21 at 05:43