6

许多（大多数？）以可访问性和标准合规性为目标的网站使用无序列表进行导航。这是否使网站更易于访问，还是只是为样式提供有用的元素？

我不介意它们，我一直以这种方式使用无序列表。只是，当我从页面中删除样式以尝试评估其可访问性时，令我震惊的是，它也可以是普通链接。这是从哪里来的？

4

6 回答 6

7

网站导航的最佳标记是最能代表您的导航内容的 HTML 标记。这就是橡胶与 HTML 语义的交汇之处。

您的导航是没有任何逻辑顺序的列表吗？如果是这样，那<UL>将是一个不错的选择。您的导航更像是一个需要步骤的向导，还是按字母或数字顺序？如果是这样，那么<OL>可能是一个更好的选择。

正如您所提到的，将您的导航呈现为纯链接不会提供任何语义含义；它会建议您的导航是要阅读的句子。通过在列表中提供您的链接，您提供了关于我们将如何解释这一系列超文本链接词的提示。

于 2008-11-21T22:38:12.530 回答
7

正如其他发帖者所指出的，从语义上讲，<ul> 非常适合菜单，因为它们通常只是一个链接列表。但我真正喜欢将列表用于菜单的是它们提供的语义和视觉子级嵌套逻辑。例如：

<ul id="mainMenu">
    <li>Home</li>
    <li>Something</li>
    <li>Something Else</li>
    <li>Current section
        <ul>
            <li>A Subsection</li>
            <li>Another subsection</li>
            <li>More!
                <ul>
                    <li>We go deeper</li>
                    <li>Who knows where it ends</li>
                </ul>
            </li>
            <li>Back up one step</li>
        </ul>
    </li>
    <li>And another step</li>
    <li>All done!</li>
</ul>

把它放在你的浏览器中并抽它，你会注意到每个级别不仅进一步向右缩进，而且还使用不同样式的项目符号进行渲染。即使没有添加任何 CSS。一定要喜欢那些清单！

于 2008-11-22T03:04:06.983 回答
6

删除样式后，项目符号使导航部分更加明显。如果您使用<div>s 和<span>s 进行导航，删除样式将导致链接彼此相邻。

于 2008-11-21T22:13:38.770 回答
3

导航基本上是一个链接列表，因此将其标记为列表对我来说似乎是正确的。

于 2008-11-21T22:12:25.763 回答
2

我认为这至少也与 seo 部分有关，因为 html （还）不支持任何类型的导航列表元素。

使用 UL（或 OL）为您的导航提供语义分组，特别是当您有嵌套的导航部分时，并说这组链接具有某种逻辑连贯性和层次结构，至少这是我读过的理论之一。

Jeremy 提到的另一个好处是，当样式关闭时，开箱即用的渲染是有意义的。

于 2008-11-21T22:28:45.760 回答
1

我认为这是为文档结构完成的。我使用过 UL 或 div 标签；虽然我总是发现 UL 更成功。

问候，
弗兰克

于 2008-11-21T22:11:41.460 回答