yuheijotaki.com

HTML セクショニングと見出しのマークアップ

最近の案件でマークアップに関していろいろ気づきがあったのでメモしておきます。

見出しタグが入らないエリアは <section> で囲まない

良くないと思われる例

<section>
  <p>テキストです。</p>
</section>

改善例

<div>
  <p>テキストです。</p>
</div>

<section> の中には見出しタグはひとつにする

良くないと思われる例

<section>
  <h1>見出しです。その1</h1>
  <h2>見出しです。その2</h2>
</section>

改善例

<section>
  <h1>見出しです。その1</h1>
  <section>
    <h2>見出しです。その2</h2>
  </section>
</section>

もしくは

<section>
  <h1>
    <span class="title01">見出しです。その1</span>
    <span class="title02">見出しです。その2</span>
  </h1>
</section>

見出しタグは順番にマークアップする

良くないと思われる例

<section>
  <h2>見出しです。その1</h2>
  <h1>見出しです。その2</h1>
</section>

改善例

<section>
  <h1>見出しです。その1</h1>
  <h2>見出しです。その2</h2>
</section>

できない場所は無理やりJSで入れ替えるなども方法としてはあがるようですが、見出しがh1→h2→h3の順でないと、SEOに悪影響あったりします? などを見るとSEO的には関係なさそうです。

<nav> の中には見出しタグがあったほうがよい

良くないと思われる例

<nav>
  <ul>
    <li><a href="#">ナビゲーション</li>
    <li><a href="#">ナビゲーション</li>
    <li><a href="#">ナビゲーション</li>
  </ul>
</nav>

改善例

<nav>
  <h2>メニュー</h2>
  <ul>
    <li><a href="#">ナビゲーション</li>
    <li><a href="#">ナビゲーション</li>
    <li><a href="#">ナビゲーション</li>
  </ul>
</nav>

要素構成上の問題でもありますが、<nav> タグ内に見出しがないと Untitled NAV となってしまいます。
nav要素内に見出しがない |  clear sky source
ただどうやらエラー認定はされないようでここはあまり気にする必要はないかもしれません。

まとめ

宗教論争的な面が多くありそうな話なのでその時々のルールを守って快適に仕事が進むのがいいと思いますが、
基礎的なルールで間違いていたところがあったので、まとまった時間でもう少し学びたいなと思いました。
<article> や <aside> あたりもしっかりしようと思います。
HTMLそれなりに触っては来たけど何も分かっていない気がしてきました。

他参考サイト