Alternatives to <br> in strict DTD?

[russ_e]

I'm in the (probably bad) habit of not using <p> to start paragraphs, and using <br><br> to get a line space between them. I also use <br> after a image to put a line of text directly underneath it, and use <br><br> or more <br>s for vertically spacing images. (Such images being non-divved.)

In strict DTD, what are the alternatives to <br>? A string of <p></p>s doesn't seem to have much effect, and I can't say I fancy the cumbersome <div><br></div>!

[auntnini]

Isn't <br> (or <br /> in XHTML) just a white space? And don't browsers ignore multiple white spaces in sequence -- unless you put in a <br>&nbsp;<br> non-breaking space in between?

If you use CSS to style your paragraphs (and PLEASE do use logical HTML tags <h1></h1>, <p></p>, etc. and close the tags properly to markup the structure of your content) you can specify the space/margin between the elements.

I've also seen images (normally inline) CSS style-rule display: BLOCK; to force line of text below them.

[russ_e]

Hi auntnini


Isn't <br> (or <br /> in XHTML) just a white space?
No. A <br> or <br /> is a line break, like a normal carriage return in typing. They work fine, and are valid, within td and li and div (and probably a bunch more 'containers') as far as I know.


And don't browsers ignore multiple white spaces in sequence -- unless you put in a <br>&nbsp;<br> non-breaking space in between?
Browsers do ignore multiple white spaces in sequence, hence the use of &nbsp;&nbsp; if one wants extra longitudinal spacing. For vertical spacing, browsers also ignore multiple carriage returns in html, whatever the DTD.


If you use CSS to style your paragraphs (and PLEASE do use logical HTML tags <h1></h1>, <p></p>, etc. and close the tags properly to markup the structure of your content) you can specify the space/margin between the elements.
I'm not going to assert my code is completely 'logical' (!), but I do use css (http://www.clag.org.uk/clag.css), always close tags, and always make sure my code is valid. If I have to throw css at the general issue of vertical spacing, I might as well stick with transitional conformance and stay with the simple and delightfully flexible <br>.


I've also seen images (normally inline) CSS style-rule display: BLOCK; to force line of text below them.
I have the best part of 1000 images on my site. The thought of bloating the html with inflexible per-image custom inline code is not a viable proposition. Nor is it an attractive or sensible proposition in my opinion.

If I do go decide to go strict, and it's looking increasingly unlikely for other reasons (widths and targets, primarily), I would need to have a concise and flexible vertical spacing strategy worked out first. (It seems rather absurd to me that <br> was disallowed in the 'strict' philosophy, but I'm not trying to rewrite history!)

Btw, are all browsers consistent in their interpretation and rendering of display:block?

[bluewalrus]

you could use a div with padding like so or make that into a class if you want to use a bunch the same then just put it as second example


<div style="padding-top:10px; padding-bottom:10px; width:100%;" />


<div class="whatever" />

CSS
.whatever {
padding-top:10px;
padding-bottom:10px;
width:100%;
}

[russ_e]

Thanks, bluewalrus. The <div class="whatever" /> notion is attractive.