在HTML5中使用徽标的正确方法

在网站上放置徽标的有效方式是什么

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

或

第二个选项肯定更好，因为只有CSS选项的
中没有内容

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

如果使用其中一个非图像选项，您需要执行以下操作：

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

编辑：
Screen reader only类以直观方式隐藏内容，但使其可供屏幕阅读器使用：

/* 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;
}

您有两种不同的选择：

HTML:

使用带有CSS属性的
div
或
a
标记
背景图像：url（“images/logo.png”）
在这种情况下，您的徽标是光栅图像（pnh/jpg/gif）

SVG:

使用SVG，您的徽标是矢量的，可以在不损失任何分辨率的情况下放大或缩小，如果您计划创建一个响应性设计，其中徽标大小可能会因设备而异，这可能是一个很好的解决方案

SVG链接示例：
这取决于您希望它的定位方式。您提到的第一种方法很困难，因为无论父节点/元素是什么，您都将其定位为内部的元素（位置将取决于父节点/元素）

也就是说，当使用文本以外的任何内容时，我更喜欢第二种方法。您必须意识到，当您设置
标记的CSS属性时，它们旨在封装文本（而不是图像），因此当它被渲染时，您必须进行（读取：）奇怪的调整，否则您将不必进行这种调整（如在CSS中设置
行高
属性而不是
高度
属性）

我肯定会选择第二种方法。

如果它看起来很有趣，请确保在CSS中将
a
标记的
文本装饰属性设置为
none
。
我建议第二个更好。我将使用img标记。对用户更好（可能希望保存徽标的用户）或者在搜索引擎中为其编制索引。我支持第二个建议。
a.logo
选择器可能不需要
a
部分，它可以是
.logo
。这是基于意见的，这样的意见是不允许的。aria标签和sr only类有什么关系？只需在a上使用
alt
标记即可如果您关心可访问性，请选择nchor元素。请注意，锚元素上的@EdmundReed-alt将不起任何作用。@Alochi，它将由屏幕阅读器读取，否？这可能是aria标签标记的意图。@EdmundReed-否，它不会。
<a href="/" aria-label="Company Name"></a>

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

.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;
}