4 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 2 years 34 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Well the title says it all. Just wanted to know what you guys think.

found some resources Below:

Stack Thread

And THIS excellent example , i was particularly interested in pre-wrap and pre-line Smile .

so is pre-line indeed the solution to not using 's in your HTML ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

Structure or presentation?

The BR element is structural. For example, envelope addresses are commonly structured as separate lines.

<p>Mr John Smith <br>
1234 Elm St<br>
Dallas, TX 75201</p>

Mean while, poetry is pre-formatted text, so:

<pre>There is something about a Martini,
A tingle remarkably pleasant;
A yellow, a mellow Martini;
I wish I had one at present.
There is something about a Martini,
Ere the dining and dancing begin,
And to tell you the truth,
It is not the vermouth—
I think that perhaps it&apos;s the gin.</pre>

Most of the linked examples tended toward presentational and shouldn't have BR or PRE elements doing CSS's job.

There's a lot of gray area, though. It's not always clear which is which. My goto solution is to consider the content in a non-graphical browser. The goal is not to reduce markup, it's to mark up the content correctly.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 2 years 34 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

I know this argument can continue endlessly .. but

If you check the mozilla docs you'll see that, they have a few good examples , heres what theey have to say:

The HTML element line break produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Do not use to increase the gap between lines of text; use the CSS margin property or the

element.

I really think that pritty much sums it up , when to use the BR vs when not to, as you mentioned there are grey areas, i do notice , that when speaking about semantics , theres not always a 100% right way to do things , so its often choosing one way over the other.

I did notice while surfing online that indeed br does have a few genuine use cases , and as you said

The goal is not to reduce markup, it's to mark up the content correctly.

Totally agree with that , but i honestly prefer going without the br tag , see the below markup and also the problem with using pre, one thing i noticed with using pre , is that in real life scenarios , your HTML won't always be sticking to the edge of the editor and often will have multiple levels of indentation , pre gives you the line breaks , but it still keeps the white spaces m which in most cases is undesirable.

<p>
			Gary Turner, H No 60,
			10th cross, 2nd main,
			Bakeer street, 
			California , United States
		</p>
 
		The use of the pre tag gives me the formating i want , but again its a pain point, it leaves the white spaces and that shows up in the brower , so why not use the <p> tag as above and then use css like element { white-space:pre-line; } 
 
		<pre>
			Gary Turner, H No 60,
			10th cross, 2nd main,
			Bakeer street, 
			California , United States
		</pre>

Why not use p and then the css white-space:pre-line; ?

i am not against using br ,but people use it just way too often and use it everywherethey need a lien break , YES !! for addresses br is a canonial use case , but not for most other things ! also using pre has its downfall as i have stated.

is the solution i propose bad ? i don't see how , infact , i beleive it would make life much easier. actually i just descoved white-space:pre-line yesterday , and i was quite fasinated , as it seemed to be the solution to most of my line break problem (now that does't mean i am going to use it everywhere without thinking WHY !) .

So what do you think gary ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

PRE problem is coder error

Why did you add all those tabs to the <pre> element and what did you expect? Here is how to mark that address up:

    <pre>
Gary Turner, H No 60,
10th cross, 2nd main,
Bakeer street, 
California , United States    
    </pre>
 
or
    <pre>Gary Turner, H No 60,
10th cross, 2nd main,
Bakeer street, 
California , United States    
    </pre>
If you want the address indented, use margin.

Now, take a look at the P element version with css in a text browser, screen reader, Braille display, etc. Compare to the same with BRs.

I attached two screen shots of text browsers. You can see that using BRs or PREs are the way to do this type thing. Plain text browsers are good proxies for assistive technologies.

Your html document should be fully functional and structurally sound without using styles or javascript. If it's not, you have a failed page.

cheers,

gary

AttachmentSize
emacs-eww.gif 40.75 KB
lynx.gif 7.75 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 2 years 34 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

Thanks gary ! your the best Laughing out loud :D