语义正确的 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>

这就够了。 使用<dl> 进行导航不是很聪明。或者在 <li> 中使用 <span> 和描述。 <dd> 会让你很头疼，因为它们不在 <dt> 内，也不关心它的位置和样式

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

您可以使用<label> 元素代替<dt> 元素：

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

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