Css 在HTML5中使用精灵表图像的有效方法

我有一些全球图像，我将在整个网站上使用。HTML5使用这些元素的正确标记是什么。我可以不使用src属性而使用img标记吗？或者我应该只使用divs，而不用担心alt标记，或者您可以在代码上看到的方式是好的吗

。社交链接部{
显示：内联块；
垂直对齐：中间对齐；
}
.图标facebook{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-111px-145px；
宽度：23px；
高度：23px；
}
.icon图标google plus{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-134px-145px；
宽度：23px；
高度：23px；
}
.图标instagram{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-124px-111px；
宽度：23px；
高度：23px；
}
.icon-icon-linkedin{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-147px-111px；
宽度：23px；
高度：23px；
}
.图标pinterest{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-170px-111px；
宽度：23px；
高度：23px；
}
.icon图标twitter{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-65px-145px；
宽度：23px；
高度：23px；
}
.图标youtube{
背景图像：url（../images/global/spritesheet.png）；
背景位置：-88px-145px；
宽度：23px；
高度：23px；
}

脸谱网
推特
品特烈
Instagram
谷歌+
LinkedIn
YouTube

我会在

:before

元素上使用它。因为图标后面跟着一个文本，所以这里不需要role属性。此外，图标用于支持“设计”事项中的文本，它不会向文档中添加任何内容，因此您不必为文档添加标题

另外，“img”角色在HTML5中无效。有关角色的更多信息，请参阅此处的文档：

我会这样做：

HTML

有关：before伪元素的更多信息，请查看以下内容：

---

您可以使用伪元素（：：before/：before）并在li（或链接）上设置类，因为这是设计目的，不需要角色属性，或者已经在此处显示的替代文本：）其他没有网站徽标或箭头等文本的UI元素如何？稍后我会将它们添加到精灵中。@tankukukhas如果你的图像有意义，那么它应该位于html（img标记）中，如果它只是设计目的，它可以作为背景或伪元素。在没有任何样式的情况下测试你的页面，看看它是否应该存在。例如，如果你使用箭头，我会使用一个按钮HTML5元素，上面有一个标题和它的效果。它总是取决于，如果它是一个外部链接，那么你可以使用一个带有title属性的链接，并使用一个带有类的跨度上的图标（有点像你在你的例子中所做的）。我也同意@GCyrillus，如果图像有意义，那么它应该在img标签中，因为它是你内容的一部分。背景图像不会在div上被屏幕阅读器或爬虫读取，就好像它是您内容的一部分一样。

     <div class="col-md-2">
        <ul class="social-links">
          <li class="facebook">Facebook</li>
          <...></...>
         </ul>
     </div>

 .social-link .facebook:before {
    background-image: url(../images/global/spritesheet.png);
    background-position: -111px -145px;
    content: '';
    display: inline-block;
    margin-right: 15px /* Set the desired margin here */;
    width: 23px;
    height: 23px;
 }