我仍然对 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>
如果您出于样式目的需要包装器 - 您可以使用好的 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主题
关于html - section 标记在无序列表内还是周围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13630567/