Cascading Style Sheets, CSS Tricks: Indenting
As designers, we are loath to give up control over spacing and
layout in our Web pages. This desire for a certain look-and-feel
often leads us to omit proper structural markup where it is needed,
or to use HTML improperly to achieve a certain visual effect at
the expense of accessibility.
Commonly misused HTML elements include:
-
BLOCKQUOTE and DL. Intended to designate quotations and definition
lists, these elements are often misused to force indentation.
-
TABLE. Tables may be used for layout purposes , but they should be kept as simple as
possible, and used only when there's no other solution.
-
B and I. Meaningless in a non-graphical browser. Emphasis
should be indicated by STRONG or EM instead of B or I.
Commonly omitted HTML elements include:
-
H1, H2, H3, etc. Headings and subheadings in Web documents
should be marked up with the appropriate H tags. Many designers
omit these and substitute something like<FONT
SIZE="+1"><B>Section 1</B></FONT>.
Not only is this messy and a waste of bandwidth; it is also
completely meaningless to non-graphical browsers and screen
readers.
-
OL and UL. Numbered and bulleted lists should be designated
with OL (ordered list) and UL (unordered list).
-
TH. Column and row headers in data tables must be marked
up with TH or the table will make no sense to blind users
.
Improper or inadequate use of structural markup can confound
assistive technologies used by disabled people. It also makes
your pages non-portable, bloated, and difficult to maintain.
"But, but, but..."
Hang on, I know you don't want to sacrifice design for accessibility.
And you don't have to. Fortunately, the same precise presentational
effects can nearly always be achieved without misusing HTML tags
or making the page hard for disabled visitors to use. The solution
is Cascading Style Sheets, CSS.
Indenting
Question: I want certain images
and blocks of text on my page to be indented. How do I do this
without using tables, BLOCKQUOTE, or DL?
With Cascading Style Sheets, CSS you can achieve this effect cleanly, and you will have
more precise control over the amount of indentation. Create a
class in your Cascading Style Sheets "stylesheet" like this:
.indent {margin-left: 2.5em}
You can use different measurements according to your needs. Play
around with different values until you get the effect you want,
and don't forget to test on multiple platforms and browsers.
You can define your styles either in a single, separate style
sheets (recommended), or between the HEAD tags of individual pages,
like so:
<head>
<![]()
title>The Human Colon: A User's Guide <![]()
/title>;
<STYLE TYPE="text/css">
.indent {margin-left: 25px}
.indent2 {margin-left: 10px}
</STYLE>
</head>
Then simply apply the style to the part of the page you want
indented:
<p>Our address is:</p>
<div class="indent">Peachtree Tower<br>
100 Peachtree Place<br>
Atlanta, GA 30327</div>
If you had specified a left margin of 2.5em in your style sheet,
this HTML would produce the following output:
Our address is:
Peachtree Tower
100 Peachtree Place
Atlanta, GA 30327
Let's say you want your paragraph indented on the right as well,
and you want it to appear in a smaller font size than the surrounding
text. No problem:
.indent {margin-left: 2.5em; margin-right: 2.5em;
font-size: .88em}
CSS provides you with practically endless options for presentation.