带有标题和文本的html5大纲

Question

我尝试应用新的html5元素。如果页面非常简单，带有h1和文本，我不确定从语义的角度来看，最好的方法是什么，如何正确反映页面的结构。

1. 如果文本是公司的哲学（或关于页面或团队......）我认为使用文章是不正确的，那可以吗？ （在这种情况下，这不是可以独立分发或可重复使用的，例如联合），它应该只是一个div吗？

2. 将h1和div包装成一个部分是否有意义？如果页面中只有一个部分，它似乎没有用。

那么，用标题和文本勾勒出一个页面最正确的方法是什么？

<h1> Title </h1>

<div id="content">
    <p> text, text, text... </p>
</div>

Answer 1

我会完全放弃div，只在需要时使用它们。这将给出简单标题和段落的最语义正确表示。

<h1>Title</h1>

<p>Some text...</p>

我将从最简单的HTML语义开始，然后研究每个HTML5布局元素，并考虑如何将其应用于您的页面。不要试图将所有内容都放在新的HTML5元素中。某些东西，如导航栏，文章，旁白，引号等很容易被发现并添加一些语义糖。

如果您正在构建可以利用布局或母版页的动态页面，那么您可以将主要布局放在母版页（页眉，页脚，导航等）中，这样可以让您的页面非常简单。

您可以将div用于多列布局，也可以查看由Bootstrap或Foundation等前端框架提供的动态网格之一。

Answer 2

我认为您不需要任何HTML5元素，但仅仅因为问题向我询问最合适的元素是：

<details open="open">
  <summary>Title</summary>
  <p>Text text text text text text text</p>
</details>

Answer 3

section是一个通用部分，在您的示例中绝对有用，以明确您的标题属于段落：

<section>
  <h1> Title </h1>
  <p> text, text, text... </p>
</section>

div没有语义原因。但如果你需要它，请保留它。

您也可以在此使用article元素代替section。正如你所说，它应该是“可重用的”。如果您采用公司的理念，您可能希望在某个地方重复使用它（社交网络或其他东西）。我认为这符合文章的定义。但是，这个问题始终是一个解释问题。