语义正确的 XHTML 标记

Question

只是尝试掌握使用语义上正确的 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 和当前页面选择内容）。

有什么建议请

谢谢

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>

这就足够了。
使用

进行导航并不是很聪明。或者在

内使用 和描述。

会让你很头痛，因为它们不在

内部并且不关心它的位置和样式

Answer 2

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

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

Answer 3

您可以使用 元素代替

元素：

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

... 的 for 属性label> 元素只需与文档中另一个元素的 id 匹配即可有效。