标题和作者的html结构

Question

我和我的同事正在讨论我们都无法在网上找到任何答案。

我在主页上有一个文章标题列表，并且设计模型的作者在标题上方。现在的标记是：

<a href="">
<h3>Headline 1</h3>
<span>Author Name</span>
</a>

<a href="">
<h3>Headline 2</h3>
<span>Author Name</span>
</h3>

然后我会使用 flexbox css order 将作者呈现在标题上方。从语义上讲，这对我来说似乎是正确的，但这甚至需要吗？是否有任何优点或缺点，或者标记中的顺序根本不重要？

Answer 1

标记中的顺序无关紧要。当 flexbox 允许您更改元素的顺序时，这是允许的。不允许在 a 元素中包含 h3。

通常，块级元素可能包含内联元素和其他块级元素。

内联元素只能包含数据或其他内联元素。

元素a 是内联元素。元素h3 是块元素。

Answer 2

在链接到相应文章的标题列表中，您不应使用标题元素作为标题。每个标题元素都会创建一个部分（在文档大纲中包含一个条目），在这种情况下这是没有保证的。

您可以使用cite element 作为作者姓名和/或标题。

当不使用标题元素时，无论您使用作者-标题还是标题-作者的顺序在语义上都无关紧要。选择对您的用户更清楚的内容。

但是，由于您不再有块级元素（h3），您应该引入某种标点符号（例如，: 或 ()）以明确作者/标题开始，或者您可以将作者姓名放在链接之外。

展示几个不同的选项：

<!-- 'cite' element only for the headline -->

<cite><a href="">Headline</a></cite> (Author)
Author: <cite><a href="">Headline</a></cite>

<a href=""><cite>Headline</cite> (Author)</a>
<a href="">Author: <cite>Headline</cite></a>

<!-- one 'cite' element for both -->

<cite><a href="">Headline</a> (Author)</cite>
<cite>Author: <a href="">Headline</a></cite>

<cite><a href="">Headline (Author)</a></cite>
<cite><a href="">Author: Headline</a></cite>

<!-- two 'cite' elements -->

<cite><a href="">Headline</a></cite> (<cite>Author</cite>)
<cite>Author</cite>: <cite><a href="">Headline</a></cite>

<a href=""><cite>Headline</cite> (<cite>Author</cite>)</a>
<a href=""><cite>Author</cite>: <cite>Headline</cite></a>

---

如果您要保留 h3，并且您不会使用分段内容元素（如 article），那么 HTML 顺序确实很重要。标题元素设置跟随的所有内容的范围（直到它到达更高或相同级别的标题），所以链接的开头和作者姓名（如果使用作者标题顺序） , 不会是该标题及其隐含部分的一部分。相反，它们将成为上一节的一部分（即，第 2 条的作者将成为第 1 条的部分）。