将div放入锚中是否正确？

Question

我听说将一个块元素放在内联元素中是一个HTML罪恶:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

但是,如果你display:block在样式表中设置外部锚点的样式呢？还是错吗？块级和内联元素的HTML 4.01规范似乎这样认为:

样式表提供了指定任意元素的呈现的方法,包括元素是呈现为块还是内联.在某些情况下,例如列表元素的内联样式,这可能是合适的,但一般来说,不鼓励作者以这种方式覆盖HTML元素的传统解释.

有没有人对此问题有任何进一步的提示？

Answer 1

根据您要使用的HTML版本:

• HTML 5声明<a>元素"可以围绕整个段落,列表,表格等,甚至整个部分,只要在其中没有交互式内容(例如按钮或其他链接)".

• HTML 4.01指定<a>元素只能包含内联元素.A<div>是块元素,因此它可能不会出现在块内<a>.

  当然,您可以自由地设置内联元素的样式,使其看起来像一个块,或者确实是一个块的样式,以便它以内联方式呈现.术语inline和blockHTML中的使用是指元素与文档的语义结构的关系,而CSS中的相同术语更多地与元素的视觉样式相关.如果你以一种块状方式显示内联元素,那很好.

  但是,当CSS不存在时,您应该确保文档的结构仍然有意义,例如通过屏幕阅读器等辅助技术访问时 - 或者实际上在强大的Googlebot检查时.

Answer 2

不,它不会验证,但是它通常可以在现代浏览器中使用.话虽这么说,在你的锚中使用一个跨度,并display: block在它上面设置,这肯定会在任何地方工作,它将验证!

Answer 3

W3C文档不使用像错误和罪恶这样的概念,但它确实使用那些提供手段,可能适当和沮丧的概念.

实际上,在第4节的第 2段中,4.01规范将其单词逐条列举如下

本文件中的关键词"必须","不得","必须","应该","不应该","应该","不应该","推荐","可以"和"可选"按照[RFC2119]中的描述进行解释.但是,为了便于阅读,这些词在本说明书中并未以全部大写字母出现.

考虑到这一点,我认为最终的陈述是在7.5.3块级和内联元素中,它表示

通常,内联元素可能只包含数据和其他内联元素.

条件"通常"似乎引入了足够的歧义,说HTML 4.01确实允许内联元素包含块元素.

当然,CSS2有一个显示属性值,内联块,似乎适合您描述的目的.我不确定它是否得到广泛支持,但似乎有人预料到需要这种行为.

这里的DTD似乎不太宽容,但DTD的文本遵循规范:

HTML 4.01规范包含无法在DTD中表达的其他语法约束.

在另一个注释中,您建议您通过将其包装在锚点中来激活块.我不相信HTML禁止这一点,CSS明确允许它.因此,为了回答关于它是否正确的标题问题,我说是的.按照标准,它有时是正确的.

Answer 4

2023 年 9 月更新：最新 HTML5 版本

• 放置div内部a标签没有任何问题。事实上，您可以在a标记内放置任何内容，只要它们被分类为transparent，除了没有后代可以是interactive content（例如：按钮或输入）或a元素，并且没有后代可以具有指定的tabindex属性。请参考这些文档：
  • https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#properties。
• 如果你检查Angular Material 官方网站（领先的 UI 组件库之一），你可以看出他们确实使用了divinside aelement。

这是我从他们的网站上获取的示例：

<a href="/components/badge">
  <div class="mat-list-item-content">
    <div mat-ripple="" class="mat-ripple mat-list-item-ripple"></div>
    <div class="mat-list-text"></div>
  </div>
</a>

Answer 5

使用HTML5规范......现在可以将块级元素放在内联元素中.所以现在把'div'或'h1'放在'a'元素中是完全合适的.

Answer 6

你不能把<div>里面<a>-它不是有效的（X）HTML。

即使您使用 display: block 为 span 设置样式，您仍然不能在其中放置块级元素：(X)HTML 仍然必须遵守 (X)HTML DTD（无论您使用哪个），无论 CSS改变事物。

浏览器可能会根据您的需要显示它，但这并不正确。

Answer 7

块级元素<div>可以用<a>HTML5 中的标签包装。尽管 a<div>被认为是流内容的容器/包装器，并且根据MDN<a>被认为是流内容。从语义上讲，创建充当块级元素的内联元素可能会更好。

Answer 8

如果您想避免将 div 放置在锚标记内的语义麻烦，只需将锚标记放置在与 div 相同的水平上，将它们全部用一个带有位置：相对的容器包裹起来，使您的锚标记位置：绝对并将其扩展为填充容器。另外，如果它不在内容流的末尾，请确保在其中添加 z 索引以将其放置在内容上方。

按照建议，我添加了标记代码：

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

和CSS：

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}