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

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元素（使用类）。