防止 <nav> 在 html5 网站上显示为“无标题部分”

Posted

技术标签:

【中文标题】防止 <nav> 在 html5 网站上显示为“无标题部分”【英文标题】：preventing <nav> to appear as "untitled section" on html5 websites 【发布时间】：2011-11-03 17:11:23 【问题描述】：

我正在尝试使用 html5 分段元素和标题实现正确的分段，同时实现我的客户要求的设计/布局（包括某些限制）。

总体布局是这样的：

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

我现在关心的是，如果我使用html5 outliner，我会得到面包屑导航，而主导航显示为无标题部分。 按照分层的标题结构，我不能给他们低于 h2 的标题，自然我根本不会给他们“标题”，用 css 隐藏标题来给他们“标题”感觉不对。

保持语义正确、确认 seo 标准并防止这些内容显示为无标题部分的最佳方法是什么？

【问题讨论】：

有人能解释一下“无标题部分”有什么问题吗？为什么我们应该为所有的切片元素命名？有没有关于它的 w3c 推荐？ 确切地说，根据 w3c 标准，无标题部分实际上并没有错。这里 (html5doctor.com/outlines/#untitled-sections) html5Doctor 描述了无标题的部分。从它的声音来看，无标题部分主要是一个可访问性“问题”。如果您可以忍受这种情况并以其他方式帮助屏幕阅读器，我想无标题部分没有任何问题，但无论如何它仍然会困扰我，所以我试图阻止它。只是我的两分钱...... 【参考方案1】：

显然，nav 元素是无标题的，因为它们是分段元素。

如果您必须将它们作为大纲中的标题部分，则需要在其中添加标题。

在这种情况下，您可以执行以下操作...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

然后用css隐藏h2s。

顺便说一句，您可能应该将div 更改为section 以更具语义...这里

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>

【讨论】：

据我了解，正文是第一节根，并获取主标题/标题（在我的情况下为 h1）。在语义解释中，所有文章都是页面的直接子级，因为客户要求页面标题是页面上覆盖的度假村的名称。他说他不想将他的网站名称或类似名称作为第一个标题。 要 小心 隐藏 标题 标签 使用 css！它会让你被一些搜索引擎（包括谷歌）列入黑名单。一些网站使用它来用对 SEO 友好的搜索词来充斥他们的网站以增加流量。如果您确实因此而被列入黑名单，您可以联系 Google 进行重新评估，以解释您的使用是合法的原因，但隐藏（即使是移出屏幕）是一种非常糟糕的做法。找到另一种方式:) 除了将div 更改为section 之外，main 标记实际上在这里更符合语义:) @see w3.org/TR/html51/grouping-content.html#the-main-element @Swivelgames 是对的。从语义上讲，仅当有多个section（文档的一部分）时才应使用节。如果只有一个 main 部分，它应该是 div 或 main 元素。 那么您的&lt;section class="main_content"&gt; 部分将是Untitled 部分。按照@Swivelgames 的建议继续使用main 元素。【参考方案2】：

这是 w3c 推荐的方法 - 正如他们的 edx 课程中所述。

最佳实践 1：为了不在屏幕上显示标题内容，this article by Steve Faulkner 中描述了推荐的技术。不要在 CSS 样式表中使用 display:none 或 visibility:hidden，因为在这种情况下，标题内容永远不会被屏幕阅读器发出声音，更常见的是辅助技术。

文章中的示例代码：

.offscreen

position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;


<div class="offscreen">This text is hidden.</div>

【讨论】：

【参考方案3】：

您不必将自己限制在整个页面上只有一个 h1，您可以使用任意多个。标题由分段元素划分，每个部分可以有自己的层次结构，从 h1 开始，向下。如果需要，您甚至可以在每个部分中拥有多个 h1，部分嵌套在部分中，每个部分都有自己独立的结构。这完全取决于您希望如何构建页面/大纲。

此外，鉴于您在示例中只使用了 3 个级别，您可以非常轻松地将文章降低到 h3 或 h4 以适应导航标题。拥有一个标题（隐藏或以其他方式）确实是在语义上为您的分段元素命名的正确方法。

http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

【讨论】：

只是一个警告：虽然确实使用 HTML5 我们被建议/允许使用多个 h1 进行切片 (ow.ly/lik5O)，即使谷歌确实支持/理解 HTML5 及其爬虫和允许多个 h1 (ow.ly/likjZ)，一些 SEO“专家”仍然认为在某些情况下使用多个 h1 可能会损害您的 SEO 评级。过度使用是不好的，因为它看起来很垃圾，所以我建议读者小心“众多”h1标签。除此之外，感谢您的回答！使用多个 h1 是一个可行的选择。【参考方案4】：

我为仅对 HTML5 大纲重要的标题创建了一个 CSS 类。 

h1.outline, .outline 
  display: none;

...然后在html中

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

...在大纲中，这显示为

 1. --- Main Navigation ---

编辑：“nocontent”类很重要，让 Google 的 SEO 算法知道标签中存在与 SEO 不相关的“样板”内容，因此不计入 或反对您网站的搜索引擎排名。 https://support.google.com/customsearch/answer/2364585?hl=en根据页面，“nocontent”结合其他类是可以的。

编辑：我没有在自己的网站上执行以下步骤，根据谷歌网站管理员工具，它没有受到惩罚，隐藏的标题也没有产生任何警告或标志。但是，谷歌的文档建议使用最后一步来启用“nocontent”类。

要为 Google 排名启用“nocontent”类，请修改您网站的上下文文件：

    在控制面板的左侧菜单中，单击高级。 在下载上下文部分，点击以 XML 格式下载。 编辑下载的上下文文件 cse.xml 以添加新属性 enable_nocontent_tag="true" 到 CustomSearchEngine 标记。为了 例如，更改为 . 在上传上下文部分，点击上传并上传更新后的 cse.xml 文件。

这用用户看不到的标题填充了我的导航，但清理了大纲视图并帮助它更有意义。

【讨论】：

感谢您的投入，但我对此不是 100% 确定的。根据我对 SEO 的了解，隐藏内容（尤其是链接和标题）被认为是一种不好的做法。很抱歉投反对票，但这是我不推荐的。如果我确信这不会产生负面影响，我会再次投票。 来自support.google.com/customsearch/answer/2364585?hl=en：“如果您的页面有区域包含与页面主要内容无关的样板内容，您可以使用 nocontent 类属性来识别它。当 Google 自定义搜索看到此标记时，我们将忽略其中包含的任何关键字，并且在计算您的自定义搜索引擎的排名时不会将其考虑在内。” -- 我已经对答案进行了编辑。 太好了，感谢您的更新。我再次赞成你的回答。让我们希望其他“大”搜索引擎也有同样的想法。 ;-) 谢谢！我很难找到关于其他引擎惩罚什么的确切信息，而不是它们的排名更高。如果出现相关信息，我会发布。 我在 Google 网站管理员工具中跟踪了超过 6 个月，即使我从未上传过上下文文件，我的网站也从未被标记或处罚。

以上是关于防止 <nav> 在 html5 网站上显示为“无标题部分”的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 <nav> 元素能否用于对过滤或重新排序主要内容的链接进行分组？

HTML5知识

html5语义化标签使用规范

html5 模块

HTML5 子导航语义

HTML5 中 <nav> 的语义使用与搜索表单元素