HTMLのタグ打ちするならChrome拡張のHTMLエラーチェッカーが便利

本業のWebデザイナー、HTMLコーダーでなくとも少々のHTMLタグくらいなら知っている、あるいは実際にブログ記事で書いている、という人もけっこういると思います。

そんなタグ打ち派の人におすすめなHTMLエラーチェッカーのお話。

WYSIWYGエディターは一長一短

WYSIWYG（ウィジウィグ）という言葉自体、あまり耳にしなくなったので死語なのかも知れませんが、What You See Is What You Getの略で、「見たままの結果を得る」的な意味です。

なんじゃそれって話ですが、Microsoft Word等のワープロソフトで文字を大きくして印刷したら、大きい文字が印刷されますね。今やあたりまえですが、これがWYSIWYG。

でもHTMLの場合、例えば

<strong>ここを太字にする</strong>

と”タグ”を書くことで、

ここを太字にする

と、このように装飾されるわけです。

そんなんわかりづらいわ！ってことでホームページビルダーのようなWYSIWYGなWeb制作ソフトが開発・販売されましたが、いまひとつメジャーにはなりきれていない感があります。

それもそのはず、HTMLは文書に意味をもたせる仕組みであって、本来装飾用途に使うものではないんですよね。

ここは見出しだよ、と指定したかったらHTMLで<h1>大見出し</h1>と書けば良く、大見出しの文字サイズや色なんていうのは別の部分で指定したほうが都合が良いわけです。

それがスタイルシートとして定義され、今ではHTMLテンプレートやブログテンプレートという形になっています。

こうすることで記事を書く人は文章と文章構造（h1～h3といった見出しや段落のpタグ等、必要最小限のタグ）に集中でき、デザインはテンプレートに任せれば良い、というのが最近の流行り（？）じゃないかなと思います。

これらは効率的な制作環境と言えますが、人気のテンプレートやデザインが偏る傾向があるため、ブログに関していえばどれもこれも似たようなブログに見える、という弊害もあります。

このブログもどこかで見たデザインでしょｗ

WordPressでもタグ打ちをする人が多い

WordPress5.0でWYSIWYGエディターが標準になりましたが、速攻でClassic Editorプラグインが作られ、400万人以上がインストールしたくらい、タグ打ちを好む人は多いです。

かくいうぼくもタグ打ち。

■WordPressの編集画面

WYSIWYGエディターだと気が付かないうちに無駄なタグが挿入されていることも多いし、完全に見た目が再現されているわけでもないし、使うメリットを感じないんですよねー。

また、WordPressのデフォルト設定だと改行時にpタグを自動挿入してくれるのですが、これもけっこうなありがた迷惑で、同じ段落として扱いたい部分が別れてしまったり、ほかのタグとの組み合わせによってはpタグをちゃんと閉じてくれない、なんて不具合も。
（実体験としてasideタグの中のpタグはおかしくなることが多かった）

なので、pタグやbrタグの自動挿入機能すらも止めて使っています。

たぶん、これはWordPressに限らず、普通の無料ブログサービス（Seesaaとかfc2とか）を使っている人も似たり寄ったりの悩みがあるんじゃないですかね。

自分でpタグやbrタグを書くのは面倒だけど、ブログシステムに任せたら任せたで何だかおかしくなる、みたいな。

タグをハイライトしてくれるテキストエディターもある

例えばこれはぼくが愛用しているNotepad++ですが、このテキストエディターもHTMLタグを色分けして表示してくれる機能があります。

（特別な設定は不要で、拡張子htmlのファイルを開けばこんな表示になる）

上のスクリーンショットはasideタグの上にカーソルを置いた状態ですが、はじまりとおわりのタグの両方がハイライト表示されているのがわかると思います。

横にある[-]ボタンを押せばタグで囲まれた部分をまるごと非表示にできたり、これがなかなか便利です。もともとはPHPを色分け表示してくれるテキストエディターを探していて見つけたのですが、HTMLタグのコーディングでも活用させて頂いています。
https://notepad-plus-plus.org/

タグ打ちにミスはつきもの

どれだけ高性能なエディターを使っても、入力するのが人間である以上、タグのうち間違えや、閉じ忘れは必ずあります。

ブログの文章だって何度も推敲を重ねて[投稿]したのに、後で読み直したら、あぁぁ誤字脱字がぁぁ！なんてしょっちゅうですよね。

画面に出てこないタグなら、なおさらのこと。

そんなときに便利なのがこのChrome拡張。

タグのチェックはHTMLエラーチェッカーが便利

Chromeに追加して、アイコンをポチっとするだけで現在のページのHTMLが文法的に正しいのかチェックしてくれます。

実際にぼくのブログでどう表示されるのか例を出そうと考え、あえて間違えたタグを書いてみたのですが………

ちょｗ　あえて間違えたところ以外に間違いがあるやんｗｗｗ

これはアレですね。blockquoteタグでの引用文の下に引用元をfooterタグで書こうとしてfooterとciteの順序を間違えたんですね…。恥ずかしい…///

というわけで、さっそく修正して、再度HTMLエラーチェッカーをポチッ。

タグはおそらく完璧です

のメッセージに毎度クスっとしてしまうのですが、このHTMLエラーチェッカーが大変ありがたいことは間違いありません。

まとめ

• WYSIWYGエディターは痒いところに手が届かないため、タグ打ちをしているブロガーも多い
• タグ打ちをするなら色分けできるテキストエディターを使うと便利
• しかし色分けしたところでタグ打ちにミスはつきものなので、HTMLエラーチェッカーでのチェックがオススメ

という話でした。

■テキストエディター Notepad++
https://notepad-plus-plus.org/

■HTMLエラーチェッカー（Chrome拡張）
https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf

どちらも便利なので、良ければ使ってみてね。