我最近一直在學習CSS，我正在觀看的教程系列說，顯示徽標圖像的最佳方式是將文本包裝在H1標籤中，然後將該標籤的CSS樣式設置爲背景圖像，文本縮進-99999或類似的大數字。用CSS顯示徽標的正確方法是什麼？
這似乎令人難以置信的hackish和不雅。它也似乎使用CSS來隱藏文本將是一個很大的禁忌搜索引擎優化的目的（因爲通過CSS隱藏文字是皺眉）。
我也讀過，應該避免使用img，因爲標識本身並不是真正的內容，所以應該降級到編碼的設計方面（即CSS）。
目前對此的共識是什麼？
顯示徽標的正確方法是使用<img>元素。如果您還沒有研究過logos and logotype，您可能沒有意識到徽標具有其自己的語義，並且需要以非常特定的方式呈現。它也可能有一個必需的解釋，這應該用在[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>
<a href="/">
<img src="logo.png" ... />
</a>
</strong>
瞭解徽標的語義。如果您參考了可口可樂公司，那麼品牌的徽標就不會改變，如果您換出或刪除了樣式表，該徽標也不應該改變。大多數人都明白，語義，
不同於
我永遠只是換一個錨標記圖像周圍的：
<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;}
我覺得它並沒有真正問題。有很多不同的方法可以做到這一點，並且都支持。他們都工作。他們中的大多數都是搜索引擎友好且完全可訪問的。
我會做這樣的事情：
<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>
搜索引擎，文本模式的瀏覽器和屏幕閱讀器看到的替代文字，其他人看到的標誌形象。
從品牌和營銷的角度來看，正確呈現[標識]（http://en.wikipedia.org/wiki/Logo）非常重要。在CSS中放置徽標將是一種不正確的方法。對於這種影響，它*確實很重要*。 – zzzzBov 2012-04-12 14:27:17
你應該總是使用img顯示標誌。使用h1並將徽標用作背景是非常糟糕的做法，應該避免。您的徽標是內容，而不是h1。
哈里·羅伯茨解釋清楚在他的崗位 - Your logo is an image, not a <h1>
爲什麼是標誌本身不是真正的內容？ – BoltClock 2012-04-12 14:13:41
檢查此問題http://stackoverflow.com/questions/7995502/is-using-the-logo-tag-in-sprites-good-or-bad – sandeep 2012-04-12 14:14:30
無論誰告訴你，「不是真正的內容」是不正確的。 – zzzzBov 2012-04-12 14:22:35