为什么要使用语义化标签?
为了在没有css的情况下,页面也能呈现出良好的文档结构和代码结构;
提高用户体验,例如title、alt可进行详细说明;
有利于SEO,爬虫只看得懂代码;
方便特殊设备的解析,如屏幕阅读器、盲人阅读器等;
便于团队的开发和维护,语义化标签使代码更具可读性。
常见的语义化前后的比较
标题与内容
语义化前的代码:
山行
远上寒山石径斜,
白云深处有人家。
停车坐爱枫林晚,
霜叶红于二月花。
语义化后的代码:
山行
远上寒山石径斜,
白云深处有人家。
停车坐爱枫林晚,
霜叶红于二月花。
表单
语义化前的代码:
账号:
密码:
语义化后的代码:
登录表单
账号:
密码:
表格
语义化前的代码:
几种页面的实现
实现方式 | 代码量 | 搜索引擎的友好 | 特殊终端兼容 |
table布局 | 多 | 差 | 一般 |
乱用标签的CSS布局 | 少 | 一般 | 差 |
标签语义良好的CSS布局 | 少 | 好 | 好 |
语义化后的代码:
实现方式代码量搜索引擎的友好特殊终端兼容
table布局多差一般乱用标签的CSS布局少一般差标签语义良好的CSS布局少好好