旁边的标签可以放在文章的第一位吗？答案

【问题标题】：Can the aside tag be first in an article?旁边的标签可以放在文章的第一位吗？
【发布时间】：2017-08-03 13:39:15
【问题描述】：

aside 标记能否在 article 标记中排在第一位？

我一直在快速阅读aside 标签的规范，但真的找不到任何可以向我解释的东西。

任何 HTML5 专家可以解释这是否是一个合法的结构？

<article>
 <aside>
   <h2>Aside Heading</h2>
   <p>
     Aside info
   </p>
 </aside>
 <h2>Article Heading</h2>
 <p>
   Article info
 </p>
</article>

或者aside 在article 内容之后是否重要，如下所示：

 <article>
 <h2>Article Heading</h2>
 <p>
   Article info
 </p>
 <aside>
   <h2>Aside Heading</h2>
   <p>
     Aside info
   </p>
 </aside>
</article>

【问题讨论】：

标签： html w3c-validation semantic-markup

【解决方案1】：

您的第二个 sn-p 是一个更好的选择 - aside 最好不要放在文章标题之前。

原因是，虽然aside 作为article 的第一个孩子不是无效的，但查看the results of trying it in the HTML checker (validator)，您会看到它会导致此警告：

警告：文章缺少标题。考虑使用 h2-h6 元素为所有文章添加识别标题。

该警告不是 HTML 检查器错误。 the HTML outline algorithm 的其他实现（例如 https://h5o.github.io/）也会将该文章视为缺少标题。

显然那里有一个标题——<h2>Article Heading</h2>——但由于 HTML 大纲算法的要求（这可能看起来很奇怪……），如果 aside 元素位于 article 的标题之前，则会导致将article 视为缺少标题的大纲算法。

因此，以大纲算法更喜欢的方式标记您的内容并避免来自 HTML 检查器的警告的一种选择是：

<article>
 <h2>Article Heading</h2>
 <aside>
   <h2>Aside Heading</h2>
   <p>
     Aside info
   </p>
 </aside>
 <p>
   Article info
 </p>
</article>

也就是说，只需将<h2>Article Heading</h2> 移动到aside 之前，但保持其他所有内容相同。

另一种方法是按照您在问题示例中所做的操作：将aside 移动到article 的末尾。如果您查看the results of trying that second example from the question in the HTML checker，您会发现它不会导致任何警告和错误。

【讨论】：