I had a situation where I needed to code a listing of Bands, Albums (CD's), and theTracks on each of the albums.
In order to develop the page in a semantic manner, the best way to develop the code was to use the Definition List, Definition Term and Definition Data tags as follows:

CODE
<!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" xml:lang="en" lang="en">
<head>
<title>
listing albums and tracks </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="keywords" content="<dl><dt><dd> html tags, listing albums and tracks for different Bands, CSS dl tag" />
<meta http-equiv="description" content="A CSS format for listing albums and tracks for different Bands using <dl><dt><dd> html tags." />
<meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
<meta http-equiv="author" content="Jim Haslip" />
<style type="text/css">
/*<![CDATA[*/
* html { margin:0; padding:0;}
body { margin:0 auto; text-align:center; }
#wrapper { margin: 0 auto; width:1000px; background-color: #ffeecc; border: 1px solid #666666; }
#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }
#header h1 { margin: 1em 0; }
p { margin: 1em; padding:1em; text-align:left }
#footer { margin: 1em auto; padding: 1em; text-align:center; border-top: 1px solid #666666; }
#footer a { margin: 1em auto; padding: .15em; }
#dl_block { text-align:left; padding-left: 3em; width: 15em; }
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>
... Page Header here ...
</h1>
</div><!-- header -->
<div id="dl_block">
<h3>
Band 1
</h3>
<dl>

<dt>
Album1
</dt>
<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dt>

Album2
</dt>
<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record3
</dd>

<dd>
Record4
</dd>
<dt>
Album3
</dt>
<dd>
Record1
</dd>
<dd>

Record2
</dd>
</dl>
<h3>
Band 2
</h3>
<dl>
<dt>
Album1
</dt>

<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record1
</dd>
<dd>

Record2
</dd>
<dd>
Record3
</dd>
<dd>
Record4
</dd>
<dt>
Album2
</dt>

<dd>
Record1
</dd>
<dd>
Record2
</dd>
<dd>
Record3
</dd>
<dd>

Record4
</dd>
</dl>
</div><!-- dl_block -->
<div id="footer">
<a href="http://validator.w3.org/check?uri=referer">validate the xhtml</a> <a href="http://jigsaw.w3.org/css-validator/">validate the css</a>
</div><!-- footer -->
</div><!-- wrapper -->


</body>
</html>


Feel free to borrow the code and use it where you need to. Of course, to be efficient, separate the CSS from the page and place it into a CSS file.

 

 

 


Reply