Looking for the lessons? Get started!
Adding space to text.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Space is the breath of art. — Frank Lloyd Wright
There are a couple of ways you do this. The browser doesn’t work like a word processor, so you can’t just hit “Enter” or the spacebar a dozen times. Doing this:
<p>Let's
do this
a few times.</p>
gives you this:
<p>Let's do this a few times.</p>
No effect, right?
Now, if you want a lot of spacing and such, your stylesheet is the place to add it. But for line breaks and a bit of spacing, you can add one of two neat little creatures: the entity and the <br> tag.
The tag is a non-breaking space tag. You can use it to add spaces between words and such:
S p a c i n g
t h i n g s
o u t
gives us
S p a c i n g t h i n g s o u t
This is actually a very poor example of using this entity, although it is an excellent example of overusing it. In the SitePoint HTML Reference, Ian Lloyd tells us flatly:
That entity [ ] is never to be used for the purposes of creating arbitrary space/padding effects ...
Using it that way makes for poorly constructed HTML, though most browsers will be forgiving enough to let you get away with it. So use it very sparingly, and if you find yourself stringing two or three or more of them together to give yourself some spacing, use CSS instead to give yourself margins or padding.
Lots of people misuse the little <br> tag, also. Simply put, you use it inside a <p> or a heading (such as <h3>) element to force a line break,with no margins or padding to disrupt your flow. The following code:
<p>Breaking up<br> isn't so hard to do.</p>
gives us this:
Breaking up
isn't so hard to do.
In contrast, using paragraph tags gives us some perhaps-unwanted spacing:
<p>Breaking up</p> <p>isn't so hard to do.</p>
often gives us
Breaking up
isn’t so hard to do. (Hey, what’s that fat space about?)
You can add styling to your br elements via the ID, class, and style (for inline styling) properties.
What you shouldn’t do is use the old, deprecated clear attributes with the br element. A lot of older tutorials advise you to use the clear attribute, with any of several values, to "clear" your page and fix your formatting:
<br clear="all"> Don’t do this!
This is out-of-date presentational HTML and should be avoided. I’m not even going to give you an example of how it’s used, because why should you learn something you shouldn’t use? Take care of problems like this in your stylesheet.
