html - 仅包含图像的语义菜单

我正试着做一个只有图像的菜单。有谁能告诉我应该如何用最语义化的方式标记它吗？我最好的猜测是这样的：
HTML

<ul>
    <li><a href="#" class="menu" alt="homepage" id="home"></a></li>
</ul>

CSS

.menu {width: 40px; height: 40px}
#home {background: url('...')

编辑：查询是因为ineed使用空的<a>标记，或者我可以将<img>标记放入<a>标记中。

最佳答案

首先，如果你愿意尊重HTML5的语义，你的菜单应该包装在一个<nav>标签中。
其次，应该用alt=""标记（MDN for more info上的title=""属性替换<a>。
第三，应该将<img>标记与alt=""属性一起使用，这样可以添加更多的语义上下文。
您的菜单可能如下所示：

<nav>
    <ul>
        <li><a href="" title=""><img src="" alt="" /></a></li>
        ... OTHER LINKS ...
    </ul>
</nav>

关于html - 仅包含图像的语义菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24510822/