html - 在 HTML5 中使用 Logo 的正确方法

Question

在网站中放置 Logo 的有效方式是什么。

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

和CSS

a.logo
{
    display: block;
    background-color: transparent;
    background-image: url("images/logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: auto;
    height: auto;
}

或

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

Answer 1

第二个选项肯定更好，因为 <a> 中没有内容使用仅 CSS 选项。

<a href="/">
  <img src="#" alt="Company Name">
</a>

如果您打算使用仅 CSS 选项，您需要执行以下操作:

<a href="/" aria-label="Company Name"></a>

或

<a href="/">
  <span class="sr-only">Company Name</span>
</a>

就您的 CSS 而言，您可能希望为带有图像的选项执行此操作:

.logo {
  display: inline-block;
}

.logo img {
  display: block;
}

如果使用非图像选项之一，您需要执行以下操作:

.logo {
  display: inline-block;
  width: /* necessary width */;
  height: /* necessary height */;
  background: /* necessary background values */
}

编辑: 仅屏幕阅读器类以在视觉上隐藏内容但使其可供屏幕阅读器使用:

/* ie9+ */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}