HTML语义化

 

如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,这是进步的标志.然而,我们似乎看到了一个不太好的现象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一 种html标签存在.这种现象(使用习惯)非常的不好,滥用现象使得网页制作似乎就只剩下了div.刚才说了,时代是在进化着的,所以,诞生了HTML语义化 这个概念.

什么是 HTML语义化

HTML是一种对文本内容进行结构和意义（或者说”语义”）进行补充的方法.页面中每一部分内容都包含一种含义.HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子.而HTML语义化则是使用html所提供的现有标签(因为html各种标签已经具备相应含义与使用位置),利用其相应含义的标签去格式化页面中的内容.因为浏览器还是搜索引擎都能读懂它们(ie6除外).

为什么要 HTML语义化

我们知道HTML5新增的标签，比如<header> 和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡 的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

以下是HTML语义化的优势所在：

良好的语义(X)HTML标记有助于提升你的网站对访客的易用性.

并不是所有光临你网站的访客都能够“看到”你的CSS和JavaScript,但他们都会得到你的(X)HTML.因此,你的标记如果能在语义方面对理解你的内容提供必要的帮助将会非常重要.

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方 式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情 况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式,一 旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是运用语义标 记,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩 钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

便于团队开发和维护，W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

怎样进行 HTML 语义化

 

 

一个 XHTML  元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让  CSS  使一个  HTML  元素看起来就像另一个  HTML  元素，比如用 <div> 来代替 <p> 标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

 

首先是关于语义（Semantics ）和默认样式的区别，默认样式是浏览器设定的一些常用 tag 的表现形式，个人认为他的主要目的就是让大家直观的认识标签 (markup) 和属性 (attribute) 的用途和作用，很明显 Hx 系列看起来很像标题，因为拥有粗体和较大的字号。 <strong> ,<em> 用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

 

其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

 

适当的运用如下标记：

 

 

<Hx>

 

 

<h1>、、 <h3> 、 <h4> 、 <h5> 、 <h6>, 作为标题使用，并且依据重要性递减。 <h1> 是最高的等级。

 

<P>

 

段落标记，知道了<p> 作为段落，你就不会再使用 <br/> 来换行了，而且不需要 <br/> <br/> 来区分段落与段落。 <p> 中的文字会自动换行，而且换行的效果优于 <br> 。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。

 

<ul>、<ol>、<li>

 

<ul>无序列表，很常见的到了大家广泛的使用， <ol> 有序列表也挺常用。在 web 标准化过程中， <ul>  还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，就是美观方面差了一点。

 

<dl>、<dt>、<dd>

 

dl就是 “ 定义列表 ” 。比如说词典里面的词的解释、定义就可以用这种列表。

 

<em>、<strong>

 

<em> 是用作强调的，是用作重点强调的。 <strong> 是用作重点强调的。

 

<table>、<td>、<th>、< caption >、 summary

 

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。 <th> 为表格标题，属性 summar 为摘要， <caption> 标签为首部说明， <thead> 标签为表格头部， <tbody> 标签为表格主体内容， <tfoot> 标签为表格尾部。

 

<ins>, <del>

 

知道del ，就不要再用 <s> 做删除线了，用 del 显然更具有语义化。而且 del 还带有 cite 和 datetime 来表明删除的原因以及删除的时间。 ins 是表示插入，也有这样的属性。

 

<abbr>、<acronym>

 

<abbr>标签是表示 web 页面上的简称， <acronym> 标签为取首字母缩写 。

 

alt属性和 title 属性

 

title属性用来为元素提供额外说明信息 title 属性可以用在除了 base ， basefont ， head ， html ， meta ， param ， script 和 title 之外的所有标签。但是并不是必须的。

 

alt属性为不能显示图像、窗体或 applets 的用户代理（ UA ），指定替换文字。替换文字的语言由 lang 属性指定。