HTML5におけるタイトルのマークアップについて、考え続けている

2013年11月19日 | HTML5

実は、いままで職場で「ウェブに関して誰かに教えてもらう」という経験があまりありませんでした。実務で不足のない程度にはHTML5やCSS3を扱えるようになってきたと思いつつも、基礎をしっかり固めるために、目下お勉強中です。

ちなみに、現在は次の本を読んでいるところ。
HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

今回は、ずーっと頭の片隅で疑問に思っていたことがあり… 他のマークアップエンジニアのみなさまはどうされているんだろう?と思い、書き連ねてみます。

タイトルにh1要素のみを使うか?はたまたh2~h6要素も使うか?

HTML5でコーディングする際、タイトルをマークアップするとき、h1要素のみを使用することがOKとみなされています。また、従来のようにh2~h6要素を使うことも認められています。
ささやかなことではありますが…どちらを使用するのが、コーディングの効率が上がるのか?また、後々のメンテナンスが簡単になるのか?と、ふんわり悩んでいます。
参考: h1~h6 要素 – セクション – HTML要素 – HTML5 タグリファレンス – HTML5.JP

例)セクション要素を使用しタイトルにh1要素のみを使用する

<h1>ページタイトル</h1>
<section>
<h1>タイトル1</h1>
</section><section>
<h1>タイトル2</h1>
</section><section>
<h1>タイトル3</h1>
<section>
<h1>タイトル4</h1>
</section></section><section>
<h1>タイトル5</h1>
</section>

例)セクション要素を使用しタイトルにh2~h6要素を使用する

<h1>ページタイトル</h1>
<section>
<h2>タイトル1</h2>
</section><section>
<h2>タイトル2</h2>
</section><section>
<h2>タイトル3</h2>
<section>
<h3>タイトル4</h3>
</section></section><section>
<h2>タイトル5</h2>
</section>

h1要素のみを使用する場合に思い当たるメリット、デメリット

現在のアウトラインレベルがわかりにくくなりがち

ソースに適切なインデントを入れることで回避可能。
また、ブラウザチェックの際、ChromeではHTML5 Outlinerなどのアドオンで視覚化出来ます。

セクション要素を必ず挿入する必要がある

仕方ないことですが、ソースがごちゃごちゃしがち。

コーディングが楽

h1だけを入力していけばよいので、その点では悩みません。

h2~h6要素も使用する場合に思い当たるメリット、デメリット

現在のアウトラインレベルがわかりやすい

h○要素の数字を見れば、一目瞭然です。
また、セクション要素を必ずしも入れずとも暗黙的にセクショニングが可能(あまり推奨されていないようですが…)

「次はh2?h3?どっち?」ということが起きる、かも?

間違いがない、とは言い切れない?
でもこれはh1要素に統一した場合に、セクション要素を挿入しないということも想定されるので、あまり重要な問題ではないかも。

現在実務では「h1要素のみを使用」してコーディングしているため、どうしても前者のほうが思い当たる要素が多いのですが…
「h2以下の要素も使用」していらっしゃるかたで「こんなメリットがあるよ~」というご意見がありましたら、ぜひお伺いしたいです!

  • このエントリーをはてなブックマークに追加

コメントを残す

*