页面LOGO的几种HTML+CSS写法探究

页面LOGO的写法这个问题经过了很多次的讨论，这次重写Devivan的主题时忽然想起来，顺便记录了下来。页面LOGO的 写法得从三个方面去考虑：语义性，可访问性以及SEO。

1. 语义性，我一直在想W3C可否出个logo标签，类似于header，section此类的标签，多直接
2. 可访问性，需考虑当用户禁用掉图片或者禁用掉样式时能否降级显示
3. SEO，个人一直将页面第二重要的元素H1标签用于LOGO，但对于是否有利于SEO没准确的数据来支撑

对于页面LOGO最佳的写法似乎一直都没有定论，现在最为常见的写法就是在HTML上使用H1标签包含着返回网站首页链接的a标签，在CSS上对 H1或者a标签定义背景图并使用文字的负缩进将LOGO文字隐藏。

第一种写法，最为普遍的写法

此写法可满足语义性与SEO的要求，但在用户禁用图片、启用CSS的情况下，就无法看到页面的LOGO。这种写法的网站包括有：Smashing Magazinge，Css Globle，Six Revisions。代码如下：

HTML代码：

<h1 id="logo">
  <a title="Devivan HomePage" href="http://dev.ivanchoi.name">Devivan</a>
 </h1>

CSS代码:

h1 {
  margin:37px 0 41px;
   width:204px;
  height:97px;
   background:url("images/sprite.png?v=20100328") no-repeat;
 }
h1 a {
  display:block;
  width:204px;
   height:97px;
  text-indent:-9999px;
 }

详细的介绍可参看Design Shack的Correctly Displaying You Logo With Css。

第二种写法，添加span标签，完美解决可访问性。

正是由于第一种写法在可用性上的缺陷，所以有人在第一种写法上进行了扩展。这写法的缺陷在于多使用了一个span标签，显然违反了语义性这一条。具体先来 看看实现代码：
HTML代码：

<h1 id="logo>
  <a href="http://dev.ivanchoi.name">Devivan<span></span></h1>

CSS代码：

#logo a {
   position:relative;
   display:block;
    width:204px;
   height:97px;
 }

#logo a span {
   display:block;
    position:absolute;
   width:100%;
    height:100%;
   background:url("images/sprite.png?v=20100328") no-repeat;
    z-index:100;
}

写法的实现思路是将LOGO做为背景图片应用于新增的span标签上，并通过绝对定位与z-index使span标 签覆盖掉a标签。如此便很巧妙的解决了第一种方法在可访问性上碰到的问题：当禁用图片时，被span标签所覆盖的a 标签内容便显现出来；当禁用css时，仍然可显示a标签的内容。

第三种写法，使用img。

此写法正式我目前所使用的方法，即将LOGO图片直接插入a标签中，并千万记得使用alt标签。先看代码实现：
HTML代码：

<h1><a id="blogtitle" href="http://dev.ivanchoi.name">
   <img alt="Devivan" src="http://dev.ivanchoi.name/wp-content/themes/koc/images/logo.png"></a>
 </h1>

CSS代码：

a img {border:medium  none;}

我考虑这种写法有两点缘由：

• 可优雅的降级，禁用图片/css均可显示标题。
• 在手持设备上未禁用图片的情况下用户看到LOGO，比看到文字标题更具影响力。

此种写法相比前两种写法有两种不足：第一，图片必须进行额外的一次HTTP请求；第二，SEO上似乎比较不利（未为数据支撑）。

另外，Google搜索结果页面的LOGO写法似乎要处理第三种写法所多出来的一次HTTP请求，使用position定位配合高宽以及 overflow:hiddent对sprite图片进行切割后显示LOGO。只是在禁用Css的情况下不怎么好看。

在这种三种方法中，个人觉得使用何种方法很多程度看开发者对语义性、可访问性以及SEO上的权衡取舍，也就是说没有最优的方法。