Question

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