見出しのマークアップができない…
契約しているハローメンターではコーディング課題を提出して自分の書いたコードに動画でFBを頂ける。いつも丁寧に説明いただけて本当にありがたい。しかしながら、毎回自分が嫌になるのが
見出しのマークアップ、<h1〜6>の使い方で注意を受ける (T-T)
毎回のように注意を受ける、なのにできない…。
なので、hタグの使い方について今一度整理していく。
hタグとは
<h1>や<h2>の『h』とは、『heading（見出し）』の略称。HTMLにおいてページの重要なテーマや文章の構成を読者や検索エンジンにわかりやすく伝えるために設定するタグ。
Googleなどの検索エンジンの利便性を高めるためにも欠かせず、正しく活用することで読者と検索エンジンに適したWebページが作成できるようになる、そうです。そして、さらにポイントが…
見出しタグの使い方次第でSEO効果が期待できる：
Googleなどの検索エンジンは「クローラー」と呼ばれるロボットがWebページを巡回してその内容を確認し評価するため、見出しタグによって階層が整理されていると『読者にわかりやすい記事！』とクローラーが判断して、Webページの評価向上につながりやすくなる。
わたしは適したWebページを作成できていないのです… )Oo｡.(´_`)
見出しレベルを判断するポイント
見出しレベルを検討する際は1冊の本を想像するといいらしい。
本は「章」と呼ばれるいくつかの話が集まって1冊分の大きなテーマを表現している。
場合によっては「章」だけではなく「章」を構成する「節」があったり、「節」を構成する「項」があったりする。
本の題名 = <h1>とするならば
章の見出し = <h2>
節の見出し = <h3>
項の見出し = <h4>
そこで、わたしがよくやりがちなのが
・h1の次にh3が出現する
これを本に置き換えて考えると
・「章」が存在せず、いきなり「節」で構成されている
ということになってしまうんですね…ﾄﾎﾎ…。
どうして本の構成をイメージできないのか
どうしてこんな見出しのマークアップをしてしまうのか、考えてみた結論が
デザインカンプの文字の大きさや装飾で見出しレベルを判断している
と考えるのが一番納得がいく感じがします。
ページデザインをしている方は情報のアウトラインを把握した上で、あえて文字の大きさを変えたり装飾を施している場合がある。
このことを念頭に入れてコーディングを行わなければいけませんね…。
最後に
コーディングを行う際は原稿をきちんと理解し、正しい見出しレベルでマークアップしないと、そのWebページに何が書かれているか、情報のアウトラインが伝わらなくなってしまう可能性がある、ということを肝に銘じ、見出しレベルは慎重に検討が必要ということがわかりました。
特に私の場合、
デザインカンプに頼りすぎないよう、くれぐれも注意する
が重要となりそうです。
