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

2023年4月11日 205次阅读

我仍然对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>

最佳答案 我不知道为什么你需要这个列表(< 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>

如果你需要一个用于造型的包装 – 你可以使用好的”< 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

点赞