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>

你怎么知道应该使用什么标签？
如果我像以前一样只使用div，这有关系吗？
新标签真的可以添加任何值吗？
你能指出我容易理解的例子和解释的方向吗？
我为什么要使用这些新标签，他们真的添加了任何价值吗？
列出项目
我看到amazon.com仍然是HTML 4
声称是html5的w3schools没有任何<footer> or <nav> or <section>标签 - ＆gt;他们有div？

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

感谢您的建议

Answer 1

许多新标记都是为您的文档提供语义和结构含义，即使您不直接使用它们进行样式设置也是如此。这样可以提高文档的机器可读性。语义标记允许软件更有效地识别和分类文档的各个部分。

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

在<nav>中包装菜单时出现了错误，即使它是所有DIV或UL / LI。 NAV只是将页面的一部分标识为导航元素，与HEADER，FOOTER等相同。事实上，这些标签中的许多都来自印刷背景 - 用于描述杂志和报纸中页面元素的术语。

Answer 2

1.你怎么知道应该使用什么标签？

标识您网页的标题或部分的标题，并使用 - header标记
哪个部分代表页面的页脚或部分的页脚？ - 使用footer标记进行标记

而不是使用＆lt; div id =＆＃34; main＆＃34;＆gt;，您现在可以使用＆lt; main＆gt;标记以标记主要内容

从相关内容中识别不太相关的内容，并通过使用aside元素将其置于一边等等。

4.你能指出我容易理解的例子和解释的方向吗？观看w3-video.com

上的HTML5免费视频演示

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

2 个答案: