html5标签，它们在现实世界中意味着什么

Question

不久前，如果我构建一个 html 4 页面，我会使用 div、span h1、h2、h3、strong、p，然后相应地设置我的 css 样式。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5为什么会出现这些标签？

现在我想使用 HTML 5，但我很困惑，因为在做了一些研究后，我发现有很多相互矛盾的信息。

所以从下面的这些标签开始，可以说我的设计非常形象

<section><nav><article><aside><header><footer><main>

---

在过去，我会像下面这样编写我的 html

 <div> <!-- large background image design -->

      <div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
      <div><!-- large background title right --><div>

    <img src="" alt="" />

    <h3>image description</h3><div><!--little image--></div>

    </div>

现在写这样的代码是否正确（将外部div换成一个部分）

        <section> <!-- large background image design -->
          <header>
             <div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
             <div><!-- large background title right --><div>
          </header>

          <img src="" alt="" />

          <footer>image description<footer><div><!--little image--></footer>

        </section>

1. 你怎么知道应该使用什么标签？
2. 像以前一样只使用 div 有关系吗？
3. 新标签真的有什么价值吗？
4. 您能否为我指明易于理解的示例和解释的方向？
5. 我为什么要使用这些新标签，它们真的有什么价值吗？

6. 列表项

7. 我看到 amazon.com 仍然是 HTML 4

8. 声称是html5的w3schools没有任何<footer> or <nav> or <section>标签->他们有div？

或者：我是否阅读了很多内容，只是做我认为正确的事情并使用可用于我正在构建的内容的 html5 元素？并根据http://validator.w3.org/ HTML5 部分验证它，即使它说是实验性的

谢谢你的建议

Answer 1

许多新标签旨在为您的文档提供 语义 和 结构 含义，即使您不直接将它们用于样式设置。这提高了文档的机器可读性。语义标记使软件能够更有效地识别和分类文档的各个部分。

例如，您可以使用列表 <ul><li>...</li></ul> 或一堆 DIV 来完成相同的任务，但列表具有语义含义 - 一组项目，而一堆 DIV 没有。

用<nav> 包装你的菜单是有问题的，即使里面全是 DIV 或 UL/LI。 NAV 只是将页面的该部分标识为导航元素，与 HEADER、FOOTER 等相同。事实上，这些标签中有许多来自印刷背景 - 用于描述杂志和报纸中页面元素的术语。