html - 执行此 HTML 的正确方法是什么：带有链接图标的标题

Question

我知道如何使这些示例看起来和行为相同。但我想知道哪种方法是构建 HTML 结构的正确方法。

1. <a><img><h1></h1></a>- 看起来不对，因为内联元素在块元素内

2. <a><img></a><h1><a></a></h1>- 相同的a元素被定义了两次。我也不确定标头内的标记

3. 还有其他解决方案吗？

Answer 1

根据 HTML5 草案（并被浏览器接受），标记 (1) 有效，但当前的 HTML 规范无效。如果两个链接指向同一个目的地，则标记 (2) 违反了可用性和可访问性原则。以下标记很自然，仅使图像和标题文本可点击（不是h1默认情况下占据可用宽度的整个元素）：

<h1><a href=...><img src=... alt=...>Heading text</a></h1>

标题内始终允许链接，但反之则不然。

另一方面，很少有充分的理由让标题可点击，我想知道为什么图像在那里。如果你的意思是这应该是一个标题，一个整体的网站标题，而不是一个标题，如果图像实际上是一个公司徽标，那么适当的标记宁愿是这样的

<div class=header><a href="/"><img alt=ACME src=acme-logo.png> – American Company
Manufacturing Everything</a></div>

（保留h1整个页面标题）。