Html5带来的语义化提升

HTML5带来了哪些语义化提升

所谓网页语义化，就是让本来没有语义，或者语义很低的网页模块具有清晰的语义，带来的好处主要有两方面：

• 增强代码的语义，使代码更易理解
• 增强网页内容的语义，使得任何用户代理（浏览器，网络爬虫，屏幕阅读器，特别是搜索引擎爬虫）

为了提升语义化，HTML5带来一些语义化标签，主要分为三类：

页面结构元素：

• <header>：不用于划分内容，仅用于包含对页面区域的主要介绍
• <footer>：同样不用于划分内容，仅用于包含对页面区域的辅助信息
• <nav>：用来定义内容的主导航区域
• <aside>：定义与主内容松散相关的内容，常用在侧边栏
• <section>：定义某一块内容的区域
• <article>：定义具有完整性的一块独立的内容。
• <hgroup>：
• <address>：用于标示距离最近的祖先元素的联系信息。

文本元素

• <b>:表示希望突出的文本
• <em>：表示内容中需要强调的部分
• <i>：表示与内容的其他文本略有不同（斜体样式）

媒体元素

• <video>:即视频
• <audio>：音频

note：更多HTML5新语义标签的具体解释，可访问[W3C官网HTML5文档]（https://www.w3schools.com/html/html5_new_elements.asp）

此外还有一个可以提高网页语义性和可访问性的属性，即：role属性，为这个属性设置合适的值，可以帮助屏幕阅读器更准确的定位内容。具体属性，详见W3C web accessibility initiative