HTML 5 语义

Question

我已经阅读了一段时间有关 HTML 5 的正确语义的内容，但仍然不确定某些事情。

我的网站从数据库输出如下：

• 标题（当前使用

  ）

• 描述（当前使用

  ）

• 图像（当前使用 <） img> 并且没有包装元素）
• 打开/关闭（当前使用

  ）

• 服务
  • 苹果酒（是/否）
  • 葡萄酒（是/否）
  • 草稿（是/否）

我对此感到非常困惑：

每个结果

现在是否应该在 内

元素，因此页面将在

内输出 10 个结果，或者使用 1 在 html5 语义上正确

包含结果，因为它是结果

并且每个结果都保存在

中; ???

谢谢

Answer 1

部分是内容的主题分组，通常带有标题。
在您的情况下，我会为每个结果使用一个部分。

示例：

<section>
 <header><h1>Trollinger</h1></header>
  <p>Red, Delicious</p>
  <img/>
 <p>open</p>
 <ul>
  <li>cider</li>
  <li>wine</li>
  <li>draft</li>
 </ul>
</section>

参考： http://dev.w3.org/html5 /spec/Overview.html#the-section-element

Answer 2

网页的标题应设置在 （位于 中）以及页面上（在body）和

。这对语义和 SEO 都很友好。

如果“描述”是独立的，则可以是 。 如果它是其他文本的一部分，则段落很好，但通常段落不会单独存在，因此请使用如果是这样的话。
图片：这要看情况。如果此图像纯粹用于样式（可能是背景中的漩涡或渐变），则应将其设置为 CSS 中元素的背景图像。如果它是实际内容（如徽标、照片），则使用 标记。
我猜“打开”和“关闭”是交互元素、链接或按钮。如果是这样，请使用 或锚点：，而不是段落。如果这些是标题，请使用标题标签之一。既然您已经使用了

，那么就使用

（除非它不是一个非常重要的标题）

至于您的“结果”，根据规范，

section 元素表示文档的通用部分或
应用。在这种情况下，一个部分是一个主题分组
内容，通常带有标题。

此外，

section 元素不是通用容器元素。当
元素是出于样式目的或为了方便
编写脚本时，鼓励作者使用 div 元素。一个
一般规则是，仅当满足以下条件时，section 元素才是合适的：
元素的内容将明确地列在文档的
大纲。

因此，就您而言，搜索结果的

可能就可以了。