Should I be using <br/> in my markup?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

lister - 28 May 2007 15:28 GMT

If I want to move something to a new line, should I be using <br/>, or
is there a way of doing it in CSS?

I was just thinking if it was possible in CSS then it would be better
as otherwise the layout is part of the markup.

Cheers,
Lister

Reply to this Message

Jonathan N. Little - 28 May 2007 16:14 GMT

> If I want to move something to a new line, should I be using <br/>, or
> is there a way of doing it in CSS?
>
> I was just thinking if it was possible in CSS then it would be better
> as otherwise the layout is part of the markup.

Depends on the context, many time <br> (<br /> xhtml) is improperly used
where a paragraph is intended or where margins and|or padding should be
defined. URL to what your are trying would help.

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

lister - 28 May 2007 17:36 GMT

> Depends on the context, many time <br> (<br /> xhtml) is improperly used
> where a paragraph is intended or where margins and|or padding should be
> defined. URL to what your are trying would help.

Well it's something I'm writing at the moment, so no example pages
yet. In this particular instance is was to move some descriptive text
about an image to a new line below the image, rather than displayed
next to it. I appreciate <br> can be abused for whitespace etc, but
just wondered whether it was frowned upon altogether nowerdays.

Thanks for your comments.

Reply to this Message

Jukka K. Korpela - 28 May 2007 19:20 GMT

Scripsit lister:

> In this particular instance is was to move some descriptive text
> about an image to a new line below the image, rather than displayed
> next to it.

Using <br> for the purpose is not wrong, but using <div>...</div> for the
descriptive text is better. The <div> markup implies line breaks before and
after _and_ it turns its container to an element, which you can style. Of
course, you would often want to use a class attribute for styling, e.g. <div
class="caption">...</div>.

For other alternatives on presenting image captions, see
http://www.cs.tut.fi/~jkorpela/www/captions.html

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Jonathan N. Little - 28 May 2007 21:37 GMT

> Scripsit lister:
>
[quoted text clipped - 7 lines]
> can style. Of course, you would often want to use a class attribute for
> styling, e.g. <div class="caption">...</div>.

Of course if you use CSS you can then change the presentation without
having to change the markup.

<div class="pixbox">
<img src="somePix.jpg" alt="the Pix" width="100" height="150">
Some text about the image...
</div>

/* put then under image ...*/
.pixbox IMG { display: block; margin-bottom: 1em; }

/* or put the text the the right */
.pixbox IMG { float: left; margin: 0 1em 1em 0; }

/* or put the text the the right */
.pixbox IMG { float: right; margin: 0 0 1em 1em; }

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Andrew - 29 May 2007 00:18 GMT

> If I want to move something to a new line, should I be using <br/>,
> or is there a way of doing it in CSS?

[...]

I believe that <br> has acquired an undeserved bad reputation,
perhaps because of years of abuse. But it still has a function which
is sometimes forgotten by some who write athletically convoluted CSS
to avoid its use.

Can I suggest a page of my own where I give a short series of code
samples and rather than use a styled <pre> element simply use a
very few <br> tags:

http://people.aapt.net.au/~adjlstrong/dapper.html

I will admit that if these code samples were of the order of 10 lines
or more each I would reconsider but I believe that the <br> tag has a
place here and in many other places that perhaps it is now shunned.

And so I believe in answer to your question:

> If I want to move something to a new line, should I be using
> <br/>,

the answer, in my opinion, is: 'sometimes' :-)

Andrew

Signature

Andrew's Corner
http://people.aapt.net.au/~adjlstrong/homer.html

Reply to this Message

Dr J R Stockton - 29 May 2007 23:16 GMT

In comp.infosystems.www.authoring.stylesheets message <20070529091835.6b
cdb240.nospam@andrew.invalid>, Tue, 29 May 2007 09:18:35, Andrew
<nospam@andrew.invalid> posted:

> Can I suggest a page of my own where I give a short series of code
>samples and rather than use a styled <pre> element simply use a
>very few <br> tags:
>
>http://people.aapt.net.au/~adjlstrong/dapper.html

I'd use <pre class=SRC> for those, and omit the <code> and <br> tags.
My SRC is like your "codebox", but different.

Signature

(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

Reply to this Message

Andrew - 30 May 2007 03:20 GMT

[...]

> > Can I suggest a page of my own where I give a short series of code
> >samples and rather than use a styled <pre> element simply use a
[quoted text clipped - 4 lines]
> I'd use <pre class=SRC> for those, and omit the <code> and <br>
> tags. My SRC is like your "codebox", but different.

[...]

Thanks for your comment. I have had a quick fly through your site
and I will admit that I cannot fail to admire a man who used DOS 6.22
until 1998!!

I was keen to use <code> as I believe that this is syntactically more
correct than <pre> alone. W3C defines <code> as:

'Designates a fragment of computer code.'

which pretty much defines what I have on this page. W3C defines <pre>
as:

'The PRE element tells visual user agents that the enclosed text is
"preformatted".'

which says nothing about the _actual_ content of the text, but
certainly takes care of the line breaks:-)

http://www.w3.org/TR/html4/struct/text.html

The idea that I was trying to avoid is the ultra syntactically
correct but a little silly:

