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

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

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

Akira

To ぼっちんさん

こんにちは (｡・ｗ・｡)ゝ

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

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

全て了解です～ ＾＾

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

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

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

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

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

Akira

To ぬこぬこさん

こんばんは。

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

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

Akira

To ぼっちんさん

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

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

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

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

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>

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

やってみました～

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

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

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

Akira

To ぬこぬこさん

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