HTML and CSS Reference
In-Depth Information
Replace blockquote/ul Indentation with CSS
Change any
blockquote
s or
ul
elements used purely to indent their contents into
div
s, and assign CSS rules to
the
div
that use the
margin-left
and
margin-right
properties to indent.
<blockquote>
The quick brown fox jumped over the lazy dog.
</blockquote>
<div id="i8" style="margin-left: 40px; margin-right: 40px">
The quick brown fox jumped over the lazy dog.
</div>
Motivation
blockquote
should be reserved for quotations.
ul
should be reserved for lists.
CSS offers much greater control over exactly how far any given chunk of text is indented. You also have the
option to set a right margin separately from the left margin, to indent the first line differently than the rest, to
specify a hanging indent, or anything else you can imagine. CSS is simply a more powerful and precise means of
indenting text than
blockquote
and
ul
ever were.
Potential Trade-offs
Minimal. Even if a browser cannot load the CSS stylesheet, the consequent lack of indentation has a very small
effect on the overall appearance of the page.
Mechanics
Finding text improperly marked up with
blockquote
is tricky. On some sites, there are no real blockquotes, so a
quick search for
<blockquote
will locate all the occurrences. However, if a site is using real blockquotes
anywhere, you'll need to inspect each example.
To find places where
ul
(or, less commonly,
ol
) has been used to indent, first try validation. Even the
transitional XHTML DTD requires all
ul
and
ol
elements to contain at least one
li
child element. Lists that don't
contain any list items should pop right up with an error message such as this:
test.html:9: element ul: validity error : Element ul content
does not follow the DTD, expecting (li)+, got ()
</ul>
^
You can also use regular expressions to locate any item-less
ul
elements. Because these almost always extend
across multiple lines, this is a little tricky, but it is doable:
<ul>([^<]|<[^l]|<l[^i])*?</ul>
Search WWH ::
Custom Search