【发布时间】：2009-05-08 12:43:42
【问题描述】：
有没有办法写出有效的标题/链接/图像？ 类似的东西
<a href="index.html"><h1 id="logo">Company name</h1></a>
（将图像设置为背景，文本向左移动，因此通过 css 不可见）
【问题讨论】：
标签： html header validation
【发布时间】：2009-05-08 12:43:42
【问题描述】：
类似：
<h1 id="logo"><a href="index.html">Company Name</a></h1>
#logo a {
display: block;
width: 200px; /* width and height equal to image size */
height: 100px;
background: transparent url(images/logo.png) no-repeat;
text-indent:-9999px;
}
原始标记的问题在于 <a> 是内联元素，而 <h1> 是块元素。内联元素不能包含块元素。
【讨论】：
-
使用 css 隐藏文本是个坏主意。为什么不使用图像和 alt 属性？ （这就是它的用途）
不，锚元素不能包含 h1 元素。
此外，背景图像应保留给背景 - 徽标不是背景，它是重要信息。
<h1><a href="/"><img src="/images/logo.png" alt="Company Name"></a></h1>
请记住，虽然公司的标识可能是主页上最重要的标题，但它可能不在其他页面上 - 因此通常应该将其降级为其他页面。
【讨论】：
-
关于不在子页面上使用
的好处。我认为徽标是否应该包含
很大程度上取决于相关设计。
-
在 SEO 中 img alt 与 h1 相比如何？
-
AFAIK 它没有任何区别，谷歌会忽略图像并读取 alt 文本并且它不处理 CSS（我认为......）
-
我有 99% 的把握 H1 的排名比 img alt text 更好。我自己非常喜欢使用 replace-H1-with-an-image CSS 'trick'。
这是无效的 HTML 代码，但您可以使用带有有效代码的 CSS 来实现您想要的：
HTML
<h1 id="logo"><a href="index.html">Company name</a></h1>
CSS
h1 a:link, h1 a:visited {
display: block;
}
您可以进一步设置 A 元素的样式以实现您想要的效果。
【讨论】：
-
你不需要解决状态。
-
@Gumbo，我相信这是我由于一些 IE 6 错误而产生的本能，但不记得是哪个。
这是有效的，我认为实现了您正在寻找的东西，即整个图像是到主页的链接。
<a href="index.html"><img src="logo.png" id="logo" alt="Company Name" /></a>
如果您所做的只是在示例中包装 H1 标记，则链接只能在文本周围单击。这将排除 H1 标签的边距。
这不需要 CSS 来隐藏文本，因为公司名称位于 ALT 属性中，可供 Google 和屏幕阅读器读取。
另一种方式：
如果您确实需要一张图片作为背景并在前景中显示文本，还有另一种方法：
<body>
<div id="header">
<h1>Some Text Here</h1>
</div>
<div id="main-content">
... lots of content here ...
</div>
</body>
CSS：
#header {
height: 55px; // The height of you image
width: 780px; // The width of the image
background: url(picture.png);
margin: 0 auto; // To keep this div centered
}
#header h1 {
font-family: 'Times New Roman';
text-decoration: bold;
margin-left: 55px; // This makes the text come in 55px from
// the left of the containing div. Adjust to suit.
margin-top: 10px; // Same as above.
}
如果您想经常更改文本，这是一个有用的方法。引用当天类型的事情，或者如果你的老板总是要求你调整背景图像。
【讨论】：