BR Tags Misuse

When I edit content on a web page, I have to make sure it looks nice and have no widows on paragraphs. It sounds like an easy thing to do. As some might say, just put a <br /> tag before the word you would like it to be on the next line, then the code will give an obvious line break. Actually that’s the misuse of the BR tag. The BR tag is used for giving the real semantic line break, not just visual presentation line break.

Print Won’t Work

The print version would come out ridiculous when use <br /> tags mistakenly. The print page has its own CSS to apply. So the width and height of the boxy divs are totally different on the print side. The words you edited might not flow with the rest of the paragraph on the print version because of the hard code <br /> tag.

Solution

Easy way to solve this is to put &nbsp; tag in the spaces between the two words which should be on the new line.

Example*

The idea was was born, as many fine ideas are, over a Burrito lunch. A day of collaborative robot building to celebrate the launch of Firefox 3. We had just the venue, Dolores Park, which has a striking resemblance to the Gran Paradiso theme of Firefox 3.

Do this
We had just the venue, Dolores Park, which has a striking resemblance to the Gran Paradiso theme of Firefox&nbsp;3.

Result

The idea was was born, as many fine ideas are, over a Burrito lunch. A day of collaborative robot building to celebrate the launch of Firefox 3. We had just the venue, Dolores Park, which has a striking resemblance to the Gran Paradiso theme of Firefox 3.

* Content is taken from www.webmynd.com/html/FireFox3_LaunchParty.html

Note

I cannot find a way to solve the phone number format yet when the line is breaking between the hyphen, e.g. (800) 555-7777.

Using Pre tag, would look like this below. It needs additional styling to make it flow with the rest of the paragraph.

With Pre tag

The idea was was born, as many fine ideas are, over a Burrito lunch. A day of collaborative robot building to celebrate the launch of Firefox 3. We had just the venue, Dolores Park, which has a striking resemblance to the Gran Paradiso theme of
Firefox 3.