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命令在标题上方显示作者。在语义上对我来说似乎是正确的，但是甚至需要吗？标记中的顺序是否有优点或缺点，或者根本无关紧要？

Answer 1

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

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

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

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

Answer 2

在链接到相应文章的标题列表中，不应将标题元素用作标题。每个标题元素都会创建一个节（在文档大纲中带有一个条目），在这种情况下，则不予保证。

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

在不使用标题元素时，无论使用顺序author-headline还是headline-author都在语义上无关紧要。选择适合您的用户的东西。

但是，由于您再也没有块级元素（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顺序很重要。标题元素设置跟随的所有内容的范围（直到达到更高或相同级别的标题），因此链接的开头和作者名称（如果使用顺序author-headline），则不会成为该标题及其隐含部分的一部分。相反，它们将成为上一节的一部分（即第2条的作者将成为第1条的一部分）。

标题和作者的html结构

2 个答案: