语义 HTML 实践：导航列表
我刚刚意识到，从我刚刚创建的线程中隐藏文本是一个糟糕的尝试，
顺便说一句，Google 不喜欢 隐藏文本，如果你有很多 它，它会认为它具有欺骗性 编码。一个可能没问题，但是 你最好使用 alt 图像标签上的属性。
但有时我需要使用图像作为导航链接列表，如下所示，因此我在 标记上使用 css 图像背景，并使用 隐藏 html 中的实际文本。 span>，
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><a href="#" class="current-header"><span>Home</span></a></li>
<li id="menu-header-portfolio"><a href="#"><span>Portfolio</span></a></li>
<li id="menu-header-profile"><a href="#"><span>Profile</span></a></li>
<li id="menu-header-newsletter"><a href="#"><span>Newsletter</span></a></li>
<li id="menu-header-blog"><a href="#"><span>Blog</span></a></li>
<li id="menu-header-shop"><a href="#"><span>Shop</span></a></li>
</ul>
</div>
是否严重缺乏语义，“它会认为它是欺骗性编码。”因为我由于用图像替换文本而使用了很多隐藏文本？
如果我必须使用图像作为按钮和图像作为导航链接列表，我应该怎么做？
谢谢。
I just realised that hiding text is a bad attempt from a thread I just made,
As a sidenote, Google does not like
hidden text, and if you have a lot of
it, it will consider it deceptive
coding. One is probably fine, but
you'd be better off using the alt
attribute on the image tag.
But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><a href="#" class="current-header"><span>Home</span></a></li>
<li id="menu-header-portfolio"><a href="#"><span>Portfolio</span></a></li>
<li id="menu-header-profile"><a href="#"><span>Profile</span></a></li>
<li id="menu-header-newsletter"><a href="#"><span>Newsletter</span></a></li>
<li id="menu-header-blog"><a href="#"><span>Blog</span></a></li>
<li id="menu-header-shop"><a href="#"><span>Shop</span></a></li>
</ul>
</div>
is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?
what should I do instead if I have to use an image for a button and images for navigation link list?
thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
隐藏文本还意味着某些屏幕阅读器会错过它。
更好的方法是使用文本缩进将文本定位在屏幕之外，在跨度上使用绝对定位将它们也定位在屏幕之外，或者简单地使它们可见：隐藏。
Hiding the text also means it'll be missed by some screen readers.
A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.