您的位置:首页 > 其它

关于web语义化的一些感悟

2014-04-18 16:35 190 查看
今日读了一些关于WEB语义化的一些文章,包括知乎上的一些问题以及一些大牛的博客,记录总结一下并写下自己的感悟。

首先,何谓WEB语义化,为何要进行WEB语义化?

知乎上有一位用户回答说" 我所理解的web语义化是互联网信息处理的自动化、智能化。",个人觉得说的很到点。顾名思义,WEB语义化就是让页面更具有语义性,可读性,让其更好理解。WEB语义化这个概念出现的原因,从根本上而言是为了更好的帮助机器理解我们所构建的页面,而进一步而言就是可以从我们所写的页面中读取到更多的信息,让机器不仅读取到内容,而且知道读取的内容所对应的意义。
当机器能够更好地理解WEB内容时,其数据处理,检索,智能化的能力也会大大增强。例如Siri,搜索引擎,良好的语义结构的WEB页面会给其提供更多的检索信息,反馈给用户的内容和频率也将大大提高。

如何实现WEB语义化?

结构,表现,行为分离:

我们常说的一个概念:结构,表现,行为分离,其实就是HTML,CSS,JS各司其职,独立CSS,JS与HTML文件,不要在HTML中增加表现层次的代码,尽量减少甚至不使用嵌入式js代码

合理使用HTML标签:

"合理使用"这四个字说起来简单,其实其内容和学问就大了。

HTML4.0.1/XHTML:

首先对于传统的XHTML(HTML4.0.1)而言,标签的语义性并不丰富,我们常用的具有意义的无非就是h1~h6,ul,ol等等,下面这个表格进行了整理
标签语义
h1~h6标题
thtable的header
p段落
ul无序列表
ol排序列表
dldefinition list,定义列表
dtdefinition title,定义名称
dddefinition  description定义描述
ememphasized,局部强调,段落内强调
strong更强烈的强调,全文强调

HTML5

而在新制定的HTML5标准中,HTML标签语义化的功能大大增强了。
新增加的例如header,section,article等标签完美地替代了以前无意义的div+class or div+id
HTML5的革新,语义标签化(一)
HTML5的革新,语义标签化(二)
这两篇博文极其详尽的阐述了这些新标签的语义,我就不重复总结了,给原博文作者一个大大的赞,这里我就写一下我的几点见解。
1.关于article
每一个article是一个独立的单元,常为独立的文章,其内容独立与其它并联article没有关联,但其与上级article是相关的。当section包含多个article时,代表虽然article之间没有关联,但其组合起来是一个整体,标准的article结构如下
<span style="font-family:Microsoft YaHei;"><article><header><h1>文章/页面标题,SEO中唯一</h1><p>段落内容,<strong>强调与突出</strong></p></header><section><h2>章节小标题</h2><p>段落内容</p></section><section>…</section><footer><h3>文章底部小标题</h3><p>段落内容</p></footer></article></span>
2.关于section
section我的理解就是并列的"小节",同级section之间内容大体是相同的,只是因为讲述对象获分类等差距而分为不同的小节。 对于section而言,因为其本身就是一种次级结构,所以其中的h1~h5标签都会自动降级。
关于WEB语义话的内容暂时先写这么多,以后有看到新的内容再进行补充
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  语义化 web