html - section 标记在无序列表内还是周围？

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> .根据规范:

The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

这消除了您的解决方案 #2。

更多:

Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.

所以在你的情况下我会这样做:

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

如果您出于样式目的需要包装器 - 您可以使用好的 ol' <div>

The <section> element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead.

---

section元素

安article主题