ブログ文の書き方5、”見出し”はセマンティックに使おう!

“見出し”タグはh1~h6までの6種類

HTML5から、HTMLタグの記述をより構造的な意味を持つセマンティックな記述にしましょう!っということで、Sectioning Contentsと呼ばれる、header、section、footerなどというようなタグが追加されましたが、もともと存在する”見出し”タグ(h1-h6)もこのSectioning Contentsの一部に組み入れられるようです。W3C、「Sectioning content

公用文などの見出しには、編、章、節、款、目の5区分があるようです。その上が「題」でしょうから、どこも階層は6階層ぐらいまでにしておこう!みたいな感じでしょうか?

ヘッディングタグの使い方

記事ページにおいては、最大の見出しである<h1></h1>タグは、記事タイトルに使用されています。
ちなみに、記事の「題」は1つであるためか、最大見出しh1タグも、2つあるとHTML validation serviceでエラー扱いとなります。

このため、記事本文での最大見出し「編」は、<h2></h2>となります。

セマンティックな"見出し" (heading)
セマンティックな”見出し” (heading)

上図の記事の場合、

    • 第1編(導入)
      • 第1章(説明1)
      • 第2章(説明2)
        • 第1節(説明2の具体例1)
        • 第2節(説明2の具体例2)
    • 第2編(まとめ)

という構成になっています。

headingタグを使用することによって、ロボットも同じように理解できるらしいです。凄いですね。

これにsectioningタグのnavなどを使って、記事の目次を作って、アンカーテキストでジャンプできるようにしている凝った記事をよく見かけます。ああいうのは専用のテーマを選ぶと簡単にできるようになるのでしょうか?
手書きは面倒くさくて私はパスです。

私は初めてのテンプレートのデザインでh4タグとh6タグが好きだったので、この2つを組み合わせて書いたりしていましたが、ダメな書き方であることがわかり、猛省しました。

ヘッディングタグのデザイン例

CSSでちょこちょこ書き換えるのも楽しいですが、このブログは、Font Awesomeを文頭に表示しています。関連記事「Twenty Seventeen、Font Awesomeで 見出しデザイン を変更

まとめ

記事の構成を読者(人間)にわかりやすく伝えるだけではなく、ロボットにとってもわかりやすくなるみたいです。ヘッディングタグは、デザインではなく、番号で選びましょう!(←私だけかもしれませんが…)

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください