HTML5是web上使用最广泛的标记语言的最新和最伟大的版本。从最后一个版本的语言中有一些很大的变化，如果你没有使用它们，你就错过了一些真正酷的功能。

我们没有空间来覆盖HTML第五版中的每个新元素，但这九个元素是其中最重要的一部分。有关HTML5中新元素和API的更多信息，请务必查看W3学校。

语义要素概论

与大多数互联网一样，HTML5已经转向关注语义。现在，标签不再只是用来格式化，它们还被用来告诉浏览器和搜索引擎它们周围的含义。

例如，简单地告诉浏览器它包含一个段落。，我们将稍后讨论，它告诉浏览器它包含页面的主要内容。

语义网仍在发展，我们只是开始触及它能做什么的表面。HTML5正在帮助将语义标记带到互联网的更大部分，这只会有利于语义处理的未来。

1

标签定义了“独立的、自包含的内容”。当然，最简单的例子是一篇文章。对于这篇文章，我们将在介绍之前打开标签，在结束之后关闭它。

<article>
 All of the text in your self-contained section.
</article>

但你也可以用其他方法。例如，许多烹饪博客都有关于菜谱是如何产生的，以及为什么菜谱对作者很重要的个人故事。接下来是菜谱本身。你可以说这些元素中的每一个都是独立的。

在论坛中，每个帖子或帖子都可以被认为是独立的，并且每个帖子或帖子都可以用自己的标签进行标记。在大多数情况下，它将用于页面的主要内容。但请记住，你也可以更创造性地使用它。

2

与is密切相关。这定义了一个“主题内容分组，通常有一个标题”。。。正确的？

不一定。W3指出，这取决于站点的结构。您可能在页面的不同部分有自包含的内容（例如，想想新闻网站的首页）。然后您可能会在该文章中有一些章节。

<article>
 <section>
 <h2>Why You Need a DAC</h2>
 <p>Everything sounds better.</p>
 </section>
 <section>
 <h2>How to Set up a DAC</h2>
 <p>Here's what you need to do . . .</p>
 </section>

如果适合您的页面，您甚至可以在节中包含节。记住，一个部分只是一个“内容的主题分组”，你会发现有很多地方可以使用它。

三。

这个元素“应该用作介绍性内容的容器”，简而言之，这是你页面的一部分，它帮助人们理解他们即将阅读的内容。

但别上当--你可以多次使用这个容器。例如，您可以使用它来标识您的博客文章的页面标题和介绍性段落。但您也可以使用它来标记每个部分的介绍性内容。

<article>
 <header>
 <h1>Everything You Need to Know about DACs</h1>
 <p>Here's a useful introduction to DACs...</p>
 </header>
 The rest of your article goes here.

标题部分通常至少包含一个标题标记——H1、H2等。它们不必这样做，但一般来说，如果您使用的是标题标记，那么很可能会包含标题内容。

4

W3说页脚标签通常包含“文档的作者、版权信息、使用条款的链接、联系信息等”，你可以把它看作是“内务管理”的东西。

<footer>
 Copyright: MakeUseOf, 2017.
 <a href="https://www.makeuseof.com/contact/">Contact Us</a>
</footer>

文档还指出，页面上可以有多个页脚部分。不过，将所有这些信息保存在一个位置可能是个好主意。

5

此标记包含给定页面的导航链接。请注意，只有导航部分获得此标记，而不是页面上的所有链接。用于导航栏和类似工具。

<nav>
 <a href="https://www.makeuseof.com/>Home</a>
 <a href="https://www.makeuseof.com/about">About</a>
</nav>

这是一个非常简单的标签——仅此而已。使用它来定义导航部分，不要在页面上再次使用它。

6

HTML5中最有趣的新元素之一是旁白。W3给出了一个有些无益的定义，即“除了所放置的内容之外的一些内容”

简言之，旁白是任何与周围信息相关（但与之分离）的东西。它可以是一个边栏，为您的内容添加细节。当它在一组标记中使用时，它提供了理解主要内容所不需要的附加信息。

例如，如果我们在本文中包含一个侧边栏，提供有关HTML5历史的信息，那将是一个旁白。

但是标签也可以在文章内容之外使用。在这种情况下，它通常用于站点相关信息。我们可以包括一个侧边栏，例如：

<article>
 The main article goes here.
 <aside>MakeUseOf is focused on bridging the connection between users,
 computers, devices and the internet through education.</aside>
 The article continues here.

因为这个标签有多种用途，所以可能会让人困惑。如果你记住它是“次要内容”，而且它并不总是需要一个侧边栏，那么你就会对如何使用它有一个更好的想法。

7

许多网站都有需要显示的信息，但并不突出。也许是照片的版权信息。或者是比赛上的精美印刷品。这种信息正是细节标签的目的。

使用“详细信息”标记时，将创建可以轻松显示的隐藏文本。举个例子：

 

 

单击此处查看信息。这里更详细的信息，你不需要马上。

 

 

只需单击箭头即可获得详细信息。很简单。创造它同样容易。下面是用于上述示例的代码：

<details>
 <summary>
 Click here to see information.
 </summary>
 Here's more detailed information you don't need right away.
</details>

标记定义将显示的句子，而其他内容则隐藏。请注意，您可以在details部分中使用其他标记：headings、secti***等。

还有其他一些很酷的事情可以用HTML来做，即使你不知道多少CSS或JSON。

8-9. 和

别担心，你多年来一直使用的标签不会消失。遍历图像标记，让浏览器知道它是一个自包含的图像、图表、代码列表或其他图形。

如果从页面中删除了一个图形，它不会影响内容的流。

进入地物标记并为图像指定标题。它可能看起来像这样：

<figure>
 <img src="makeuseoflogo.png" width="800px">
 <figcaption>This is our logo!</figcaption>
</figure>

这为您提供了一种向图像添加标题的内置方法。不用再查你的CMS了。

利用html5的强大功能

HTML5中的新元素增加了很多功能，尤其是在语义方面。还有用于格式化、标量度量、任务进度等的附加元素。你可以在学校里看到所有的新元素。

但是如果你能掌握这九个，你就可以很好地利用HTML5了。如果你是新来的HTML，一定要看看这些代码的例子！

你开始使用HTML5了吗？您认为哪些新元素最有用？在下面的评论中分享你的想法！