necotech blog

見出しのないsectionはアリかナシか問題

見出しのないセクショニングコンテンツの是非については、かなり悩ましく思っていたことがありましたが、場合によってはそういうものもあるということで個人的にまとまりました。ただ、原則的には見出しがあるかないかをセクショニングコンテンツの判断基準にしています。その例外になるのではないかという例を、二つ挙げてみます。

[参考]
W3Cによると<section>は〜

例外1 同じテンプレートなのに見出しの有無が変わる場合

たとえば、ブログのアーカイブページがあるとします。記事の一覧自体は共通テンプレートとして使うのですが、場合によっては、その一覧に対する見出しがあったりなかったりすると思います。この場合に見出し無しのブロックだけ特別扱いしてdivにするのは、あまり綺麗とは言えないケースがあります。

<section class="archive">
  <h1>カテゴリ</h1>

  <div class="articles">
    <article>...</article>
    <article>...</article>
    <article>...</article>
  </div>

  <ul class="pagination">
    <li>...</li>
  </ul>
</section>
[見出し有り] カテゴリページ、検索結果ページなど
<section class="archive">
  <div class="articles">
    <article>...</article>
    <article>...</article>
    <article>...</article>
  </div>

  <ul class="pagination">
    <li>...</li>
  </ul>
</section>
[見出し無し] トップページ、2ページ目以降など

例外2 暗黙的にアウトライン構造になっている場合

これは一見判断が難しいのですが、階層構造が確かに存在するのに、見出しが省略されているケースがあります。たとえば、ECサイトでカテゴリの構造が下記のようになっているとします。

  • 雑貨 (親)
    • 日用品 (子)
    • 収納 (子)
    • 家具 (子)

雑貨の一覧ページでは、日用品/収納/家具ページへのリンク、もしくはそれらごとの商品一覧があると予想されますが、セオリー通りに「雑貨」という見出しがあるとは限りません。しかし「雑貨」セクションが存在することは明白です。

<section>
  <section>
    <h2><a href="c1/">日用品</a><h2>
    <ul>...</ul>
  </section>

  <section>
    <h2><a href="c2/">収納</a><h2>
    <ul>...</ul>
  </section>

  <section>
    <h2><a href="c3/">家具</a><h2>
    <ul>...</ul>
  </section>
</section>

上記の構造が考えられますが、非表示の見出しを付けるのもアリか?とも考えています。構造的には正しいと思うのですが、SEO的なペナルティを考えると躊躇してしまうのであまり使いません。(今時これでペナルティなんてことはないとは思うけど。)

<section>
  <h2 class="hide">雑貨<h2>

  <section>
    <h3>日用品<h3>
    <ul></ul>
  </section>

  ...
</section>

ちなみに、上記ケースでパンくずなどにページタイトル(雑貨)が書かれているとして、それを例外的に見出しでマークアップするのは論外です。ほとんどのケースで設計が破綻すると思います。


まとまったとは書きましたが、意見が割れるポイントだと思います。未だに正解はよく分かりません。詳しいソースがあれば誰か教えてください。

Share on Facebook
Share on LinkedIn
Pocket