这种结构在 HTML5 中是有效的，因为在 HTML5 中，锚可以包装除其他锚和表单控件之外的几乎所有元素。现在大多数浏览器都支持这一点，并将问题中的代码解析为有效的 HTML。下面的答案写于 2011 年，如果您支持旧版浏览器（*咳嗽* Internet Explorer *咳嗽*），则可能会有用。

没有 HTML5 解析器的旧浏览器（比如 Firefox 3.6）仍然会对此感到困惑，并可能弄乱 DOM 结构。

HTML4 的三个选项 - 使用所有内联元素：

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

然后风格与 display: block

使用 JavaScript 和:hover：

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

和（假设 jQuery）

$('.layout').click(function(){
    // Do something
}):

和

.layout:hover {
    // Hover effect
}

或者最后使用绝对定位来放置一个a带有 CSS的锚点来覆盖整个.layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

和 CSS：

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

当然，这不适用于旧版本的 IE。

虽然<a>标签不允许包含<div>元素，但允许包含其他内联元素，例如<span>.

当我遇到问题时，我将 div 标签换成了<span>. 由于 span 标签是一个内联元素，您需要将 adisplay:block应用于<span>元素的 css，以使其表现得像<div>块元素。这应该是有效的 xhtml 并且不需要任何 javascript。

下面是一个例子：

<a href="#">
    <span style="display:block">
        Some content. Maybe some other span elements, or images.
    </span>
</a>

另一个简单的解决方案 - 只需向 div 添加一个 onclick 事件处理程序：

<div class="layout" onclick="location.href='somewhere'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

这对我很有用，但有一个小问题。我不确定这对搜索引擎有多友好。我担心谷歌的网络爬虫可能找不到这个链接，所以我也倾向于在块中的某个地方包含一个传统的 A HREF 链接，如下所示：

<div class="layout" onclick="location.href='destination_url'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a href="destination_url">This is a link</a>
</div>

Timothy 的解决方案是正确的......而不是在 div 周围包裹一个锚......你只需使用 display:block 为锚元素提供布局并添加锚的大小和宽度......

.div_class   { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }

<div class='div_class'><a href="#"></a></div> 

HTML 提供了两种通用元素，其中div是自然块元素，span是自然行内元素。所有其他元素类似地分配为自然块或内联。

现在，虽然两者都可以通过 cssdisplay成为inline, inline-blockor 中的任何一个，block但出于封闭目的，它们仍然被视为它们的自然本身，因此出现警告消息。豹子和斑点之类的东西。

然而，CSS是只意味着是什么使一个元素看起来像（演示），但实际上没有成为像（功能），所以它不会改变元素的基本性质，但在实践中变得非常模糊。一个span做block成为一个恶霸是踢一切断了线，这是非常非inline类行为。

因此，为了减轻其自然行为和 css 引起的行为之间可能存在的冲突，最好允许：

• div或任何自然块标记只能是block或inline-block。
• span或任何自然的内联标签只能是inline或inline-block。

这也将减少倾向于构建可能最终产生错误和警告消息的页面结构。

基本上，永远不要在任何深度的自然内联标签中嵌入自然块标签。

之所以会有真正的区别，可能是因为在最初构想 HTML 时，它对 HTML 的用途有一个简单的想法。

当然，框架制造商通过在任何地方使用无数的divs解决了很多这些嵌入到什么地方的问题，“divitis”诞生了，并且在每个框架中仍然存在并且很好地存在。只需F12在几乎任何商业网页上按下浏览器并深入查看十几个div。这个页面有 15 个不间断的divs级别。

不难看出为什么只选择divs 是有道理的。例如，一个p标签可能有一堆指向不同站点的链接，这是可以的，因为块中允许内联链接p。但是，如果不想在这些 url 中看到查询变量，那么buttons 是必需的。如果只有一个，那么 thep可以放在 a 中form，因为 ap不能包含 a form。

formaction按钮上的属性可用于定位表单默认值以外的 url，但它仍然不允许独立表单，每个表单都有自己的一组隐藏输入。按钮可以使用该form属性将其与不是祖先的表单一起使用，但跟踪起来可能会很麻烦。

但是，要使指向不同站点的多个链接显示为一个段落的一部分，唯一的方法是使用 adiv而不是 the p，然后将每个链接包装button在自己的form集合中inline。大多数框架必须应对如此复杂的场景，以至于嵌套divs 是唯一的出路。

这意味着他们实际上只需要为每个目的管理一个标签，并将其作为一个孤立的环境进行管理。所以原本偶尔使用的功能分组标签变成了网络的乐高积木。他们都不会因为匆忙转换为 HTML5 语义标签而冒险破坏他们的框架。最后，语义标签只真正适用于相当静态的内容，而不是丰富的交互式网站。