Chapter 51. Controlling Indents
The standard solution to creating an indent with HTML is the blockquote tag, which doesn't make the standards police very happy. Strictly speaking, the purpose of the blockquote tag is to offset a chunk of display text like the quote at the beginning of a scholarly essay, as in Figure 51.1. But you'd be hard pressed to find a more practical, results-oriented bunch than Web designers under deadline constraints. In the fog of rapid production, they drafted the blockquote tag early on to jury-rig page indents, as in Figure 51.2.
Figure 51.1. The blockquote tag is supposed to offset chunks of display text, like this.
[View full size image]
Figure 51.2. In the hands of crafty designers, the blockquote tag became the de-facto method for creating page indents, much to the dismay of standards-conscious Web heads.
[View full size image]
You can also nest blockquote tags to increase the amount of indentation:
<blockquote>
<p>This paragraph is indented.</p>
<p>This paragraph is indented.</p>
<p>This paragraph is indented.</p>
</blockquote>
Notice, though, that you can't control the precise amount of indentation. For each blockquote tag, the browser just pushes the text some distance to the right according to a default setting.A better solution overall is to use CSS. The margin-left attribute does the job handily, and it gives you the added flexibility of adjusting the precise amount of indentation, as Figure 51.3 shows.
<blockquote>
<blockquote>
<blockquote>
<p>This paragraph is very indented.</p>
<p>This paragraph is very indented.</p>
<p>This paragraph is very indented.</p>
</blockquote>
</blockquote>
</blockquote>
Listing 51.1. View Source for Figure 51.3.
<head>
<style type="text/css">
p {
margin-left: 50px;
}
</style>
</head>
<body>
<h1>Blah blah headline</h1>
<p>Blah blah blah....</p>
<p>Blah blah blah....</p>
</body>
Figure 51.3. You're better off creating indents with CSS. This way, you can specify the precise amount of indentation.
[View full size image]
Listing 51.2. View Source for Figure 51.4.
<head>
<style type="text/css">
p {
text-indent: 30px;
}
</style>
</head>
<body>
<h1>Blah blah headline</h1>
<p>Blah blah blah....</p>
</body>
Figure 51.4. Use the text-indent attribute to indent the first line of any text element.
[View full size image]
the total actual indentation in the first line of type is 80 pixels, or 50 + 30. In the second and subsequent lines of type, the indentation jumps back to 50 pixels.
p {
margin-left: 50px;
text-indent: 30px;
}
GEEKSPEAKA hanging indent is a paragraph indent in reverse. The first line of type pushes out to the left, not in to the right. |
Listing 51.3. View Source for Figure 51.5.
<head>
<style type="text/css">
p {
margin-left: 50px;
text-indent: -30px;
}
</style>
</head>
<body>
<p>Blah blah blah...</p>
<p>Blah blah blah....</p>
</body>
Figure 51.5. To create a hanging indent, establish a standard left margin for the block of text, and then set the text-indent attribute to a negative value.
[View full size image]
TIPIn a hanging indent, if your left margin has a value of x, make sure the text-indent attribute doesn't have a value smaller than x. In other words, if your left margin is 50 pixels, don't give 80 pixels as the length for the first-line indent, or you'll push your hanging indent off the left side of the page. |