正确使用HTML5语义标签

时间:2017-05-24 07:39:19

标签: html5 semantic-markup

我正在努力将语义标签恰当地应用到显示古代目录的网站上。

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

ProcessBuilder.start()

将带有搜索和过滤器选项的两个div以及分页放入 main 标记是否正确?或者它们应该在 main 之前和之后的 body 标记中独立?

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

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

我非常肯定通过查看其他问题和答案来确定该部分可以在文章中使用。我完全不安全的是将完整的古代条目文本放入 figcaption

1 个答案:

答案 0 :(得分:0)

使用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

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