我应该使用 div 还是 ul li 标签来构建我的 HTML 内容

Question

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

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

基本上我只是想学习如何正确地构建内容，即使在一些非常基本的元素上看起来有点过头了？

我也在使用这里的网格系统：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

这真的取决于内容；不是未来的样子，而是现在的样子。

如果每个项目仅包含 link，请不要使用标题元素 (h2)。标题打开一个新的部分，但如果它不包含其他内容，则没有意义。假设这 6 个项目存在某种关系（这似乎是这种情况，因为它们在同一个 section）。

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

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

</section>

如果一个项目包含更多内容，如描述或图像（即，它成为预告片），您可能需要使用分段内容元素。 article 元素通常适用于此（例如，用于产品、博客文章等）。使用列表 in addition is possible, but, I think, not so common; I wouldn’t recommend it, unless you need an ordered list (e.g., 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>

此结构不仅可用于预告片，还可用于 "full content" 项。

我应该使用 div 还是 ul li 标签来构建我的 HTML 内容

Should I use div's or ul li tags to Structure my HTML content

html

semantic-markup