web-dev-qa-db-ja.com

閉じられていないタグの検索に役立つHTMLエディター

私は基本的なテキストエディター、メモ帳で多くのHTMLページを編集しています。それらを検証するために行ったとき、検証サービスは閉じられていないdivタグがあると言っています。これらのような自動エラーレポートは信頼性が高くない傾向があります。つまり、行番号とエラーが表示されますが、多くの場合、エラーは実際にはファイルの別の部分に完全に含まれています。

タグの終了タグを見つける機能を備えた軽量のHTMLエディターが無料であるかどうか疑問に思っています。たとえば、タグをクリックしてからショートカットをクリックすると、プログラムは終了タグにジャンプします。この機能はホームサイトにあることはわかっていますが、ホームサイトがなく、とにかくプログラムが少しかさばります。

または、閉じられていないタグを強調表示できるオンラインhtml検証サービスがあればなお良いでしょうか？

要約すると、終了タグのないhtmlタグを見つける方法を知りたいのですが、これに役立つ無料のhtmlエディターや簡単なオンラインサービスはありますか？

htmlvalidation
22
user280109

HTMLをpage.xhtml（page.htmlではなく）として保存すると、ブラウザ（Firefox/ChromeまたはOpera）は、バリデーターを必要とせずに、閉じられていないタグを見つけることができます。オンラインで提供する前に、名前を.htmlに変更してください-IEは、まだ.xhtmlファイルをサポートしていません。

編集（3年後）：この投稿にはまだコメント/賛成意見が寄せられているため、少し修正します。 IE9とIE10がxhtmlファイルをサポートするようになりました。

43
lucideer

Firefoxのソースを表示する-間違ったコードは別の色になります

10
Thilanka De Silva

Notepad ++ -問題がなく、閉じられていないhtmlタグもありませんでした。

任意の要素をクリックして、終了タグがあるかどうかを確認できます。また、これを行うこともできます。「TextFX」（ナビゲーションのプラグインの左側）をクリックします->「Text FX HTML Tidy」をクリックします->「TiDy clean Document-wrap」と言います。これでhtmlドキュメントが修正され、閉じていない要素がすべて閉じます。

8
Gavrisimo

http://validator.w3.org/

閉じられていないタグだけではありません。すべてのフロントエンド開発者、IMOが使用する必要があります。

4
Jason McCreary

私は2つのオンラインツールを使用しています。 jona.ca および tormus.com

2
BrainBUG

CSE HTML Validator Lite は、HTMLをチェックし（F6を押すだけ）、欠落している終了タグやその他の問題を検出する無料の軽量エディター（Windows用）です。また、開始タグまたは終了タグでCtrl + Mを押すと、対応する開始タグまたは終了タグに移動します。

これを行う（そしてそれ以上の）単純なオンラインサービスは OnlineWebCheck.com です。他にもオンラインサービスはありますが、私の意見では、今述べたのは、使用して理解する最も簡単なサービスです。

完全な開示：私はCSE HTML Validator Liteおよび http://www.OnlineWebCheck.com/ の開発者です。これはCSE HTML Validatorに基づいています。

1
Albert Wiersch

コードが非常に乱雑で、きれいでなく、インデントされていない場合、v.Nu（ https://validator.w3.org/nu/ で見られる）はしばしば混乱します（たとえば、extreがある場合）終了タグ、それは本当に間違っているものを選択することができない場合があります）。

1つの解決策はコードの折りたたみです。特定のノードの子としてマークされているすべてのコードを折りたたむことにより、誤った階層を簡単に見つけることができます。

コードの折りたたみをサポートするエディターの例は Kateエディター です。スクリーンショットの左側の矢印を参照してください。 Kate screenshot

1
Nemo

無料の軽量htmlエディター...閉じられていないタグを強調表示できるオンラインhtml検証サービス？

linter-vn を使用します。

linter-vnuは、Nu Htmlチェッカー（v.Nu）を使用してHTMLまたはXHTMLドキュメントを検証するAtomエディターのパッケージです。

開示：私はlinter-vnuの開発者です。

linter-vnuは、別のAtomパッケージ、linterを使用してv.NuとAtomを統合します。

たとえば、Atomで次のtest.htmlファイルを開くと、

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

（意図的に閉じる</div>タグが欠落しています）

次に、Atom（または、linterとv.Nuのおかげで、linter-vnu）は次のエラーメッセージを表示します。

  • 閉じられていない要素「div」。 test.htmlの8行1列
  • 「body」の終了タグが見られましたが、閉じられていない要素がありました。 test.htmlの10行1列

エディターでそれらの行に赤い点を付けます。

エラーメッセージの「at ...」（ハイパーリンクされたテキスト）をクリックすると、エディターの挿入ポイントが対応する行に移動し、エラーテキスト（ 'Unclosed element "div'。 '）とともにポップアップがその行の下に表示されます。 ）。

ファイル拡張子.xhtmlを使用してHTMLドキュメントを保存し、それをAtomで開くと、v.NuはドキュメントをHTMLではなくXHTML（XML）として検証し、メッセージが少し異なります。この場合、エラーメッセージは1つだけです。

  • 行10列3に必要な文字（「b」が見つかります）（「d」が予期されます）

ここで、行10には終了</body>タグが含まれています。 v.Nuは代わりに</div>タグを予期していました。 </は満足のいくものでした-終了タグを期待していました-しかし、要素名は "body"の "b"ではなく、 "div"の "d"で始まることを期待していました。

2016年11月現在、私は以下の主張をしています。

  • v.Nuは（X）HTML（5） を検証するための最良のオプションです。
  • linter-vnuは、エディターでv.Nuをインタラクティブに利用するための最良のオプションです。 linter-vnu自体は簡単です。ほんの数行の「接着」コードです。 AtomエディターとAtomリンターパッケージです。

私はこれらの主張についての反訴と質問を歓迎します。私は間違っていることが証明されて、もっと良いものを見せられて嬉しいです。特に、v.Nuやlinter-vnuのように無料です。

0
Graham Hannington