ソース開く必要ナシ。Hタグをハイライトするブックマークレット「html-highlighter」を公開しました

仁田坂淳史 2015.06.24 開発

ソース、どうやって確認していますか？

正しいマークアップ、HTML構造化の観点から、hタグ（h1, h2, h3…）の使いどころが大事なのは、メディア運営に限った話ではないはず。

とりあえず、SEO関連記事やHTMLについて調べてみるんだけど、記事によって書いてることが違ったりして、どうしていいやら。結局のところ、他サイト、有名サイトではhタグをどうやって使ってるんだろう？
そこで、構造化がしっかりしてるサイトでhタグがどのように使われてるか参考にする、あると思います。

今まではどうやっていたのか

１. HTMLソースを開いて確認する

ブラウザで見ているWebページ上で、 Command + Option + u とする（Chromeの場合）と、HTMLソースが別タブで開く。さらに Command + f とやって、ページ内を「h1」などのキーワードで検索する。と、ハイライトされ「あぁ、ここね」となります。

めんどくさい……。

２. デバッガを開いて確認する

Webページ上で、 Command + Option + i とすると、「デベロッパーツール」が立ち上がりますが、上部のバーに表示されている虫眼鏡アイコンをクリックすると、Webページ上でカーソルが乗った部分がハイライト。クリックすると、デバッガ上でHTMLのその箇所を指し示してくれます。……その箇所が何のタグなのかをHTMLで確認、「……あぁ、ここがh1タグなのかぁ」という具合。

やっぱりめんどくさい。

これからはhtml-highlighterを使いましょう

これ。

html-highlighter

ブックマークに追加して使ってください。

見たいページを開きます。あとは、あらかじめブックマークバーに追加しておいたこのブックマークレットをクリックするだけ。
そうすると、無駄にGoogle Material Designのカラーコードでハイライトされつつ、テキストで「〇〇 | h1」のように、タグ名も追加されるので、HTMLソースを確認しにいったり面倒な作業が要らなくなります。

これを使い始めると、いろんなページでポチポチとタグ確認するのが楽しくなるハズ。