Webページの見出しレベルが分かりづらいときないですか?

記事
IT・テクノロジー
以下のスクリーンショットは、とある Webページ(の一部)です。

2021-09-09_101a.min.png

どの行がどのレベルの見出しか分かるでしょうか?

※ Webページの見出しには、h1, h2, h3, h4, h5 などといった階層レベルがあります。

この例の場合、少し大きさの違う見出しが並んでおり、行頭に「#」もあるので、まだ分かりやすい方ではあります。しかし、このどちらかの1つの見出しだけが途中で現れたとしたら、その見出しがどのレベルなのか分かるでしょうか?結構難しいのではないでしょうか。

普段インターネットの記事やマニュアルを読んでいると、ときどきこのような「見出しのレベルが把握できず、文章の構成、つながりが分かりづらい」問題に出会います。これが意外と困るのです。

そこで紹介したいのが、Chromeブラウザの「H-tag」という拡張機能です(ココナラブログにリンクが貼れませんので、検索してみてください)。

この拡張機能を導入して、ツールバーに現れたアイコンをクリック → [Show tag] を選択することによって、今表示されているページの見出しが強調表示されます。
2021-09-09_102a1.min.png

こんな感じで表示されます。
2021-09-09_103a.min.png

強調し過ぎな気がしないでもないですが、Webサイト上の文章をスムーズに読み進めるためには必須と言っていい機能だと思っています。

同じような不満を抱えている方がいましたら、 H-tag の利用をお勧めします。

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す