Html 语义'；会说话'；带字幕的CSS导航

用每个元素的标题标记导航菜单的最佳方法是什么？（我认为“演讲”一词可归因于Smashing杂志，参见）

定义列表似乎最合适，例如：

<dl id="menu">
    <dt>About</dt>
    <dd>Our work, mission, history and people</dd>
    <dt>Events</dt>
    <dd>We put on workshops, talks and debates</dd>
    <dt>Media</dt>
    <dd>See videos from our archive of past events</dd>
    <dt>Contact</dt>
    <dd>Get in touch with us for further information</dd>
</dl>

关于
我们的工作、使命、历史和人民
事件
我们举办研讨会、讲座和辩论
媒体
查看我们过去事件档案中的视频
接触
请与我们联系以获取更多信息

但我想不出如何将它设计成这样： 没有额外的div围绕每个菜单项，我认为这不是有效的HTML

---

提前谢谢。

试试这样的方法：

<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>

<ul id="menu">
    <li>About <span>Our work, mission, history and people</span></li>
    <li>Events <span>We put on workshops, talks and debates</span></li>
</ul>

菜单项1菜单项1“对话文本”
菜单项2菜单项2“对话文本”
菜单项3菜单项3“对话文本”
菜单项4菜单项4“对话文本”

然后，您可以在菜单中随意设置列表元素的样式。每个列表元素中的标题都提供样式目标和语义方式来显示主“菜单项”文本的重要性。

演示：

CSS并不漂亮

dt, dd {
    width:120px;
    padding:0 10px;
    border-left:2px solid #333;
    float:left;
}

dt {
    margin-left:-120px;
    font-weight:bold;
}

dt:first-child {
    margin:0;
}

dd {
    position:relative;
    top:20px;
    font-family:verdana;
    font-size:9px;
    left:-142px;    
}

---

我不认为一个

定义列表
是最好的方法

我会设计一个
ul
，并使用
span
作为“说话部分”。大概是这样的：

<ul>
<li><h2>Menu Item 1</h2> Menu Item 1 "Speaking Text"</li>
<li><h2>Menu Item 2</h2> Menu Item 2 "Speaking Text"</li>
<li><h2>Menu Item 3</h2> Menu Item 3 "Speaking Text"</li>
<li><h2>Menu Item 4</h2> Menu Item 4 "Speaking Text"</li>
</ul>

<ul id="menu">
    <li>About <span>Our work, mission, history and people</span></li>
    <li>Events <span>We put on workshops, talks and debates</span></li>
</ul>

您有代码吗？如果是，你能和我们分享一下吗？如果我们不知道发生了什么，我们就无能为力了。代码只是一个基本的定义列表；看上面。这就是我目前得到的，似乎是最糟糕的解决方案。我只是想知道这是否是公认的做法，因为定义列表似乎很理想！对我来说似乎是语义的。页面标题为“联系人”，描述为“与我们联系以获取更多信息”。我想不出比HTML5更具语义的编码方式了。同意，先生。这绝对是语义上的。（这就是为什么我限定并说“最语义的”。）然而，为了消除歧义，我编辑了上面的内容，说不是最好的方式。谢谢你的评论。