XFE 技术 生活 笔记 文集

HTML语义化

🔖 html5 👀 190 🕒 2019-07-12 👨‍🎓 XFE/Peter

发展历程

上古时期,HTML的语义化标签仅有几个:

标签 语义
p 段落
title 标题
img 图片
and so on ……

起初的网页布局方式是以table布局为起始

  • tab布局: 即将内容放置在 表格的行、列中。让内容按照行列的形式排版布局后来 css 逐步被增强,网站的受众也越来越多。大众及站长们对于内容美观度的追求,促成了经典的DIV+CSS布局方式

  • DIV+CSS布局: 即用div嵌套内容,以css 对div及其里面的内容进行排版美化。

不过这两种方式对于搜索引擎优化、阅读障碍者来说不太友好。随着互联网的发展,互联网信息推广的需求越来越多。为了更方便的让自己的信息被搜索引擎爬去,也更方便一些阅读障碍者的访问,促成了HTML5语义化标签进入到规范之中。

规范标签举例及说明

标签 语义
article 文章内容区域
aside 主内容区域外的侧边栏区域
details 描述信息区域
dialog 对话框提示框
footer 文档页脚区域
header 文档头部区域
mark 被标记的内容区域
nav 导航链接区域
output 输出内容区域
progress 进度展示区域
section 表示文档的一部分、一节
and so on ……

作用

语义化标签的使用,对于处理网页内容的机器(程序)、浏览器而已都带来了一定的好处:

  • 机器能够根据语义化标签“理解”文档内容布局,提高阅读障碍的用户体验以及机器(搜索引擎、爬虫)处理文档内容的效率

  • 在弱网络环境下,css、js等资源加载失败的情况下,浏览器能够根据默认样式渲染文档,提高弱网络环境下文档的可读性---