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 大纲，我会得到面包屑导航和主导航显示为无标题部分。遵循分层标题结构，我不能给他们低于 h2 的标题，自然我根本不会“标题”它们，并且用 css 隐藏标题来“标题”它们感觉不对。

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

4

4 回答 4

7

显然，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>

h2然后用css隐藏s。

顺便说一句，您可能应该更改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>
于 2011-08-25T13:41:37.550 回答
5

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

最佳实践 1：为了不在屏幕上显示标题内容，推荐的技术在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>
于 2015-06-27T11:15:33.203 回答
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/

于 2013-04-16T03:16:46.223 回答
1

我为仅对 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”类，请修改您网站的上下文文件：

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

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

于 2013-11-22T03:31:14.740 回答