语义正确的XHTML标记

只是试图掌握使用语义正确的XHTML标记的诀窍

只是为一个小的导航项目编写代码。其中每个按钮都有效地具有标题和说明。因此，我认为定义列表会很好，所以我写了以下内容

<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>

导入图像
将新图像名称读入数据库
展览管理
创建/删除展览
图像管理
编辑名称、媒体和展览数据

但是…我希望上面是3个按钮，每个按钮包含dt和dd文本。如何使用正确的代码执行此操作？通常，我会将每个按钮设为div，并将其用于可视按钮行为（onHover和当前页面选择内容）

有什么建议吗

谢谢

这就够了。

---

使用

进行导航不是很聪明。或者在带有说明的

内使用

会让你非常头疼，因为它们不在

内，也不关心它的位置和样式

我对你使用的术语“按钮”有点困惑。如果你指的是链接，那么你可以：

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

但是，如果您指的是输入标记，那么一种方法是使用input type=image，然后提供alt描述

例如：

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

您可以使用

元素而不是

元素：

<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>

---

。。。

元素的

属性只需与文档中另一个元素的
id
匹配即可生效。
按钮，如
或
或超链接
（有些人错误地将其称为按钮）？太好了，感谢您的建议。同样的，在链接中添加ul就足够了吗？很高兴知道。鉴于-这仅供参考，我个人同意您使用
ul
/
ol
导航-cssplay.co.uk的Stu Nichols主张使用
导航菜单：谢谢！如果您真的需要像“将新图像名称读入数据库”这样的小模糊显示为工具提示（就像它们与
title
属性一样），您可以使用类似jQuery工具提示插件的东西，然后您就可以在其中包含标记。
<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>