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。

顺便说一句,您可能应该更改divsection更具语义...这里

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