HTML5规范的引入带来了许多新的语义标签，为HTML标签赋予了更多含义。这意味着网站设计人员不再只能通过<div>标签的样本来构建其网站结构。
基本的语义HTML标签（例如<header>，<footer>和<nav>）几乎可以自我定义。但是，网站设计人员也需要使用许多新的HTML标签。在这里，我们选择了8个您现在应该使用的HTML标记，并简要说明了应如何使用它们。
01. <picture>
我们使用的 <picture> 标记类似于<img>，而 <picture> 元件通过允许多个提供灵活性<source>对于相同的资源，其可以适应基于媒体的查询或图像类型的支撑元件。例如，它可以向支持更新的较小文件大小的浏览器提供WebP图像。
02. <datalist>
所述<数据列表>标签提供了一种用于自动填充接口的<input>元素。每个列表包含一组具有相关值的<option>元素。当使用“列表”属性链接到<input>时，它可以提供一个下拉列表，甚至在用户键入时显示建议。
03. <dl>
此描述列表或<dl>标记元素用作一组已定义术语的容器。在内部，将每个术语（<dt>）和定义（<dd>）组合在一起以形成类似词汇表的结构。虽然默认情况下它应用基本格式，但语义HTML有利于屏幕阅读器和其他自动工具，例如搜寻器。
04. <details>
当需要一次显示大量数据（例如问题页面）时，手风琴是一种常见的设计模式。通过将<details>元素与<summary>一起使用，无需JavaScript就可以达到相同的效果。单击摘要将切换其余内容。
05. <dfn>
复杂的术语或缩写通常需要为不熟悉的术语定义。包装在<dfn>标记中的术语将由其周围的文本定义。这是一个内联元素，旨在用于突出显示人类语言中的定义。
06. <figure>
图形被定义为通常出现在文档主流程中但也可以单独解释的内容单位。所述<图>元件包装的图像或其他参考内容，并且还可以包括其内容与描述<figcaption> 。
07. <code>
使用技术写作，从视觉上将计算机代码与句子的其余部分分开可能会很有用。通过将每个事件包装在<code>标记中，浏览器可以应用一些默认格式来更适当地显示它。与<pre>组合使用更大的代码块。
08. <time>
我们可以根据上下文或语言来不同地编写时间值。通过使用<time>标签标记这些值，搜索引擎和其他自动化工具可以快速提取此信息。使用“ datetime”属性以对机器更友好的格式提供特定时间。