HTML Beautifier およびフォーマッター オンライン

リアルタイムで乱雑なコードや minified HTML5 コードをフォーマット、インデント、クリーンアップします。 HTML5 void タグ、inline 要素、属性 wrapping を適切に処理し、

、





























Quick Presets:













文字: 0


行: 0


サイズ: 0 B



































オンライン HTML Beautifier およびフォーマッターとは何ですか?


HTML Beautifier (HTML フォーマッタまたは pretty プリンタとも呼ばれます) は、圧縮された minified ソース コード、または一貫性のないインデントの HTML ソース コードを受け取り、それをクリーンで人間が判読できる DOM 階層に再構築します。 minified 実稼働テンプレートを検査する場合でも、CMS エクスポートをクリーンアップする場合でも、Git にコミットする前にコードを標準化する場合でも、適切なインデントを使用すると、閉じられていないタグや深くネストされたコンテナーを簡単に見つけることができます。


すべての山括弧を新しい行に分割し、
 または 


HTML コードをオンラインで美しくまたは縮小する方法


    

  1. HTML マークアップを貼り付けます: 書式設定されていないコードまたは minified HTML コードを 入力 HTML コード ボックスに貼り付けるか、サンプル HTML のロード をクリックして、完全な HTML5 テンプレートでフォーマッタをテストします。
    2. 

  2. 書式設定を選択します: クイック プリセット バーまたは右側の設定列を使用して、インデント (2、4、または 8 個のスペース、またはタブ)、属性 wrapping、inline タグのグループ化、およびコメントの削除を構成します。
    3. 

  3. コピー、ダウンロード、または縮小: フォーマットされた HTML は、入力すると自動的に更新されます。 clipboardにコピー、Download .htmlをクリックしてファイルをローカルに保存するか、Minify HTMLをクリックしてマークアップを単一行に圧縮します。
    4. 



HTML フォーマットの前後の比較






フォーマットモード
HTML の出力例
ベストユースケース






縮小されたHTML

こんにちは世界
Hero

本番展開、HTTP ペイロード サイズの削減、および電子メール HTML テンプレート。




標準美化(4スペース)

ZZQ2QXZ

こんにちは世界
ZZQ5QXZ
ヒーローZZQ8QXZ

毎日の Web 開発、DOM ネストのデバッグ、コード レビュー。




ラップされた属性モード
XXQ2QXZ
class="カード"XXQ5QXZ
id="ヒーロー">
多くの Tailwind CSS ユーティリティ クラス、data-* 属性、または ARIA プロパティを持つコンポーネント。






HTML5 ボイド要素とインライン対ブロックタグの書式設定


    

  • HTML5 無効な要素はネストの深さを増加させません: HTML5 では、無効な要素 (、、
    、、 、
    、、、、、 、、、および ) は、終了タグや末尾のスラッシュを必要としません。私たちのフォーマッタはこれらを自動的に追跡するので、兄弟要素は整列したままになります。
    • 

  • インライン要素とブロック要素: のように inline 要素を分割すると
    今すぐドキュメントをお読みください。
     を 5 行に分割すると散文が読みにくくなり、ブラウザ内の単語間に不要な空白が入る可能性があります。 Keep Short Inline Tags on One Line を有効にすると、自然な文の流れが維持されます。
    • 

  • 生のブロックの保持: 
    、、および 
    • 








よくある質問 (FAQ)



HTML の美化と HTML の縮小の違いは何ですか?



HTML を美しくする (pretty 印刷) は、構造化された改行と階層インデントを追加し、開発者がマークアップを簡単に読み取り、デバッグ、保守できるようにします。 HTML 縮小 は、不要な空白、改行、コメントを削除してファイル サイズを削減し、実稼働ページの読み込みを高速化します。








、、




、、および 







HTML Beautifier は HTML5 void (自己終了) 要素をどのように処理しますか?



HTML5 は 14 個の void 要素 (area、base、br、col、embed、hr、 img、input、link、meta、param、source、 track、および wbr)、終了タグがありません。このフォーマッタは、14 個の void 要素すべてと、
 宣言および XML/SGML 命令を自動的に認識するため、後続の兄弟タグがより深いインデント レベルに押し込まれることはありません。







HTML のインデントには 2 つのスペース、4 つのスペース、またはタブを使用する必要がありますか?



2間、4間どちらも幅広くご利用いただけます。 Google の HTML/CSS スタイル ガイドと最新のフロントエンド ツールチェーン (Prettier、Vue、React) は、デフォルトで 2 スペース になります。これは、HTML ドキュメントには深い DOM ネストがあることが多いためです。 WordPress と多くのバックエンド テンプレート エンジンは、tabs または 4 スペース を好みます。クイック プリセット バーを使用すると、それらを即座に切り替えることができます。







私の HTML コードはどこかのサーバーにアップロードされていますか?



いいえ。すべての HTML の解析、フォーマット、縮小化は、JavaScript を使用してブラウザー内で 100% ローカルに行われます。ソース コードとテンプレートがデバイスから流出することはありません。