HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签。
默认情况下，浏览器呈现这些元素的方式类似于普通的 div。 但是，在适当的地方使用它们会让标记文本具有更多的含义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。
main
main 标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
article
article 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
section
注意： section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。 当内容组之间没有联系时，我们可以使用 div。
<div>通常用于一组内容、 <section>用于几组相关的内容 、<article>用于几组独立的内容。
header
header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。
注意： header 应当在 HTML 文档的 body 标签内使用。 它与包含页面标题、元信息的 head 标签不同。
nav
nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。
对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签，而使用footer。
footer
与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。
它位于页面底部，用于呈现版权信息或者相关文档链接。
audio
HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。 这可以通过页面上的文本或与字幕链接来实现。
audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg">
</audio>
figure
HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。
<figure>
<img src="#">
<br>
<figcaption> <!-- 表格标题 -->
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
但是这里有一个难点，如何为屏幕阅读器用户展示那些 超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
label
label 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。
为了让标签可以在点击的时候也选中输入框，使用for 属性规定 label 与哪个表单元素绑定。for的值与所要对应的input的id值相同。
<form>
<label for="id1">option1</label>
<input type="radio" id="id1" name="question">
<br></br>
<label for="id2">option2</label>
<input type="radio" id="id2" name="question">
<br></br>
<label for="id3">option3</label>
<input type="radio" id="id3" name="question">
</form>
fieldset、legend
fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label>
<br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label>
<br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
fieldset 标签实际上相当于div；legend 标签实际上相当于p。
当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了。