33

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.

Improve this question
2
  • 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? Commented Apr 8, 2018 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 </p> tags that looks like they are mixed into the text, my opinion is that <br> tags fit better mixed into text than </p> tags. Commented Apr 8, 2018 at 18:15

8 Answers 8

Reset to default
56

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Or you can use: white-space: break-spaces;
Or more generally, review the four or five options for exactly what you want to achieve at developer.mozilla.org/en-US/docs/Web/CSS/white-space
9

Or you can try this without tag wrapping each line:

<div style="white-space:pre"> Here are some lines of text </div>
Improve this answer

2 Comments

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: stackoverflow.com/a/58661809/7880517
Yes, you are right! @SebastianNorr But this works better in some cases like Jupyter, (though it is possible to add CSS there also.)
5

Using the <pre> tag is what you want for this:

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>

pre stands for "pre-formatted text"

Resources:
https://www.w3schools.com/tags/tag_pre.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

Improve this answer

Comments

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>.

Improve this answer

Comments

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.

Improve this answer

Comments

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.

Improve this answer

Comments

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.

Improve this answer

Comments

0

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

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.