Question

我仍然对html 5中“section”的使用感到非常困惑。我只想知道以下哪种解决方案更好。列表中的内容彼此不相关。那么我是否必须为每个部分提供一个部分，或者我必须将它全部放在一个部分中。见下文：

解决方案一：

<ul>
<li>
    <section>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
</ul>

解决方案二：

<section>
<ul>
    <li>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </li>
</ul>
</section>

Answer 1

我不确定你为什么首先需要列表（<ul>）。我会删除它，因为将它用于实际列表（或类似列表的元素，即菜单）是有意义的，这不是这里的情况。

现在关于<section>。根据规格：

<section>元素表示文档或应用程序的通用部分。在此上下文中，一个部分是内容的主题分组，通常带有标题。

这消除了你的解决方案＃2。

更多：

我们鼓励作者使用<article>元素而不是<section>元素，因为联合元素的内容是有意义的。

所以在你的情况下，我这样做：

<article>
    <header>
        <h2>Services</h2>
    </header>
    <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Products</h2>
    </header>
    <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Contacts</h2>
    </header>
    <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
    <p>This is text</p>
</article>

如果你需要一个用于造型目的的包装 - 你可以使用好的'<div>

<section>元素不是通用容器元素。当出于样式目的或脚本编写的便利性需要元素时，鼓励作者使用<div>元素。

section元素

关于主题的article

Answer 2

<section>和<div>的相似之处在于它们都用于切片。不同之处在于，如果预期的部分用于样式化，则应使用<div> ...但如果该部分的字面意思是内容，则使用<section>。看看以下引用：

“仅在样式用途或作为样式时需要元素时为了编写脚本，鼓励作者使用div 元素代替...一般规则是section元素是仅当元素的内容被明确列出时才适用... ~WHWWG“

请注意，<section>的一般概念是列出内容，例如<li>。然而，后者更适合指弹......而前者更适合博客等等。

所以，我并不是真的推荐你的任何一种解决方案。您应该使用类似于以下内容的内容：

<div class="blog">
    <article class="post">
        <h2 class="post-title">Services</h2>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Products</h2>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Contacts</h2>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
</div>

我希望有所帮助。一切顺利。

[参考：https://azizsaboor.wordpress.com/2016/01/04/html5-section-vs-div/]

无序列表或周围的部分标签？

2 个答案: