html5: css 样式: <ul> <li> vs 用于链接列答案

【问题标题】：html5: css styling: <ul> <li> vs for column of linkshtml5: css 样式: <ul> <li> vs 用于链接列
【发布时间】：2012-07-29 05:21:30
【问题描述】：

页脚中有 4 列链接，每列宽度为 25%。每列的 css 样式是相同的（它们属于同一个类）。第一列如下所示：

第 1 列的标题

链接11

链接12

链接13

我认为可以使用<ul><li> 标签或 标签来达到目标。哪种方式更好，使用<ul>, <li> 或？

添加到问题中： PSI 刚刚检查了链接 http://www.w3schools.com/html5/tag_nav.asp ，他们使用 <!DOCTYPE html> （据我所知，html5），但是如果您检查他们如何包装链接列（我的问题），他们只是使用   而不是 @ 987654328@或<li>（见左栏查看源码）。使用  是否比<ul><li> 或 更好？

【问题讨论】：

"使用
是否比
- 或
  更好？ - 绝对不会。
我同意@MrMisterMan 的<ul><li> 或 你至少有一个可以用css 风格化的标签。
BR 是一个换行标记，而不是描述内容的容器元素。您“可以”使用它来使代码更小。但是你在处理它时会忽略语义。最后，大多数人不会在意……但是（例如）偶然发现您的网站的残障人士会丢失“链接列表”，并且在尝试理解充满链接的长段时可能会遇到麻烦, 仅以短暂的停顿（换行符）分隔。对他们和语义搜索引擎来说，这样的东西只是一个段落，除了一堆链接之外没有任何有用的内容。我会避免它。

标签： css html html-lists semantics

【解决方案1】：

如果你想在语义上正确，你会根据你的内容编写 html。当您显示“链接列表”时，“ul”是要走的路。

并且（作为奖励）如果您想在使用它时使其符合 HTML5，请将列表包装在“nav”标签中。

<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>

【讨论】：

对于这种情况，仅页脚元素就足够了，虽然在这种情况下可以使用
元素，但通常没有必要。正如我在问题中描述的那样，我仍然不确定我应该在页脚中使用它。

【解决方案2】：

您应该同时使用 nav 和 ul 标签来实现这一点。

<nav>
    <h1>Title of Column 1</h1>
    <ul>
        <li>link11</li>
        <li>link12</li>
        <li>link13</li>
    </ul>
</nav>

【讨论】：

请注意 H1 标签并不正确，因为它会降低页面实际标题的 SEO 能力。我认为 H2 将是适当的最高级别，同时为“标题”保留 H1。
@e-sushi 绝对不是。如果您的 doctype 设置为 HTML5，则使用多个
或
标签没有问题。观看 Matt Cuts 的视频：youtube.com/watch?v=GIn5qJKU8VM。您是否因此而否决了我的回答？
打错电话了。我没有在这里投反对票（还）。顺便说一句：请记住，马特只是谷歌的员工，除了谷歌之外还有更多的搜索引擎。提醒自己一个事实，即 Google 对 STILL UNDER DEVELOPMENT html5 标准没有最终决定权。当谈到“草案”模式中的标准时，我不认为马特是一个大声音。我依赖于这样一个事实，即每个搜索引擎都理解像谷歌这样的 html5-tags 有点“危险”。也就是说，除非网站所有者不关心 1000 多个备用引擎和目录。
Matt Cutts 不会在“GoogleWebmasterHelp”帐户下发布视频，如果他不确定使用多个
标签绝对不是问题的话。 SEO 专家也不认为有任何问题：google.com/search?q=multiple%20h1%20site:seomoz.org 尽管 HTML5 仍在开发中，但大多数搜索引擎已经识别页面分段（导航、标题、文章等）。
您知道他所说的只是“对于 Google，没问题”，不是吗？如前所述，除了 Google 之外还有其他引擎，我绝对确信 Matt 对 Bing 的后端一无所知。无论如何，这正在变成一个离题的讨论，我认为是时候提醒你 stackoverflow 不是一个讨论论坛。因此，我将在这里结束它以支持社区。span>

【解决方案3】：

我认为最好使用列表并通过 css 使 ul none 的列表样式类型。

【讨论】：

标签绝对不是问题的话。 SEO 专家也不认为有任何问题：google.com/search?q=multiple%20h1%20site:seomoz.org 尽管 HTML5 仍在开发中，但大多数搜索引擎已经识别页面分段（导航、标题、文章等）。