Question

我有一个div，如果你点击div上的任何地方，它会打开另一个网页。所以基本上整个div是一个巨大的超链接。因此，我有一个 div ，然后在里面我有一个 a 元素然后在里面我有div的所有元素（所以一些 ul < / strong>，一些 p 等。）。

我的问题：当我尝试在w3标记验证程序中验证我的HTML时，我收到错误，因为我在 ul，p等内部strong> a 元素。

实际错误：

文档类型不允许元素“p”;缺少一个 “object”，“applet”，“map”，“iframe”，“button”，“ins”，“del”start-tag

如何让我的HTML有效＆amp;仍然把我的div作为一个大链接？

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p>
        <!--<p>Click here for more information.</p>-->
    </a>
</div>

Answer 1

您只能在HTML 5中的锚点中包含块级内容。您不能使用任何非草稿版本。如果您希望它符合规范*，请切换到HTML 5.

请注意这样做causes problems。

*我们不要谈论<ins> hack，它允许你以有效但不符合的方式进行，因为DTD的表达力不足以禁止它，但规范的文本是

Answer 2

如果可能，请为onclick添加div属性，而不是使用a标记。 E.g：

<div id="rentalAnnc" onclick="window.location.href='facilitiesForHire.html'" style="cursor: pointer">
    <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p>
    <!--<p>Click here for more information.</p>-->
</div>

Answer 3

在锚点中，您可以拥有的是其他内联元素。查看W3C文档：

http://www.w3.org/TR/html401/struct/links.html#h-12.2

Answer 4

这种链接只能使用HTML5进行验证，正如“Quentin”在回复中所说。为此，请将文档的定义（HTML的第一行）更改为：

<!DOCTYPE html>

这样做，您的HTML现在将成为HTML5（魔术！），并且[h1]和[p]中的块元素将被允许在href标记内，符合标准：

<a href=”Destination.html”>
    <h3>Cool link</h3>
    <p>The coolest link in the world.</p>
</a>

当然，这有一个问题，因为您可能会有一个以前的文档定义，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

将doc类型从“strict”更改为“Transitional”或HTML5可以使浏览器渲染元素略有不同（特别是如果它们处于quircks模式），所以你应该再次检查页面是如何呈现的DOCTYPE。

我讨厌自HTML5以来HTML不允许这样做，因为如果HTML的语义需要标题和parragraf作为链接，标准应该允许你这样做。

无论如何，要注意思考这个“锚点内的块级别”将如何影响可访问性，因为链接中的很长内容对于使用屏幕阅读器的盲人来说可能是一个问题。

现在，为您的锚提供一个漂亮的CSS样式，内部有块元素，享受它！：）

Answer 5

您可以将<a>元素的显示设置为阻止，并使用它代替<div>。

所以，如果你有类似的东西： <a href="#"><div style="width: 100px; height: 100px; background-image: url('xyz.png');"></div></a>

改为使用： <a href="#" style="display: block; width: 100px; height: 100px; background-image: url('xyz.png');"></a>

有效的HTML：ul，p，div在'a'元素中

5 个答案: