语义化元素使用对比

语义化元素的使用优势

1. 从开发角度考虑是提高代码的可读性可维护性
2. 提高代码可读性，因为元素是标准化的，能够让计算机方便读到网页的确切结构，从而更加准确的将网页的内容提供给辅助工具或设备，提高网页的可访问性
3. 方便搜索引擎准确的抓取到网页的内容，优化搜索效果

html5中常用的语法元素

• header，通常表示网页整体的顶部区域，可以包含网页的名称，导航栏，搜索栏，除了网页顶部，也可作为section和article的头部

• footer，表示网页的底部区域，可以包含版权信息，导航栏，及底部链接，除了用于网页整体的底部，也可与section和article一起使用作为内容的底部

• main，表示网页的主要内容区域，main元素的内容是独一无二的，整个网页都不应该重复，通常一个网页中只有一个main元素

• nav，用于定义网页的导航部分，通常放在header元素中，一个网页中允许有多个nav元素

• aside，用于展示与主要内容相关，但是相对独立的元素，可放在左侧边栏，右侧边栏，附加信息，网页中可允许有多个aside元素，可以根据和主要内容的相关程度放在main元素内或main元素外

• section，表示整体的一部分，用于将网页分为不同的部分，是一个通用的元素，元素内部一般会包含一个标题，如果标题元素比较丰富，可以使用header元素包裹

• article，表示网页中相对独立的部分，这部分内容通常可以脱离网页存在，比如详情页的文章内容可以放在article中，相对于网页是可以独立存在的，article元素和section元素可以嵌套使用

  注意：article元素和section元素在用法上类似，但是语义上完全不同，通常article元素中的内容即使单独存在也有完整的意义，section元素的内容一般是其他更大元素的一部分，本身不是完全独立的。

语义化标签的兼容问题

• IE9以下不支持H5标签（大部分css3属性，一些H5的api）
• IE9以下不认识，把这些标签当做行内元素去看待
• 语义化标签需要动态创建 document.createElement(‘header’) 同时设置块级元素
• 有一款插件能帮你完成这件事件 html5shiv.js
• 必须引入在头部，在页面结构之前，提前解析h5标签
• 优化处理：支持H5标签的不需要加载，IE9以下不支持H5加载
• js判断客户的浏览器版本可以做到，但是不能做到js提前加载
• 条件注释：网页的任何地方 根据浏览器版本去加载内容（html标签）