搜索结果是否需要语义化-CSDN博客

引言：

(X)HTML不应该描述网页的外观和表现（那属于css）。它真正的目的应该是提供文档内容的上下文结构和含义—称为“语义标签”。（From Pro CSS Techniques）

比较:

无聊看了下baidu，google搜索引擎所产生的结果页面代码，发现两者风格很不一样，google html代码具有明显的语义化，而baidu html代码则仅仅满足了视觉需求，拼凑痕迹明显。

搜索 javaeye 看一下google ，baidu的结果每条记录的显示代码：

baidu

<table cellspacing="0" cellpadding="0" border="0" id="3">
	<tbody>
		<tr>
			<td class="f">
				<a target="_blank" href="http://java.iteye.com/" >
					<font size="3">
						<font color="#c60a00">Java</font>频道 - JavaEye
					</font>
				</a>
				<br/>
				<font size="-1">
					<font color="#c60a00">Java</font>
					频道专区...最初目标是运行在JVM上,并且其代码形式与
					<font color="#c60a00">Java</font>
					类似。 ? 计划支持使用如下的三种方式来使用Noop: ? 1。转换为
					<font color="#c60a00">Java</font>
					代码:将Noop代码转换为<font color="#c60a00">Java</font>
					代码,这种方式下有些语言功能 ...更多新闻 
					<font color="#c60a00">Java</font>
					论坛讨论 最新讨论 2009年...
					<br/>
					<font color="#008000">java.iteye.com/ 22K 2009-9-19  </font>
					- 
					<a class="m" target="_blank">百度快照</a> 
					<br/>
				</font>
			</td>
		</tr>
	</tbody>
</table>
<br/>

google

<li class="g"> 
	<h3 class="r"> 
		<a class="l" target="_blank" href="http://www.iteye.com/forums/index">
			<em>JavaEye</em>
			论坛频道首页
		</a>
	</h3>
	<div class="s">
		<em>JavaEye</em>
		论坛频道，为软件开发人员提供高质量的交流社区，交流内容主要包括：
Java编程，Java企业应用开发，微软.net编程，Ruby on rails，AJAX，Agile敏捷开发，
		<b>...</b><br/>
		<cite>www.<b>javaeye</b>.com/forums/index - </cite>
		<span class="gl">
			<a target="_blank" href="">网页快照</a>
			- 
			<a href="">类似结果</a>
		</span>
	</div>
</li>

可见 baidu 仅仅用 table 的一个 td ,摘要与 url 地址 br 分离以及记录间 br 实现了视觉上的理想布局，对于关键字的强调则使用了 font 纯视觉标签，对于这种做法，相信稍微知道 web标准的都会感到不可理解。

而 google 不愧为当今互联网的领军企业，对于搜索结果这一简单的页面代码也要细致考虑，代码很有语义性:

1。利用有序列表标签 ol li 实现记录间的区分。

2。利用 h3 突出当前记录结果页面的title

3。利用 em 局部强调当前记录匹配查询项的关键字，关于 em 以及 strong 的详细说法：看这里@lifesinger

4。利用 cite 指出当前记录的 url 地址，表示该条记录引用自那里。

5。利用兼具语义与视觉信息的 b 轻微强调 url 地址中出现的查询项。

6。记录结果 title，摘要，url 地址，其他链接等,都用标签分块显示

讨论:

不像一般页面语义化可以 SEO，那么搜索结果语义化有何好处：(From Pro CSS Techniques)

并不是所有访客都能够“看到”结果页面，但他们都会得到页面的(X)HTML代码。语义化的标签代码对于内容理解会有很大作用。

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

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。使用语义化标签可以确保这些设备根据自己的硬件条件来尽量有意义地渲染网页。语义化标签为设备提供了所需的相关信息，可以有效的应对前向后向兼容性问题。例如，手机可以选择使标题文字以粗体显示。而掌上电脑可以以比较大的字体来显示。无论哪种方式，一旦你选择了标题标签，就可以确信读取设备将根据其自身的条件来合适地显示页面。