Quote:
Originally Posted by JSWolf
Even if it's a multi-line header/title/whatever, I still consider <br/> sloppy.
It just means you didn't take make the effort to code the CSS.
Code:
h1 {
text-align: center;
}
.spacet {
padding-top: 2em;
text-indent: 0;
}
.spaceb {
padding-bottom: 2em;
text-indent: 0;
}
_________________
<h1 class="spacet">LOVE AMONG</h1>
<h1>THE</h1>
<h1 class"spaceb">CHICKENS (A FOWL LOVE STORY</h1>
<h1>BY P.G. WOODHOUSE</h1>
Problem solved and very simple CSS code. Plus, the spaces could possibly be used again. For example, if you wanted a blank section break.
Code:
<p class="spacet">The beginning of the next section.</p>
The reason for padding instead of margin is that for a section break, it works much better at the end/beginning of a screen then does margin. You get the space passed to the next screen whereas you don't with margin. |
You're definitely right about <br /> being a code smell to avoid, but splitting the header into multiple h1 tags like this is much worse; using <h1>Love Among<br />The<br />Chickens</h1> is pretty gross, but it's far better than this approach.
The h1/h2/h# tags are header tags: they semantically indicate that the contents are a
full header of the given level. You should almost never (arguably never, but there's probably a weird case where it's okay) have two adjacent h1 (or h2, or h3, etc) tags at the same level, and each header tag should include a full header text within it.
When you use 4 different h1 headers like this, you are semantically saying here that there are 4 different headers: you're saying that "LOVE AMONG", "THE", "CHICKENS (A FOWL LOVE STORY", and "BY P.G. WODEHOUSE" are legitimate, distinct headers.
That's nonsense; it's bad enough that it indicates to the human reader that you have 4 different headers (Part 1: "Love Among". Part 2: "The". etc), but it also means that most tools (which understand header fields as intended) will create a table of contents that has:
Table of Contents:
1. Love Among
2. The
3. Chickens (A Fowl Love story
4. By P. G. Wodehouse
Header tags (h1, h2, h3, etc) are meant to indicate that their contents are full, single headers, semantically, and it's definitely worth structuring them that way so that readers aren't confused and automated tools work properly.
The proper solution is to avoid both br tags and multiple headers (see my last post for one approach, though there are many ways to do this).
But if you avoid "br" by doing something like this, you've missed the whole point and made things even worse.