16

我最近一直在学习 CSS，我正在看的教程系列说显示徽标图像的最佳方法是将文本包装在 H1 标签中，然后将该标签的 CSS 样式设置为背景图像，并带有文本缩进 -99999 或类似的大数字。

这似乎令人难以置信的hackish和不雅。似乎使用 CSS 隐藏文本对于 SEO 来说是一个很大的禁忌（因为通过 CSS 隐藏文本是不受欢迎的）。

我还读到应该避免使用 img，因为 logo 本身并不是真正的内容，所以应该降级到编码的设计方面（即 CSS）。

目前对此有何共识？

4

4 回答 4

17

显示徽标的正确方法是使用<img>元素。如果你没有研究过logos 和 logotype，你可能没有意识到 logo 有它自己的语义并且需要以非常具体的方式呈现。[alt]它也可能有一个必需的解释，这是属性中应该使用的。

如果所需的解释合法地是页面中的标题，则将其添加到<h#>元素中在语义上是正确的：

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常，徽标用作链接，因此很常见：

<a href="/">
    <img src="logo.png"... />
</a>

此外，可以强调徽标（可以是<strong>或<em>取决于程度）：

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

了解徽标的语义。如果您引用的是可口可乐公司，则该品牌的徽标不会，并且如果您换掉或删除样式表也不应该更改。大多数人从语义上理解，

可口可乐标志

不同于

百事可乐标志

于 2012-04-12T14:20:44.777 回答
9

我总是在图像周围加上一个锚标签：

<a href=""><img src=""></a>

或将锚标记创建为块并设置背景图像

<a class="logo" href="">Logo</a>

.logo { 
         background: url("/path") no-repeat; 
         width: 100px; 
         height: 100px; 
         display: block; 
         text-indent: -9999px;
}
于 2012-04-12T14:15:15.650 回答
6

您应该始终使用img来显示徽标。使用h1和使用徽标作为背景是一种非常糟糕的做法，应该避免。您的徽标是内容，而不是h1.

哈里·罗伯茨在他的帖子中清楚地解释了这一点——你的标志是一个图像，而不是一个<h1>

于 2012-04-12T14:22:10.453 回答
2

我认为这并不重要。有许多不同的方法可以做到这一点，它们都得到支持。他们都工作。它们中的大多数都是搜索引擎友好的并且完全可以访问。

我会做这样的事情：

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

搜索引擎、文本模式浏览器和屏幕阅读器看到 alt 文本，其他人看到徽标图像。

于 2012-04-12T14:18:17.293 回答