我应该将 <i> 嵌套在 <a> 中还是将 <a> 嵌套在 <i> 中？

Question

我正在使用锚标记，超链接中显示的文本应该是斜体的。使用锚点时，我是在文本本身上使用斜体标签还是将整个锚点标签设置为斜体？哪个是正确的语法？

例子：

<a href="http://www.google.com/"><i>Google</i></a>

或者：

<i><a href="http://www.google.com/">Google</a></i>

Answer 1

两者都是完全有效的。请参阅HTML5 规范，其中解释了标签的语义和用法。a在元素上：

4.5.1a元素

[...]

可以使用该元素的上下文

需要措辞内容的  地方。

元素可以使用的上下文是该元素有效并且可以使用的地方¹。规范中的措辞内容定义如下：

措辞内容是文档的文本，以及在段落内标记该文本的元素。连续的措辞内容形成段落。

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite
code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark 
math meter noscript object output progress q ruby s samp script select small span strong 
sub sup svg template textarea time u var video wbr text

因此，措辞内容是指文档的文本或标记文本的元素，例如a超链接或i斜体。上面列出的任何元素都适用。如果你看一下i元素：

4.5.17i元素

[...]

可以使用该元素的上下文

需要措辞内容的  地方。

从规范中可以看出，a和i可以在相同的上下文中使用，即短语上下文。因此，我们可以得出结论：

• a元素内的元素很好i，因为a元素可以用于短语内容。i正在措辞内容，因此它是有效的。
• i元素内的元素很好a，因为a元素可以用于短语内容。a正在措辞内容，因此它是有效的²。

撇开有效性不谈，你选择哪种方式完全取决于你自己，一种方式并不比另一种方式更有效。

¹这通常取决于元素是块级还是内联，但 HTML5 已删除这些类型，转而采用一些更具描述性的类别，请在 MDN 上了解更多信息。

²请注意，即使a是短语内容，您也不能将嵌套a在另一个 中a。这是因为a内容模型不适用于交互式内容。其他限制可能适用于其他元素。