Jump to content
xisto Community
Sign in to follow this  
Followers 0
jlhaslip

Definition Lists To Display Artist, Cd, And Track The semantically correct method.

By jlhaslip, in Programming

Recommended Posts

jlhaslip    4

jlhaslip
Posted

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/ the xhtml</a> <a href="http://jigsaw.w3.org/css-validator/ 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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept