正确使用 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 放入主标签是否正确？还是它们应该在主标签之前和之后的身体标签中独立？

第二个问题是关于上述结构中的文章：

    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/figurehttps://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

虽然最好使用正确的标记，但我相信您不会因为出错而受到惩罚。