欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。
今天我们介绍的内容是使用 main 、article 元素展示主题内容。之前的文章中已经介绍过 HTML5 相关的知识，HTML5 增加了 main、header、footer、nav、article、section 等许多新标签，为开发人员提供了更多的选择，新增加的这些新标签也兼顾了无障碍特性。 默认情况下，浏览器显示这些新标签的方式与 div 标签类似。然而，合理地使用它们，可以使你的标签更加的语义化。无障碍辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。main 标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页广告等可以在页面中重复出现的内容。main 标签的语义化特性可以使辅助技术快速定位到页面的主体内容。如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别 main 标签，实现这个功能。article 是另一个具有语义化特性的 HTML5 新标签。article 是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者公众号文章。有些技巧可以用来判断内容是否独立，如果内容脱离了上下文，是否仍然有意义？类似地，对于 RSS 提要中的文本，它是否有意义？ 注意：使用辅助设备的用户依赖组织良好的、语义化的标签来获取页面中的信息。 section 也是一个 HTML5 新标签，与 article 标签的语义含义略有不同。article 用于独立的、完整的内容，而 section 用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。当内容组之间没有联系时，可以使用 div 。以下为 div、section、article 标签的描述如下所示：div ：没有任何语义
section ：用于对与主题相关的内容进行分组
article ：用于呈现独立及完整的内容
在文章 “无障碍网页设计：「03」使用（h1-h6) 标题元素表示内容的层次关系” 代码基础上， 调整模块 3 部分的内容。显示已经介绍的 “CSS 层叠样式表基础知识” 专题的文章及简介。增加 main 元素， h2 元素表示专题名称， article 元素下包含 h3 元素， h3 元素表示文章标题， p 元素里放文章内容简介。调整 html 代码如下所示：<main>
<div>
<h2>CSS 层叠样式表基础知识</h2>
<p>CSS 是一种标准的样式表语言，用于描述网页的布局和格式...</p>
</div>
<article>
<h3>通过样式表修改页面文本颜色</h3>
<p>通过 CSS 改变页面文本的颜色有3种方式...</p>
</article>
<article>
<h3>通过样式表简单选择器修改页面元素样式</h3>
<p>选择器是 CSS 规则的一部分且位于 CSS 声明块前。...</p>
</article>
</main>
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
