Question

我正在尝试使用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标准并防止它们显示为无标题部分？

Answer 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隐藏h2。

顺便说一下，您应该将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>

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

Answer 3

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

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

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

Answer 4

我为标题创建了一个CSS类，这对于HTML5大纲非常重要。

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

编辑：＆＃34; nocontent＆＃34;让Google的SEO算法知道有＆＃34;样板＆＃34;标签中的内容与SEO无关，因此不会计入或您网站的搜索引擎排名。 https://support.google.com/customsearch/answer/2364585?hl=en根据该页面，可以将其他类与＆＃34; nocontent＆＃34;结合使用。

编辑：我没有在自己的网站上执行以下步骤，根据Google网站站长工具，它没有受到惩罚，隐藏的标题也没有创建任何警告或标记。但是，Google＆＃39; s文档建议最后一步，以启用＆＃34; nocontent＆＃34;类。

启用＆＃34; nocontent＆＃34;为了Google的排名目的，请修改您网站的上下文文件：

在控制面板的左侧菜单中，单击高级。

在下载环境部分中，点击以XML格式下载。

编辑下载的上下文文件cse.xml以添加新属性 enable_nocontent_tag =＆＃34;真＆＃34;到CustomSearchEngine标签。对于例如，改为。

在上传上下文部分，点击上传，然后上传更新后的cse.xml文件。

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

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

4 个答案: