Looking for the lessons? Get started!
Adding space to text.
The entire Web Design Principles section can be accessed through the menu below.
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:
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
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
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:
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
isn’t so hard to do. (Hey, what’s that fat space about?)
You can add styling to your
br elements via the
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.