<code><pre>blah blah blah </pre></code>

Andrew

Signature

Andrew's Corner
http://people.aapt.net.au/~adjlstrong/dapper.html

Reply to this Message

Jonathan N. Little - 30 May 2007 04:14 GMT

> I was keen to use <code> as I believe that this is syntactically more
> correct than <pre> alone. W3C defines <code> as:
[quoted text clipped - 18 lines]
>
> Andrew

code.largeSnippet { white-space: pre; }

<code class="largeSnippet">
//example of multiline code fragment
function myExampleFunction()
{
...
}
</code>

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Andrew - 30 May 2007 05:19 GMT

[...]

> > The idea that I was trying to avoid is the ultra syntactically
> > correct but a little silly:
> > <code><pre>blah blah blah </pre></code>

[...]

> code.largeSnippet { white-space: pre; }
> <code class="largeSnippet">
[quoted text clipped - 4 lines]
> }
> </code>

[...]

Thanks for that, I have not seen white-space: pre before and I
have incorporated this on my page. Can you hear me eating my words
while quietly deleting all the <br> tags :-)

Andrew

Signature

Andrew's Corner
http://people.aapt.net.au/~adjlstrong/dapper.html

Reply to this Message

Jukka K. Korpela - 30 May 2007 09:25 GMT

Scripsit Jonathan N. Little:

> code.largeSnippet { white-space: pre; }

If you use that, then
1) make sure you have a correct doctype, since IE 6 and IE 7 ignore the rule
in Quirks Mode
2) remember that when CSS is disabled, the content appears formatted with no
regard to line breaks in the source and with all consecutive whitespace
collapset.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Johannes Koch - 30 May 2007 06:17 GMT

Andrew schrieb:

> The idea that I was trying to avoid is the ultra syntactically
> correct but a little silly:
>
> <code><pre>blah blah blah </pre></code>

I think

<pre><code>blah blah blah </code></pre>

is correct.

Signature

Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

Reply to this Message

Dr J R Stockton - 30 May 2007 15:03 GMT

In comp.infosystems.www.authoring.stylesheets message <20070530122019.0c
c080fe.nospam@andrew.invalid>, Wed, 30 May 2007 12:20:19, Andrew
<nospam@andrew.invalid> posted:

> Thanks for your comment. I have had a quick fly through your site
>and I will admit that I cannot fail to admire a man who used DOS 6.22
>until 1998!!

I also had the current Windows 3 at the time.

That 486dx/33 machine was used, until April 2007, for one specific
application; it still works in 6.22. The DOS 3.3 PPC640 was used as its
backup, and also still works - indeed, I've just turned them on for
successful test.

By the way, though it's no help for the cited page (unless you can port
the idea), for displaying a Javascript function (e.g. Func) I don't
duplicate the code; I use a javascript routine to write a box and fill
it with the result of Func.toString(). Those who want to see it as I
write it can use IE; those who want the run-time re-rendered can use
FireFox.

Signature

(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.merlyn.demon.co.uk/clpb-faq.txt> RAH Prins : c.l.p.b mFAQ;
<URL:ftp://garbo.uwasa.fi/pc/link/tsfaqp.zip> Timo Salmi's Turbo Pascal FAQ.

Reply to this Message

Andy Dingley - 29 May 2007 09:57 GMT

> If I want to move something to a new line, should I be using <br/>,

Depends on what you mean by "a new line".

If you're typesetting poetry, and each verse, stanza or paragraph has
embedded linebreaks _within_ it, then <br> is correct.

If you're writing "chunks" of text in a long document, then it's
usually wrong to use <br>. If these are paragraphs, then use <p> ...
</p>. If they're some sort of caption, note or text-chunk-that-isn't-
a-grammatical-paragraph, then perhaps use <div> or a <h*> instead.
Don't use <br>.

<p> etc. are wrappers for blocks of text; separate blocks of text that
should be rendered separately.

<br> is a "linebreak", i.e. one break inside a larger block. It's
simply wrong (and invalid under the strict DTD) to use <br> outside of
a block of text, i.e. inside directly <body>.

<br><br> is meaningless. Once you've broken the line, you can't "break
it twice".

Overall, nearly all <br> in typical HTML are being mis-used. Avoid
them as much as you can, unless you clearly are going to need to use
one for its real purpose. If you _think_ you need one, chances are
that you should use some CSS to control how the <p> is rendered
instead.

> is there a way of doing it in CSS?

CSS takes the delimited blocks and marked linebreaks of HTML and
converts them to whitespace on the rendered display. You can use CSS
to adjust this amount of whitespace - whether <p> should have a "blank
line" between paras etc. If you need "extra blank lines" around
something, then the correct technique is to set the CSS margin
property, not to embed a number of repeated <br>.

CSS margins are quite easy to learn (leave padding:0; for the moment),
but you'll need to learn about "collapsing vertical margins" to
understand it.

I recommend http://brainjjar.com/css/positioning/ as the best
introduction. Don't read the W3C spec, that's very hard going.

> I was just thinking if it was possible in CSS then it would be better
> as otherwise the layout is part of the markup.

Indeed.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

Should I be using <br/> in my markup?