homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Which element should be used without BR
toplisek




msg:4467957
 11:43 am on Jun 21, 2012 (gmt 0)

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

How to avoid BR in the correct way?

 

alt131




msg:4467963
 12:09 pm on Jun 21, 2012 (gmt 0)

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




msg:4468011
 3:46 pm on Jun 21, 2012 (gmt 0)

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




msg:4468063
 5:57 pm on Jun 21, 2012 (gmt 0)

<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




msg:4468152
 10:00 pm on Jun 21, 2012 (gmt 0)

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




msg:4468166
 10:32 pm on Jun 21, 2012 (gmt 0)

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




msg:4468404
 4:20 pm on Jun 22, 2012 (gmt 0)

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




msg:4468406
 4:28 pm on Jun 22, 2012 (gmt 0)

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? :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved