Which element should be used without BR

[toplisek]

<p>My text <br /><p>

How to avoid BR in the correct way?

[alt131]

Hi toplisek, I've jumped in here because in Lucy's recent thread about languages I used exactly that structure as an example. Your question is a good one because it highlights that it is wrong. The trouble that we have is that a single sentence/line/phrase is not a paragraph, so this:

<p>Single line</p>

is technically wrong.

However, a paragraph is a collection of sentences, so this:

<p>Single line<br>Another line</p>

is also wrong

As a consequence marking up things that legitimately have "short" lines like poems and songs is always less than ideal, which is why we see a lot of para's with line breaks.

I'd suggest start with your content: Are you sure you don't have a list, a quote, an example of something (say computer code) or something else that can/should be marked up using it's own element and can then be styled to occupy a separate line using display:block. For example:
<p>Single line
<samp>Another line</samp>
</p>

[rocknbil]

I've always wondered about a single line on it's own. Sometimes I use a caption, but I default to <p> for not coming up with anything more appropriate. :-) So what would be "perfect" for a one-liner?

At any rate my solution to avoid the empty <br>: I usually style the element with padding or margins or width so that the content area narrows enough to force line breaks. Unfortunately they don't always break where you want them to, but it's one less hard coded element.

[lucy24]

<p>My text <br /><p>

How to avoid BR in the correct way?

Was that a typo or a mistake? There should be a closing </p>. Technically html 4 doesn't require them, though the validator kicks up a fuss. But I kinda think everything has to be closed in xhtml which is what you've got here, with the <br /> form.

At any rate my solution to avoid the empty <br>: I usually style the element with padding or margins or width so that the content area narrows enough to force line breaks. Unfortunately they don't always break where you want them to, but it's one less hard coded element.

Ouch. That's risky when there's such a huge array of user-agents. I generally code it with a

div p

structure. For example (more often in ebooks than in, ahem, real life)

div.verse {nice big side margins, smaller top and bottom margins}
div.verse p {margin-left: 4em; text-indent: -4em; top margin less than for a free-standing paragraph}
... with extra stuff for indented lines, stanza breaks and so on.

Then each line becomes its own paragraph, and if it does overflow, it's got a nice big hanging indent.

otoh I do sometimes take the easy way out and shove in a bit of blank space via a quick <p>&nbsp;<br>&nbsp;</p> ;)

You can constrain width to a certain extent by defining it in ems, but unless you're in a fixed-pitch font you can't be certain your users will see exactly the same thing you do; some fonts are simply wider than others.

<p>Single line</p> is technically wrong.

Well, you don't know that it will be a single line do you? Maybe your user is reading it on an antiquated phone with a display that's only ten characters wide ;)

[legaleagle]

If its a collection of single lines wouldn't an unordered list with list-type:none; be better and perhaps the correct code ?
So instead of <p>Single line<br>Another line</p>

You have <ul>
<li>Single line</li>
<li>Another line</li>
</ul>
And use css to turn the default styling off.

[alt131]

Well, you don't know that it will be a single line do you? Maybe your user is reading it on an antiquated phone with a display that's only ten characters wide

Two issues. The one you're referring to is the displayed width of the lines of content. The other is content that by convention only occupies one line. For example:
All the world's a stage,
And all the men and women merely players;
They have their exits and their entrances,
And one man in his time plays many parts,

Even the punctuation reinforces it was never meant to be written down as: All the world's a stage, And all the men and women merely players; They have their exits and their entrances, And one man in his time plays many parts,

Even more so with things like Haiku, where the number of words/syllables on each "line" and the shapes of the words and letters themselves creates a visual picture that is as important as the meaning of the words themselves.

A collection of lines is not a paragraph, but the individual single lines (or even single words) aren't a paragraph either. We just don't have an element to mark these things up correctly. Hence a variety of methods as suggested here.

That's before we get to the issue of what users (who like to surf at 10 characters wide) do to your beautifully crafted layout ;)

So what would be "perfect" for a one-liner?

Hence I say go back to the content and the context - is that really a "single line", or something else such as a quote, sample, maybe blockquote, perhaps it is really a sub-heading. Part of my thinking is that aside the challenging cases, there is something suspicious about have a "single line" in the middle of a "para". I know we see them all the time ... but is it "correct" or just poor grammar?

[rocknbil]

The ones I encounter it's . . . . "what they want." :-) Some anonymous string in the middle of nowhere with no association to anything useful. It's not a caption, it's not a quote, list item, header, breadcrumb, nothing useful . . . .

<marketer-tagline>BUY ME NOW!</marketer-tagline>

:-)

[lucy24]

Overlapping one of the so-many-Bills-that-I-can't-keep-track:

Hm. If they had thought of it, HTML 5 could have added a markup for "group of lines": not a list, but blocks such as poetry. (An inherent feature of a list is that you can rearrange its elements. This is not generally A Good Thing in verse.) And then CSS could come along afterward and decide what it should look like.

But, really, I don't think the html markup <p></p> has to be equated with a grammatical paragraph. It's simply a building block. You could, at need, construct an entire web page out of nothing but <p> and <table> and it would be perfectly readable. HTML 1.0, anyone? :)