HTML and CSS Reference
In-Depth Information
However, as a block element,
div
should induce a return, so if you want to provide
style information solely for a few words, or even a few letters, the best approach is to use
the
span
element, which as an inline element does not induce a return. For example, notice
how a
<span>
tag is used to call attention to a particular section of text:
<p>
Calling out
<span style="background-color: yellow; font-weight: bold;
color: black;">
special sections of text
</span>
isn't hard with a
span and CSS.
</p>
The advantage of these generic elements is clear, but they are easily abused. For
example, instead of using elements in a meaningful way, we see excessive
<div>
and
<span>
tags being employed. For example, here we use a heading with a class
<style type="text/css" media="all">
h1.heading {font-size: xx-large; color: red; font-style: italic;}
</style>
</head>
<body>
<h1 class="heading">
I am a heading?
</h1>
but a designer might resort to using a
<div>
tag instead,
<style type="text/css" media="all">
.heading {font-size: xx-large; color: red; font-style: italic;}
</style>
</head>
<body>
<div class="heading">
I am a heading?
</div>
which removes any meaning that may have been gained from the
<h1>
tag. Regardless of
the specific likelihood of the example, what we see is that developers often employ way too
many
<div>
and
<span>
tags and then apply class values to associate meaning and style
with them. We note that this is reaching epidemic proportions with some CSS designers,
leading some to dub this a Web “malady” called “div-itis” or “class-itis.” The basic problem
is that developers forgo older HTML-focused methods like tables and trumpet tableless and
CSS-focused design, only to introduce tremendous problems of their own. A technology
will encourage good practices, but it is easy to miss the intent and go off the deep end.
A well-done CSS document looks like a simple (X)HTML markup document and has a
diversity of tags in it. While
<div>
and
<span>
tags with
class
and
id
values will be
common, if they are the majority of the document, you're likely doing things wrong.
Changing Element Types with display
The CSS specification contains several classification properties that determine the
display
classification of a markup element. Is it a block-level element causing a return and acting like
a box, or a smaller inline element generally found within blocks? The CSS1 model recognized
three types of displayed elements: block elements, inline elements, and lists. As you'll see,
the CSS2 and CSS3 specifications add quite a few more.
The CSS
display
property allows an element's display type to be changed. First, the value
of
none
causes an element to not display or use canvas space. This differs from the property
