| This 38 message thread spans 2 pages: 38 (  2 ) > > || |
|It's </p> not <br><br>|
Two Soft Returns vs. One Hard Return
Why do web designers do this?
Now is the time for all good men and women to come to the aid of their countries.
<p>Now is the time for all good men and women to come to the aid of their countries.</p>
Which is correct? :)
both are same in this case. This makes difference in case you need extra formating like alignment or so.
When using CSS, breaks aren't needed to create spacing between elements so, you are right, they don't need to do that.
They are entirely different and depend upon the way you display the HTML, or CSS in place.
<p>...</p> encloses a paragraph. This may, or may not, mean that there is whitespace between it and the next paragraph. It may, or may not, have whitespace equal to one line-height. It may also define an indent for the first line, or other CSS features.
<br> or <br /> is an inline element which starts a new line. Duplicating the token means that you have a blank line, and then a new line.
Where the author wishes to leave a blank line without starting a new paragraph, it is entirely appropriate to use <br><br>. In reported speech and narrative it is not uncommon to wish to leave a blank line without starting a new paragraph, and is often done for dramatic effect.
|_-_-It was about then that I started to wonder just what the meaning of a <br> element was. I mean, what it really was. Did it stand for 'Bloodthirsty Robber'? I submitted this definition to the w3c and awaited it being accepted. |
Okay, poor example
|both are same in this case |
Tell that to your English teacher ;)
Forcing a line break: the BR element [w3.org]
|The BR element forcibly breaks (ends) the current line of text. |
I think it comes from people not knowing or caring enough to use CSS and margins.
There are many people who make space in Word or InDesign by hittig the Enter key a number of times - instead of using Paragraph-Space after.
|There are many people who make space in Word or InDesign by hittig the Enter key a number of times - instead of using Paragraph-Space after. |
It's amazing how many do this. Even those who are proficient with these programs still do it. I work with Quark on a daily basis and am very familiar with the Space After and Space Before functions which are equivalent to...
And then you have your Formatting commands to specify indenting, etc. which are equivalent to...
|both are same in this case. |
No. You are confusing Hypertext Markup Language with Hypertext Visual Display Formatting.
The second example <p>...</p> says:
the content between the tags is a paragraph.
It does not say anything about what the text looks like, how wide or how tall it is, or how much space there is or isn't above or below.
It specifies the role of an element without attempting to dictate visual format. This is what mark-up languages do.
How about this example. Is it correct? Or should I be using two paragraphs?
<p>The forum continued to grow as more people registered.
<br />The total number of users now stands at over 2 million.</p>
You might argue that the two lines should be separate paragraphs. But they are also related.
Is it absolutely, positively correct? I'm not sure (but am sure that POR is able to tell us ;-))
My thoughts though are that any markup shouldn't force changes in our writing styles for "correctness." So, if you see those two sentences as contextually and semantically part of the same paragraph, well, then it's correct.
|You might argue that the two lines should be separate paragraphs. But they are also related. |
I might argue that they should actually be one paragraph with no forced line breaks.
<p>The forum continued to grow as more people registered. The total number of users now stands at over 2 million.</p>
|It specifies the role of an element without attempting to dictate visual format. |
But it does dictate visual format doesn't it? Most browsers have preset definitions, in absence of a stylesheet, which dictate how it will look, visually.
So in using the <p> tag, are you not also automatically dictating visual layout whether you like it or not?
|Is it absolutely, positively correct? I'm not sure (but am sure that POR is able to tell us ;-)) |
I'm going to add some fuel to the fire and say that <br><br> is typically used incorrectly 99% of the time. Most use it as a visual presentation thing to mimic the spacing between paragraphs.
To a screen reader, this...
<br><br>Now is the time for all good men and women to come to the aid of their country.<br>
Now is the time for all good webmasters to come to their senses and start coding using proper html elements. ;)<br>
Now is the time for all good...
Reads as one paragraph.
<br> elements provide no useful information about what is contained between them, semantically.
Also, for those of you using <br><br> instead of the correct html elements, you're probably going to find it very difficult to validate your pages to an HTML 4.01 Strict DTD. Don't even think about XHTML 1.0, lol! You're going to have these all over the place...
<br /><br /><br /><br /><br /><br /><br /><br />
No argument there at all, POR, but Hester's example was a bit different, using a couple of <br>'s within a paragraph element, probably for a bit of emphasis of some sort.
In that case I can't see much wrong with it, even if not 100% correct, as markup is supposed to reflect the writer's style, not the other way around.
Now, what confuses me a bit is that I had always assumed (very bad word) that a <br> element should always be used within a paragraph or other text element, such as an Hx. But, unless I'm reading them totally wrong, I don't find any specific mention of this in the W3C specs.
What I did find...
some more text</p>
...validates as html 4.01 strict.
And of course, a <br> not within another text element does not validate, which is what I always thought.
Whatever my confusion, it turns out that Hester's example is okay.
|Most browsers have preset definitions, in absence of a stylesheet, which dictate how it will look, visually. |
Yes, TJ, that's right. Browsers have preset style definitions. So, if you don't provide a stylesheet, the browser will provide its own default stylesheet.
But either way, it's not the markup which is determining how the document will visually display.
What determines the display is either the styles you specify or - in their absence - the styles specified by default by the browser.
|No argument there at all, POR, but Hester's example was a bit different, using a couple of <br>'s within a paragraph element, probably for a bit of emphasis of some sort. |
I'm not too certain that using a couple of <br>s within a paragraph like that is proper use. If the goal is to provide a visual presentation where there is additional space between lines, then line height would probably be the best option.
Don't get me wrong, there are logical uses for the <br> element. Forcing a line break is common practice when designing web pages. Using them to create a visual space between elements is not correct use from my perspective and understanding of the HTML guidelines.
For some of us dinosaurs, <br><br> was how we were taught. When I learned HTML, there wasn't a </p> closing tag, and just one <p> at the beginning wasn't really what we wanted.
|The current CSS1 properties and values cannot describe the behavior of the 'BR' element. In HTML, the 'BR' element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat 'BR' specially. |
The <br> Element Official References
|The following two HTML examples must be rendered identically: |
<P>Thomas is watching TV.</P>
Thomas is watching TV.
So must the following two examples:
<A>My favorite Website</A>
My favorite Website
Please note, that the above example assumes that your <br><br> are <p> elements, this is the default behavior. It does not know that you are using a <br><br> within another block level element. It assume a <p> element. What happens when you have a list of links that you've set up like this?
<p><a href="">Example 1</a><br>
<a href="">Example 2</a><br>
<a href="">Example 3</a><br>
<a href="">Example 4</a><br>
<a href="">Example 5</a></p>
When they should probably be like this...
<li><a href="">Example 1</a></li>
<a href="">Example 2</a></li>
<a href="">Example 3</a></li>
<a href="">Example 4</a></li>
<a href="">Example 5</a></li>
Which do you think is more semantically correct?
What happens when you start a page off with let's say a opening <p> tag. Then you build your way through that page using multiple <br><br> elements to separate content visually. At the end of all that work, you close it off with the </p> tag. Just great. 1,000 characters of prime content all wrapped up in one big paragraph. With today's spiders being more intelligent and looking at semantic document structure, what does <br><br> mean to them? I could almost use the analogy of throwing something against the wall and seeing what sticks, but I don't want to start a war amongst the <br><br> supporters. I'll get beaten down because it is typically the geeks that do this <br><br> stuff anyway. :)
P.S. This whole thing with using the proper HTML Elements for markup goes way back. Even before my start on the Internet and I don't want to date myself here. ;)
P.S.S. I cannot be held liable for any coding practices that WebmasterWorld and its affiliates may or may not use. My comments are those of my own. But, I've provided some solid official reference material for you to make an educated decision. Break Away from the <br><br>! ;)
|What determines the display is either the styles you specify or - in their absence - the styles specified by default by the browser. |
Yes, I know - I'm nit-picking a practical rather than technical point here. Actually I thought your original description of "role" versus visuals was excellent and technically very correct.
I'm just thinking from a practical point of view, if you use a <p> tag, and you don't style it, you will introduce default styling.
So in reality, it will have a visual effect that you must either live with, or override.
The <br /> tag, on the other hand, has no such effect.
9.3.5 Visual rendering of paragraphs [w3.org]
|Style sheets provide rich control over the size and style of a font, the margins, space before and after a paragraph, the first line indent, justification and many other details. The user agent's default style sheet renders P elements in a familiar form, as illustrated above. One could, in principle, override this to render paragraphs without the breaks that conventionally distinguish successive paragraphs. In general, since this may confuse readers, we discourage this practice. |
By convention, visual HTML user agents wrap text lines to fit within the available margins. Wrapping algorithms depend on the script being formatted.
Right from the authority. I don't think there is any room for misinterpretation. The W3C discourages the practice of using <br><br> for distinguishing successive paragraphs.
I know, I know. Many of you are thinking, ****, I've got thousands of pages out there that use <br><br>. Great! You've got thousands of single paragraph pages sitting out there. Wouldn't you rather have thousands of pages with multiple paragraphs, list items, heading elements, etc. Something a little more meaningful while at the same time visual?
If you make the change now, and it may take some time, at least applying a basic semantic structure to your pages will help them perform much better overall. I can almost guarantee it.
I think the question of what's right and wrong has been pretty well beaten . . . . err . . . covered here. :-) To answer this,
|Why do web designers do this? |
It's because for a developer not versed in CSS, by default a paragraph gives an unwanted space ABOVE as well as below. So they use line breaks to just get the space below.
After a time, they may become aware of the issue but from a designer standpoint it's only about presentation, semantics never enters into it, so it becomes just another one of those bad habits, right along with the font tag.
</confessions of a reforming developer>
|It's because for a developer not versed in CSS, by default a paragraph gives an unwanted space ABOVE as well as below. So they use line breaks to just get the space below. |
You have a very valid point. And, I'll add one more to that. Ever watch someone work in WYSIWYG mode who doesn't understand what the program is doing? Yikes, there are <br>s all over the place. ;)
Blame it on laziness. I always use </p>.
The issue of <br> tags has come up every year or two.
We all (or most of us) know what a paragarph is. But what about this
Mary had a little lamb<br>
Its fleece was white as snow<br>
And everywhere that Mary went<br>
Her lamb was sure to go.
Point being, what is the sematically correct way to mark up poetry or lyrics? There is no <verse>, <stanza> or <line> tag, <li> and <dl> tags don't capture them semantically, although they could be styled to "appear" correctly.
I think the <br> tag is the logical choice in these cases.
|Point being, what is the sematically correct way to mark up poetry or lyrics? |
An excellent question.
Right now, I would be tempted to use <blockquote>...</blockquote> and then, as you say, use <br> to differentiate the lines.
All this <br> discussion will be moot once <l>...</l> is widely adopted.
|All this <br> discussion will be moot once <l>...</l> is widely adopted. |
ronin, miracles have been known to happen. Heck, let's just get them to stop using the <br><br> for now. Small baby steps are needed. :)
|All this <br> discussion will be moot once <l>...</l> is widely adopted. |
Ronin is referring to the XHTML 2 spec. I was going to mention this, as it makes individual lines separate elements. Why? Because they can then be styled individually. Say you wanted the first line of every paragraph bold, then it could be done. Or the second line blue, the third line red and the fourth line green.
A nice colour fade would look great, from red to slightly darker red, with each line darkening a bit. To do that in HTML 4 would require spans and breaks I guess. Or even divs.
"You might argue that the two lines should be separate paragraphs. But they are also related."
In that case, why not use span tags and avoid the endemic break paragraph tags force? Maybe I don't want a break there. In fact, I prefer to use <br><br>. Using paragraph tags are more problematic in editing text.
I always make sure that every piece of content on a page is marked as being a heading, paragraph, list, table, or form.
I looked at the HTML source, and though untidy I couldn't see anything obvious. As I looked closer I realisd that some things were wrapped in <div> .. </div> tags, or in <p> .. </p> tags, but that some stuff was uncontained (its logical "parent" being the <body> tag... yuk).
My inclination was to slap a paragraph tag pair around the entire nav list links. That fixed the problem in IE, without causing any issues in Mozilla or Opera.
So, when you mark up your content, make sure that every piece is enclosed in its own block. The main blocks are headings, paragraphs, lists, tables, and forms.
| This 38 message thread spans 2 pages: 38 (  2 ) > > |