正确使用HTML5语义标记

Question

我很难在一个展示文物目录的网站上恰当地应用语义标签。

第一个问题是关于主要结构：

body
  header
    h1
    h2
    nav
      a
      ...
      a
  main
    div        // Search field and a button to open a spacious filter pane
    article
    article
    article
    ...
    article
    div        // Pagination
  footer
    p

将带有搜索和筛选选项的两个div和分页放入主标记是正确的吗？还是在main之前和之后的主体标记中它们是独立的？

第二个问题是关于上述结构中的条款：

    article
      figure
        img     // depicts the antiquity
      figcaption
        header
          h3    // title of the antiquity
          p     // detailed description of the antiquity
        section
          p     // first owner of the antiquity
          p     // second owner of the antiquity
          ...
          p     // last and therfore current owner of the antiquity
        section
          p     // first literature record on this antiquity
          p     // second literature record on this antiquity
          ...
          p     // last literature record on this antiquity

通过查看其他问题和答案，我非常肯定，在文章中可以这样使用部分是正确的。我完全不放心的是，把完整的古代条目文本放入图形标题中。

Answer 1

使用div进行搜索是非常好的。

您可以为分页使用nav元素：https://developer.mozilla.org/en/docs/Web/HTML/Element/nav

关于项目元素的结构。图标题应该是图中的第一个或最后一个子元素，请参见这里的详细信息：https://developer.mozilla.org/en/docs/Web/HTML/Element/figure

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

所以我建议让你的文章看起来更像：

article
  figure
    img     // depicts the antiquity
    figcaption  //text about the image
  header
    h1    // title of the antiquity
    p     // detailed description of the antiquity
  section
    p     // first owner of the antiquity
    p     // second owner of the antiquity
    ...
    p     // last and therefore current owner of the antiquity
  section
    p     // first literature record on this antiquity
    p     // second literature record on this antiquity
    ...
    p     // last literature record on this antiquity

虽然正确的标记是首选的，但我不相信你会因为弄错而受到惩罚。