HTML終了タグチェッカーの利用をおすすめします

vanillaice (Akira)

vanillaice (Akira)

記事内でhtmlを利用している、という方や、サイドメニューに色々導入している、という方におすすめ。

【 HTML終了タグチェッカー 】改造版の再配布を致します - 便利なアプリ

弊ブログのこの記事 ↓ を発端にして、FC2ブログを「HTMLタグのみ」の改行設定で記事を書くブロガーさん達が増えつつあります。 最近の筆者の趣味は皆さんのブログ記事のHTMLソースを読むことです(笑) - 初級パソコン術最近の筆者の趣味は、皆さんのブログ記事のHTMLソースを読む(覗く)ことなんですよね~(笑) 悪趣味ですよね~ (〃^▽^〃)oあはははっ♪ そうそう、HTMLソースって ↓ こんなのですよね。 ブラウザのGoogle...

FC2ブロガーの ぼっちん さん が配布されています。
改訂版、ということで、ベースを造られたのは とっくりばー さん

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] - とっくりばー

必要に駆られてタグの閉じ忘れを簡単にチェックするブックマークレットを作ってみた。

2008年製作ですので当時はまだhtml4の時代ですね。
現在はhtml5.2ですから対応できていないタグがあります。そのあたりをぼっちんさんが追加してくれています。
お二方へはありがとうございます。

これは本当に「使える」ブックマークだと思います。
バリデートを気にかけている方は既にブラウザ拡張を入れているかもしれませんし、W3Cの公式バリデータをご利用かもしれません。
W3Cの方は良いのですが、ブラウザ拡張の方は大抵 li タグで引っかかるんですよね。
ホワイトリストが作れる拡張機能は少ないです。
かといってW3Cのページに行くのも面倒。
改訂版のブックマークレットは双方のデメリットを解消してくれてます。

ときにぼっちんさん。リクエストがございます。
html5の新要素の方も対応お願いできないだろうか。
私がやれば良い話しですがあくまでも配布されるのはぼっちんさん。なのでここでお願い。

source track を空要素に追加して欲しいのです。
html5で追加された要素です。
(keygenは要らないと思うので消去しました)
(念のため li は「空要素」というわけではありません)
特に source は画像のレスポンシブ掲載で今後使われていくと思うので入れておくと親切だと思います。
きっとぼっちんさんはやってくれるはず ←

終了タグを書き忘れている人はかなり多いと思いますので、チェックされてはいかがでしょうか。
んじゃ、ぼっちんさんお願いしますね(すみません(笑))

2018年3月2日 追記
ぼっちんさんが追加してくださいました。
ありがとうございますー o(=´∇`=)o

You may also like

Comments 11

There are no comments yet.

ぼっちん  

ご指摘をありがとうございます

おはようございます~ ^^
今朝、アクセス解析を目にしてこの記事から弊記事への参照があったことが分かりました(笑)

ご指摘の空要素「source」「track」を早速追加しておきました。
liの処理については実は方法論がよく分かりませんで、とりあえず空要素に加えて「表示除外」させてしまっております。
そんなこともあり、私では全面的に作り替える(全てを新しいもので作成する)能力もありません(笑)から、お時間がある時にhtml5.2対応版『Akira風HTML終了タグチェッカー』を、私などに遠慮することなく作成配布して戴けたら最高に嬉しいんですけどね (≧ω≦。)プププ
是非是非お願い致します~ (^_-)-☆パチッ

2018/03/02 (Fri) 08:20 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぼっちんさん

こんにちは (。・w・。)ゝ

リクエストにお応え頂きありがとうございます
liの件は記事内で「空要素」という表現を使ったので第三者の誤解を生まないよう念のため書きました(笑)
実際はliだけでなくbodyやddやpなんかも終了タグを省略できるわけですが、ブックマークレットの性質上行う査定は同じなので「除外」という意味で空要素と同じ位置づけで構わないと思います。

pタグなんかは常にhtmlを使ってて慣れている人以外は省略しない方が良いと思うので現行の内容で良いと思いますよ (o'ω')ノ

2018/03/02 (Fri) 14:23 | EDIT | REPLY |   

ぼっちん  

了解です♪

全て了解です~ ^^

皆さんに重宝して貰えると良いんですけどね (^^ゞポリポリ

2018/03/02 (Fri) 15:50 | EDIT | REPLY |   

ぬこぬこ  

導入して早速使ってみますた

divより先にpを閉じたり、divより先にpが閉じられてる事を指摘されたのですが、これってきちんと入れ子にしないとダメなんですかね?

素人なのでよくわかりません

2018/03/02 (Fri) 18:16 | EDIT | REPLY |   

ぬこぬこ  

あと以前からChromeの拡張機能 HTMLエラーチェッカー でチェックしたら「liが閉じられてない」と言われてたので、一つスッキリしました笑

2018/03/02 (Fri) 18:19 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぬこぬこさん

こんばんは。

> これってきちんと入れ子にしないとダメなんですかね?〜

そうですね。そのためのチェッカーです。
入れ子が正しくないと定義が狂いますし、レイアウトも狂います。
レイアウトが狂っていない場合は「たまたま運が良かった」だけです。

2018/03/02 (Fri) 20:47 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぼっちんさん

いやもうめちゃくちゃ便利だと思いますよ(笑)
htmlを使って文章を書くのは(pタグとか)、きちんと定義したいという理由に他ならないわけだからシンタックスは整えて当たり前。
と言いながら私も結構ミスしてたりもするけど ^^;
html構文書くなら毎記事バリデートぐらいの気概は必要ですよね。

2018/03/02 (Fri) 20:56 | EDIT | REPLY |   

ぬこぬこ  

To Akiraさん

こんばんわ~ つまり 場所によってはレイアウトが狂う事がある という事ですかねぇ。

それは知りませんでした。ただ閉じれば問題は起こらないと思ってました。

気を付けないといけませんね。

2018/03/02 (Fri) 21:21 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぬこぬこさん

「場所によっては狂うことがある」
ではなくて
「場所によっては狂わないこともある」
ですね。

以下の2つを試しにコピペ掲載してみてください。

<div style="width: 200px; height: 200px; background-color: red;"></div><div style="width: 100px; height: 100px; background-color: blue;"></div>

<div style="width: 200px; height: 200px; background-color: red;"><div style="width: 100px; height: 100px; background-color: blue;"></div></div>

終了タグの「位置違い」はレイアウトが狂うのが寧ろ当たり前です。
お試しください(笑)

2018/03/02 (Fri) 21:36 | EDIT | REPLY |   

ぬこぬこ  

To Akiraさん

やってみました~

なるほど!わかりやすい!

ここまでの違いになるとは思ってもみませんでした。

終了タグの位置で全く違う構造になってしまうんですねぇ笑

2018/03/02 (Fri) 22:36 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぬこぬこさん

そうですね。入れ子はグループ分けみたいなものですので、所属グループの括りがどこになるのか決定します。
なのでとても大事です (o'ω')ノ

2018/03/03 (Sat) 01:05 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート