Question

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

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

基本上我只是想学习如何正确地构建内容，即使它在一些非常基本的元素上似乎是一个巨大的过度杀戮？

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

感谢您的时间！

代码示例1 of 2使用div标签

 <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 of 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

这取决于内容;不是将来可能是什么，而是目前的情况。

如果每个项目仅包含一个链接，请不要使用标题元素（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是可能的，但我认为并不常见; 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>

这种结构不仅可以用于戏弄，甚至可以用于＆＃34;全部内容＆＃34;项目

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

1 个答案: