Semantically correct XHTML markup

Question

Hello all. Just trying to get the hang of using the semantically correct XHTML markup.

Just writing the code for a small navigation item. Where each button has effectivly a title and a descrption. I thought a definition list would therefore be great so i wrote the following

<dl>
    <dt>Import images</dt>
    <dd>Read in new image names to database</dd>

    <dt>Exhibition Management</dt>
    <dd>Create / Delete an exhibition </dd>

    <dt>Image Management</dt>
    <dd>Edit name, medium and exhibition data  </dd>
</dl>

But...I want the above to be 3 buttons, each button containing the dt and dd text. How can i do this with the correct code? Normally i would make each button a div and use that for the visual button behaviour (onHover and current page selection stuff).

Any advice please

Thanks

Answer 1

<ul>
    <li><a href="#" title="Read in new image names to database">Import images</a></li>
    <li><a href="#" title="Create / Delete an exhibition">Exhibition Management</a></li>
    <li><a href="#" title="Edit name, medium and exhibition data">Image Management</a></li>
</ul>

thats good enough. using <dl> for navigation is not very clever. or use a <span> inside the <li> with the description. <dd> will give you much headache since they aren't inside the <dt> and don't care about its position and styling

Answer 2

I am slightly confused by the use of your term "button". If you mean a link, then you could do:

<a href="dest.html" title="Read in new image names to database">Import images</a>

If, however, you mean the input tag, then one way to do this would be to use input type=image and then provide an alt description.

For instance:

<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>

Answer 3

You could use <label> elements instead of <dt> elements:

<ul>
    <li>
        <a href="#">
            <label for="import-images">Import images</label>
            <span id="import-images">Read in new image names to database</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="exhibition-management">Exhibition Management</label>
            <span id="exhibition-management">Create / Delete an exhibition</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="image-management">Image Management</label>
            <span id="image-management">Edit name, medium and exhibition data</span>
        </a>
    </li>
</ul>

... the for attribute of the <label> element need only match the id of another element in the document to be valid.