html - 我应该使用 div 或 ul li 标签来构建 HTML 内容

Question

对于这个例子，我有六个非常基本的项目，它们都共享相同的样式，并且每个链接到一个新的单独页面。所以我只是想知道以下哪些代码示例在语义上是正确的，或者我该如何使其正确？

我希望将此答案应用于这个确切的示例，但我也希望以后在更复杂的版本上使用相同的原则。

基本上我只是想学习如何正确地构建内容，即使它看起来对一些非常基本的元素来说是一个巨大的过度杀伤？

我也在使用这里的网格系统:http://www.responsivegridsystem.com/

感谢您的宝贵时间!

使用 div 标签的代码示例 1(共 2)

 <section class="group global-width col span_12_of_12">
        <h1>Section Title</h1>

            <div class="col span_2_of_12">
                <h2>
                    <a href="#" title="Example title text">Title One</a>
                </h2>
            </div>

        <div class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Two</a>
            </h2>
        </div>

        <div class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Three</a>
            </h2>
        </div>

        <div class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title four</a>
            </h2>
        </div>

        <div class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Five</a>
            </h2>
        </div>

        <div class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Six</a>
            </h2>
        </div>

</section><!-- END OF CODE EXAMPLE ONE -->

使用 ul li 标记的代码示例 2(共 2)

 <section class="group global-width col span_12_of_12">
        <h1>Section Title</h1>
    <ul>
        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title One</a>
            </h2>
        </li>

        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Two</a>
            </h2>
        </li>

        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Three</a>
            </h2>
        </li>

        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Four</a>
            </h2>
        </li>

        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Five</a>
            </h2>
        </li>

        <li class="col span_2_of_12">
            <h2>
                <a href="#" title="Example title text">Title Six</a>
            </h2>
        </li>

        </ul>
</section><!-- END OF CODE EXAMPLE TWO -->

Answer 1

这实际上取决于内容；不是 future 可能是什么，而是现在是什么。

如果每个项目仅包含一个链接，则不要使用标题元素 (h2)。标题打开一个新的部分，但如果它不包含其他内容，则没有任何意义。假设这 6 个项目存在某种关系(看起来确实如此，因为它们位于同一部分)，那么在这里使用列表可能是有意义的。

<section>
  <h1>Section Title</h1>

  <ul>
    <li>Title One</li>
    <li>Title Two</li>
    <li>Title Three</li>
  </ul>

</section>

如果某个项目包含更多内容，例如描述或图像(即，它成为预告片)，您可能需要使用分段内容元素。 article 元素通常适合这里(例如，用于产品、博客文章等)。使用列表 in addition有可能，但我认为不太常见； I wouldn’t recommend it ，除非您需要有序列表(例如 for conveying the ranking in case each item is a search result )。

<section>
  <h1>Section Title</h1>

  <article>
    <h2>Title One</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Two</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Three</h2>
    <!-- more content -->
  </article>

</section>

这种结构不仅可以用于预告片，甚至可以用于“完整内容”项目。