如果我有一个页面区域,其中包含用于过滤搜索结果的不同选项(带有链接、复选框、选择等的无序列表)。应该使用什么 html5 标记来包装该过滤器? “section”标签、“nav”标签或其他标签?
<div id="search-filters"> <!-- This should be a div, a nav, a section? -->
<h3>Price</h3>
<ul>
<li>less than 100</li>
<li>100 - 200</li>
<li>more than 200</li>
</ul>
<h3>Brand</h3>
<ul>
<li>Brand A</li>
<li>Brand B</li>
<li>Brand C</li>
</ul>
...
</div>
<section id="search_results">
...
</section>
最佳答案
您可以使用 header
element :
The
header
element represents a group of introductory or navigational aids.
请注意,header
需要在搜索结果的分段元素(在您的情况下为 section
):
<section id="search_results">
<h1>Search results</h1>
<header id="search-filters">
<!-- your filters -->
</header>
<article>
<!-- search result 1 -->
</article>
<article>
<!-- search result 2 -->
</article>
</section>
如果愿意,您也可以在 header
中包含 h1
。如果您随后需要过滤器的样式 Hook ,则可以使用包装器 div
。
如果您的过滤器相当复杂,例如如果您提供许多过滤器,可能带有副标题,您可以在 header
中使用 section
元素:
<section id="search_results">
<h1>Search results</h1>
<header id="search-filters">
<section>
<h2>Filter the results</h2>
<!-- your filters -->
</section>
</header>
<article>
<!-- search result 1 -->
</article>
<article>
<!-- search result 2 -->
</article>
</section>
关于html - 应该使用什么 html5 标签来过滤搜索结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17240667/