8

検索結果をフィルタリングするためのさまざまなオプション (リンク、チェックボックス、選択などを含む順序付けられていないリスト) を含むページの領域がある場合。そのフィルターをラップするには、どの 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>
4

3 に答える 3

8

header要素を使用できます：

このheader要素は、導入またはナビゲーション補助のグループを表します。

は、検索結果のセクション要素 (この場合は) に含まれ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>

h1必要に応じて、も に含めることができますheader。フィルターのスタイリング フックが必要な場合は、 wrapper を使用できますdiv。

フィルターがかなり複雑な場合、たとえば、多くのフィルターを提供し、おそらく小見出しがある場合は、 のsection中に要素を使用できheaderます。

<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>
于 2013-06-22T19:19:22.753 に答える
2

どうですか：

<nav role="search">
...
</nav>

私はそれが完璧ではないことを知っています..

  1. nav標準では、使用すべきであると実際に述べているわけではありませんが、明らかに別のページに誘導するものです (これはそうです)。menuコマンド ( 1 , 2 ) と見なすこともできるため、を使用することもできますが、これ以上良いものはありません。
  2. すでに検索されたものをフィルタリングするとおっしゃっていたので、実際には「検索」の役割ではありませんが、それに最も近いと思います。
于 2014-04-07T13:55:25.007 に答える