Forum Moderators: open
The first line of a definition list is the <dt>, definition term which is then followed by the actual definition <dd>. Since these are seperate elements, it is very easy to apply individual styles.
<dl>
<dt><a href="bookcase_tutorial.htm">Build Me A Bookcase!</a> Lesson One.</dt>
<dd>Building a bookcase is a fun project. It is not complicated and can take many shapes and sizes.
Read more about this "easy-to-do" project in our Building a Bookcase Tutorial!</dd>
<dt><a href="trimwork.htm">Adding Fancy Trimwork</a> Lesson Two</dt>
<dd>The bookcase is almost complete: it's functional, it's sturdy, it's also rather plain.
Let's add some trim work to spruce it up. Afterall, it's going to be standing in your hallway.</dd>
<dt><a href="wood_finishing_tutorial.htm">Wood Finishing Made Easy</a> Lesson Three</dt>
<dd>Now that you have built your bookcase and added some fancy trim, now it's time to add some
stain and choose a finish. Are you ready for the Wood Finishing Tutorial? I know I am!</dd>
</dl>
W3C suggests using a definition list as a means to list proper names followed by dialog or commentary. It may offer the solution you seek.
- papabaer
What's funny is that the definition list can fill so many presentational requirements. It is a VERY overlooked element. And today, with the option of CSS, definition lists can be styled in just about any way imaginable.
dd.pad {
padding-bottom:10px;
}
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Definition Lists for Fun & Profit!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Examples of XHTML Definition Lists, styled and unstyled" />
<style type="text/css" media="screen">
body{
margin:0;
padding:0;
font:12px georgia, "Book Antiqua", palatino, serif;
color:#000;
background:#fff;
}
dt {
padding:10px;
}
dd {
padding-right:10px;
}
h1 {
font:24px helvetica, arial, sans-serif bold;
color: #699;
background-color: transparent;
margin:5px 0 0 10px;
}
a:link{
color:#699;
background-color: transparent;
}
a:visited{
color:#699;
background-color: transparent;
}
a:active{
color:#000;
background-color: transparent;
}
a:hover{
color:#066;
background-color: transparent;
text-decoration:underline overline;
}
</style>
</head>
<body>
<h1>Woodworking Projects Are Fun!</h1>
<dl compact="compact">
<dt><a href="bookcase_tutorial.htm">Build Me A Bookcase!</a> Lesson One.</dt>
<dd>Building a bookcase is a fun project. It is not complicated and can take many shapes and
sizes. Read more about this "easy-to-do" project in our Building a Bookcase Tutorial!</dd>
<dt><a href="trimwork.htm">Adding Fancy Trimwork</a> Lesson Two</dt>
<dd style="padding-bottom:10px;">The bookcase is almost complete: it's functional, it's
sturdy, it's also rather plain. Let's add some trim work to spruce it up. Afterall, it's
going to be standing in your hallway.</dd>
<dd style="padding-bottom:10px;">Metal trim can also be added as a replacement for wooden
trimwork or an enhancement. We will take a look at some of the ways metal trimwork can add
flare to your project.</dd>
<dd>Want even more trim options? Well we have plenty of examples to show you of
"not-so-commom" trimming options, including some very neat plastic (yes, plastic!) corner
guards that double as connectors for stacking additional bookcases!</dd>
<dt><a href="wood_finishing_tutorial.htm">Wood Finishing Made Easy</a> Lesson Three</dt>
<dd>Now that you have built your bookcase and added some fancy trim, now it's time to add
some stain and choose a finish. Are you ready for the Wood Finishing Tutorial? I know I
am!</dd>
</dl>
</body>
</html>
Resist the shorthand property {padding:10px}unless you have tested. Declaring a value for all of your padding, top, right, bottom and left can give unexpected results. Leave the default, browser predetermined, formatting for the sides you do NOT need to control.
Inline styles shoud only be used for unique applications, not as standard practice. Otherwise we find our code almost as cluttered when <font> tags were used.
Definition lists are part of my every day XHTML element toolbox... ;)
I was creating a page of acronyms and their expansions, and it occurred to me that I needed a format that allowed the search engines to see the relationship between the Acronym and its full, spelled out version.
If I use divs or table cells, the visual presentation may be fine, but I realized that the logical relationships might not be clear to a spider or an algo.
The Definition List seems to be the obvious answer. The site launched last weekend and I await the SE Results with great anticiapation, since everyone of these acronyms is a potential keyword.
If I use divs or table cells, the visual presentation may be fine, but I realized that the logical relationships might not be clear to a spider or an algo.
That's exactly what prompted me to begin using definition lists. The layout can be duplicated using <div>'s or <td>'s as you mention (though the actual <dl> is very elegant itself) but the relationship between the definition term and the definition text will not be established.
It was on a hunch that the spiders and SE algos may assign more importance to a formal <dl> than logically unrelated <div> and <td> presentations. Since the definition list <dl> is a single complete entity comprised of logical sub-components, the importance of relationship is built-in. As far as what (if any) difference this makes to the search engine spiders remains to be seen. I have hopes...
<ul style="list-style: disc outside; margin-left: 1em">
Its still the basic ul list but the wasted white space is about 20% of what is was before.
Thanks for all your help!
