HTML标签语义化

2015-07-17 SEO
字号:T|T
作为一个前端开发人员,你要是没有听说过 CSS,那你肯定是一个 “out-man” 。随着 CSS 的深入人心,结构、表现与行为的逐渐分离,HTML 语义化成了炙手可热的卖点。 语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子,HTML 结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。

CSS 是装饰材料,是油漆,是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了,没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致,提供一个既干净又有结构的 HTML 是非常必要的。 其实HTML 中的标签都有他自身的含义,只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖,表格也终于回到他的本质工作——列表数据。它会告诉我们说:“这行是一个标题;这几行组成了一个段落;这些文字是项目列表……”在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子。

写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。<Hx><h1>、<h2>、<h3>、<h4>、<h5>、<h6> 作为标题使用,并且依据重要性递减,<h1> 是最高的等级。<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。<ul>、<ol>、<li><ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。<dl>、<dt>、<dd><dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。<em>、<strong><em> 是用作强调,<strong> 是用作重点强调。<table>、<td>、<th>、<caption>、 summary(X)HTML中的表格不再是用来布局。

如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性 summar 为摘要(要想提高搜索的排名这个绝对不应该少),<caption> 标签为首部说明,<thead> 标签为表格头部,<tbody> 标签为表格主体内容,<tfoot> 标签为表格尾部。<ins>、<del>知道<del> ,就不要再用 <s> 做删除线了,用 <del> 显然更具有语义化。而且 <del> 还带有 <cite> 和 <datetime> 来表明删除的原因以及删除的时间。<ins> 是表示插入,也有这样的属性。<abbr>、<acronym><abbr> 标签是表示 web 页面上的简称,<acronym> 标签为取首字母缩写。alt 属性和 title 属性title 属性用来为元素提供额外说明信息,但是并不是必须的。alt 属性为不能显示图像、窗体或 applets 的用户代理(UA),指定替换文字。替换文字的语言由 lang 属性指定。

让你语义化 HTML 结构的无数条理由:
1、去掉或样式丢失的时候能让页面呈现清晰的结构。HTML 本身是没有表现的,我们看到例如 <h1> 是粗体,字体大小 2em;<strong> 是加粗的, 不要误会这是HTML的表现,这些其实是 HTML 默认的 CSS 样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。 
2、屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。 
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(因为这些设备对 CSS 的支持较弱)使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。 4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。 5、便于团队开发和维护在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《HTML标签语义化》
日志链接:http://qieyi.org/seo/100.html
博客名称:惬意SEO博客

作为一个前端开发人员,你要是没有听说过 CSS,那你肯定是一个 “out-man” 。随着 CSS 的深入人心,结构、表现与行为的逐渐分离,HTML 语义化成了炙手可热的卖点。 语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子,HTML 结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。 CSS 是装饰材料,是油漆,是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了,没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致,提供一个既干净又有结构的 HTML 是非常必要的。 其实HTML 中的标签都有他自身的含义,只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖,表格也终于回到他的本质工作——列表数据。它会告诉我们说:“这行是一个标题;这几行组成了一个段落;这些文字是项目列表……”在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子。 写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。<Hx><h1>、<h2>、<h3>、<h4>、<h5>、<h6> 作为标题使用,并且依据重要性递减,<h1> 是最高的等级。<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。<ul>、<ol>、<li><ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。<dl>、<dt>、<dd><dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。<em>、<strong><em> 是用作强调,<strong> 是用作重点强调。<table>、<td>、<th>、<caption>、 summary(X)HTML中的表格不再是用来布局。 如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性 summar 为摘要(要想提高搜索的排名这个绝对不应该少),<caption> 标签为首部说明,<thead> 标签为表格头部,<tbody> 标签为表格主体内容,<tfoot> 标签为表格尾部。<ins>、<del>知道<del> ,就不要再用 <s> 做删除线了,用 <del> 显然更具有语义化。而且 <del> 还带有 <cite> 和 <datetime> 来表明删除的原因以及删除的时间。<ins> 是表示插入,也有这样的属性。<abbr>、<acronym><abbr> 标签是表示 web 页面上的简称,<acronym> 标签为取首字母缩写。alt 属性和 title 属性title 属性用来为元素提供额外说明信息,但是并不是必须的。alt 属性为不能显示图像、窗体或 applets 的用户代理(UA),指定替换文字。替换文字的语言由 lang 属性指定。 让你语义化 HTML 结构的无数条理由: 1、去掉或样式丢失的时候能让页面呈现清晰的结构。HTML 本身是没有表现的,我们看到例如 <h1> 是粗体,字体大小 2em;<strong> 是加粗的, 不要误会这是HTML的表现,这些其实是 HTML 默认的 CSS 样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。 2、屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。 3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(因为这些设备对 CSS 的支持较弱)使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。 4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。 5、便于团队开发和维护在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。__惬意SEO博客',}" >

【上一篇】

【下一篇】

1 篇回应 (访客:1 篇, 博主:0 篇)

NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复|头像相关帮助!

回到顶部