Question

html5规范says：

切片内容元素或切片根元素的大纲由一个或多个可能嵌套的切片的列表组成。 section是一个容器，对应于原始DOM树中的某些节点。每个部分可以有一个与之关联的标题，并且可以包含任意数量的其他嵌套部分。大纲的算法还将DOM树中的每个节点与特定部分和潜在的标题相关联。

，同样的推理似乎适用于html5 document outline algorithm。

我一直在使用HTML5 outliner（h5o）[link]工具查看我的网站大纲，但是很难获得一个没有无用标题的明显大纲，因为这样的元素是因为<nav>或<footer>会出现在你的大纲中，但会以“无标题”出现，除非你给他们一个明确的h1-h6标题。

对于导航或页脚等内容来说，这似乎有点过分。

一种解决方案是用div替换这些元素，但这似乎打败了使用html5的全部目的。

我在我的网站[link]上尝试过的另一个是设置所有切片元素的标题，然后使用CSS隐藏其中一些标题（同样，基本上{{1} }和<nav>，以及一些<footer>元素。这是一个例子：

<section>

这会产生一个很好的diplaying网站，但我看到它的问题是谷歌排名。在其关于“隐藏文字和链接”的网站管理员工具帮助项[link]中，Google明确指出：

隐藏内容中的文字或链接可能会导致您的网站被视为不值得信任，因为它向搜索引擎提供的信息与访问者的信息不同。文本（例如过多的关键字）可以通过多种方式隐藏，包括：[...]使用CSS隐藏文本...

有些人可能会觉得Google是否喜欢他们使用隐藏文字的事实并不重要，但我的大多数访问者来自谷歌搜索，我宁愿因为选择使用此设置而受到惩罚。

有人可以提供有关此主题的建议吗？

Answer 1

我在我的网站上尝试过的另一个是为所有切片元素设置标题，然后使用CSS隐藏某些主题的标题（同样，基本上<nav>和<footer> ，以及一些<section>元素。

这就是我的方式，实际上还没有建立HTML5网站，但有趣的是I looked into this a while back。

“标题”或章节标题非常适合创建结构或文档大纲（如大纲中所示）。它们对于辅助技术用户也非常有用，他们基本上可以通过“标签”通过标题找到他们的方式，而不必“听”所有内容并试图弄清楚你可能放在哪里，例如你的搜索框。

这就是为什么我看到标题/标题应该存在的原因，即使它们在视觉用户视图中隐藏（并填充SE的内容;）

并非所有CSS隐藏方法都相同

好的，所以我知道我们无法注销SE，因此您选择隐藏标题的方式非常重要，因为您希望它们可供AT（辅助技术）用户使用.. display: none;是不可靠的（一些屏幕阅读器不读它们）你也不能“标签”找到它们 - visibility: hidden;不会删除空格而你仍然无法“标签”找到

那么隐藏方法是什么？

.. Drupal社区成员发现了一个非常酷的一个..使用clip: rect();属性让每个人都满意

.my-hidden-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}

至于谷歌，他们不仅难以根据clip属性“全面禁止/惩罚”，即使开始举起旗帜，我认为如果你能证明这一切就像其他一切一样隐藏元素的合法用法 - 应该没有问题..事实上在这种情况下额外的标题理论上应该帮助他们“找到结构” - 所以我真的觉得这不是最大的担心..

我的想法

我绝对认为我们应该根据HTML5 recs标题部分，它比任何代码元素或类名更具语义，但我也100％认为我们应该能够将它们隐藏在视觉观看者中，因为没有任何意义。如果您的视觉用户可以看到那里有一个搜索框，则显示标题“搜索此网站”;） - 该标题仅对非视觉用户和SE有用，以帮助他们找到文档的区域..理论上应该有助于SE的/谷歌解雇该领域，例如他们不应该索引一个搜索框..所以他们将不得不开始工作他们的AI，你不觉得;）

我的感觉是这样做，并明确你为什么这样做，然后如果你的网站有任何机会被标记（我认为这是非常不可能的，无论如何都是人工审查）你可以很清楚地解释你为什么要这样做..只要那些隐藏的标题不是“垃圾”，我认为它将与“图像替换”属于同一类别

+1很棒的问题！

Answer 2

我处理它的首选方式。禁用样式后，您会看到标题，但它是一个小标题，而不是h1。

<nav>
<h6 class="hidden">Navigation</h6>
<ul>
<li><a href="www.ronpaul.com">Ron Paul 2012</a></li>

.hidden{
   position:absolute;
   left:-9999px;
}

OR

.hidden{
   text-indent:-9999px;
}

html5：分区元素中的标题 - 文档大纲和SEO含义

2 个答案:

并非所有CSS隐藏方法都相同

那么隐藏方法是什么？

我的想法