将主要内容放入列表项的语义

Question

正如标题所说，我正在考虑将我的 HTML 页面的主要内容放在一个列表项中。我不知道这是多么语义化。列表中的文章并没有非常具体（也许他们不应该）关于被认为是列表项目的内容。所以考虑以下几点：

<ul>
    <li><h5>Main Content</h5>
        <ul>
            <li><article><h1>Article Title</h1>
                    <p>Here's my main, feed-ready content.</p></article></li>
            <li><aside>Related Links</aside></li>
        <ul>
    </li>
    <li><aside>Recommended Links</aside></li>
</ul>

现在，我出于样式目的进行了这种安排（我知道......开始语义对话的最糟糕的地方）。我的<ul>'s 在我的标记中的其他地方使用display:table; 和<li>'s 样式设置display:table-cell;。所以如果我也能把它带到我的主要内容中，那就太方便了。

与其说是寻找最佳实践（尽管随时发表评论），但如果这是语义不正确的做法。

Answer 1

只要它们是 li 的子元素并且 不是 兄弟元素，在 HTML4 和 HTML5 中在语义上是正确且有效的。

一个很好的例子：

<ul>
    <li><article>Article Here</article></li>
    <li></li>
</ul>

一个不好的例子：

<ul>
    <li></li>
    <article>Article here.</article>
    <li></li>
</ul>

here 允许的内容部分详细解释了li 可以包含的内容（基本上是任何flow element，如下所示）。

Answer 2

我认为你不应该这样做。

您页面的主要内容当然可以放入ul。但这取决于内容的种类是否合适。

一个有意义的简单示例：标题为“我最喜欢的水果”的页面，包含一个ul，其中每个水果都是一个li。

但在您的情况下，列表的内容在任何有意义的意义上都没有关联。您的列表关于是什么？一个......好吧，什么，页面组件的列表？如果你走这条路，你还可以使用ul 来表示段落列表、句子中的单词列表或单词中的字母列表。

我并不是说您“不得”这样做（规范对使用 ul 非常开放），但我建议不要这样做，就像我建议不要使用：

<ul>
  <li><h1>Fruits!</h1></li>
  <li>Welcome to my site.</li>
  <li>I write about fruits here and I hope you enjoy your visit.</li>
  <li><h2>What I like about fruits</h2></li>
  <li>They are tasty.</li>
  <li>And healthy.</li>
</ul>

<ul>
  <li>Hi, </li>
  <li>my </li>
  <li>name </li>
  <li>is </li>
  <li>John. </li>
</ul>

以这种不那么有意义的方式使用列表也可能会使一些屏幕阅读器用户感到困惑，因为他们通常具有跳转到页面上的列表和按列表项导航等功能。此外，一些屏幕阅读器可能会宣布“列表项”在阅读您的内容之前。

您只需要它来进行样式设置。所以请改用div 元素（带类）。