Web

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

投稿日:

以下のスクリーンショットは、とある Webページです。

見出しのレベルが分かりづらいです

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

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

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

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

そこで紹介したいのが、Chromeブラウザの「H-tag」という拡張機能です。

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

H-tag を使う

こんな感じで表示されます。

見出しが強調表示されます

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

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

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。

Chrome

Chrome 78 の新機能

ome 78 の新機能について簡単に説明します。

Web

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。