HTMLビューティファイア

無料のオンラインHTMLビューティファイアおよびフォーマッタです。圧縮された、あるいは乱雑なHTMLを、適切なインデント、タグの配置、属性の整理で即座に整形します。クライアントサイドで処理されるため、コードがブラウザの外に出ることはありません。

HTMLビューティファイア

🔒 100% クライアントサイド — コードがブラウザ外に出ることはありません

クイックサンプル

⚡ 圧縮されたHTML 🔀 乱雑なインデント 📐 セマンティックレイアウト 📝 フォーム要素

入力 HTML

出力

インデント:

属性をソート

コメントを削除

インライン要素を保持

⚠ タグの警告

総タグ数

ユニーク要素

最大震度

属性数

入力 (bytes)

出力 (bytes)

⟨/⟩ タグ内訳

サイズの変化

', messy: '\n\n\n Blog Post\n \n\n \n

Understanding Flexbox

\n Jane Doe\n January 15, 2026\n

Flexbox is a powerful CSS layout module that makes it easy to design\n flexible responsive layout structures.

Key Concepts

Flex Container
Flex Items
Main Axis vs Cross Axis
Flex Wrap

\n
Flexbox changed how we think about CSS layouts forever.
\n

Read more about CSS Grid for two-dimensional layouts.

\n \n', semantic: '\n\n\n \n \n Semantic HTML5 Layout\n\n\n \n

Article Title

Published on March 7, 2026

Introduction

This article demonstrates semantic HTML5 elements that improve accessibility and SEO.

HTML5 semantic elements diagram — Semantic elements provide meaning to the document structure.

\n \n \n

\n \n\n', form: 'Registration Form

' }; function hbLoadExample(key) { document.getElementById('htmlInput').value = HB_EXAMPLES[key]; document.getElementById('htmlOutput').value = ''; hbHideStats(); } /* ── Utility Functions ───────────────────── */ function hbClearInput() { document.getElementById('htmlInput').value = ''; document.getElementById('htmlOutput').value = ''; hbHideStats(); } function hbPasteFromClipboard() { navigator.clipboard.readText().then(function(text) { document.getElementById('htmlInput').value = text; }).catch(function() {}); } function hbCopyOutput() { var text = document.getElementById('htmlOutput').value; if (!text) return; var btn = document.getElementById('hbCopyBtn'); navigator.clipboard.writeText(text).then(function() { btn.classList.add('copied'); btn.textContent = '✓ コピー完了'; setTimeout(function() { btn.classList.remove('copied'); btn.textContent = '\u29C9 コピー'; }, 1500); }).catch(function() {}); } function hbDownloadOutput() { var code = document.getElementById('htmlOutput').value; if (!code) return; var blob = new Blob([code], { type: 'text/html' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'beautified.html'; a.click(); URL.revokeObjectURL(a.href); } function hbHideStats() { document.getElementById('hbStatsRibbon').classList.remove('visible'); document.getElementById('hbTagBreakdown').classList.remove('visible'); document.getElementById('hbDiffBar').classList.remove('visible'); document.getElementById('hbWarnings').classList.remove('visible'); } /* ── HTML Element Classifications ─────────── */ var VOID_ELEMENTS = ['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']; var INLINE_ELEMENTS = ['a','abbr','acronym','b','bdo','big','br','button','cite','code','dfn','em','i','img','input','kbd','label','map','object','output','q','samp','select','small','span','strong','sub','sup','textarea','time','tt','u','var']; var RAW_TEXT_ELEMENTS = ['script','style']; var PRESERVE_ELEMENTS = ['pre','code','textarea','script','style']; /* ── HTML Beautifier Engine ──────────────── */ function hbTokenize(html) { var tokens = []; var i = 0; var len = html.length; while (i < len) { if (html.substr(i, 4) === '', i + 4); if (end === -1) end = len - 3; tokens.push({ type: 'comment', value: html.substring(i, end + 3) }); i = end + 3; } else if (html.substr(i, 9).toUpperCase() === '', i); if (end === -1) end = len - 1; tokens.push({ type: 'doctype', value: html.substring(i, end + 1) }); i = end + 1; } else if (html.substr(i, 9) === '', i + 9); if (end === -1) end = len - 3; tokens.push({ type: 'cdata', value: html.substring(i, end + 3) }); i = end + 3; } else if (html.substr(i, 2) === '', i); if (end === -1) end = len - 1; var tag = html.substring(i + 2, end).trim().toLowerCase(); tokens.push({ type: 'close', tag: tag, value: html.substring(i, end + 1) }); i = end + 1; } else if (html[i] === '<' && i + 1 < len && /[a-zA-Z]/.test(html[i + 1])) { var end = i + 1; var inQuote = false; var quoteChar = ''; while (end < len) { var ch = html[end]; if (inQuote) { if (ch === quoteChar) inQuote = false; } else { if (ch === '"' || ch === "'") { inQuote = true; quoteChar = ch; } else if (ch === '>') break; } end++; } if (end >= len) end = len - 1; var tagContent = html.substring(i + 1, end); var selfClosing = tagContent.charAt(tagContent.length - 1) === '/'; if (selfClosing) tagContent = tagContent.substring(0, tagContent.length - 1); var spaceIdx = tagContent.search(/[\s\/]/); var tagName, attrStr; if (spaceIdx === -1) { tagName = tagContent.trim(); attrStr = ''; } else { tagName = tagContent.substring(0, spaceIdx).trim(); attrStr = tagContent.substring(spaceIdx).trim(); } tagName = tagName.toLowerCase(); var isVoid = VOID_ELEMENTS.indexOf(tagName) !== -1; var attrs = hbParseAttributes(attrStr); tokens.push({ type: 'open', tag: tagName, attrs: attrs, selfClosing: selfClosing || isVoid, isVoid: isVoid, raw: html.substring(i, end + 1) }); i = end + 1; if (RAW_TEXT_ELEMENTS.indexOf(tagName) !== -1 && !selfClosing && !isVoid) { var closeTag = ''); return parts.join(''); } function hbBeautifyCode(html, opts) { var indent = opts.indent || ' '; var sortAttrs = opts.sortAttrs || false; var removeComments = opts.removeComments || false; var preserveInline = opts.preserveInline !== false; var tokens = hbTokenize(html); var output = []; var level = 0; var preserveStack = 0; function addIndent(d) { var r = ''; for (var j = 0; j < d; j++) r += indent; return r; } function isInline(tagName) { return preserveInline && INLINE_ELEMENTS.indexOf(tagName) !== -1; } function isPreserve(tagName) { return PRESERVE_ELEMENTS.indexOf(tagName) !== -1; } for (var i = 0; i < tokens.length; i++) { var token = tokens[i]; if (token.type === 'comment') { if (!removeComments) { if (preserveStack > 0) { output.push(token.value); } else { output.push(addIndent(level) + token.value); } } } else if (token.type === 'doctype') { output.push(token.value); } else if (token.type === 'cdata') { output.push(addIndent(level) + token.value); } else if (token.type === 'open') { var tag = hbBuildTag(token.tag, token.attrs, token.selfClosing, sortAttrs); if (preserveStack > 0) { output.push(tag); if (isPreserve(token.tag) && !token.selfClosing) preserveStack++; } else if (isInline(token.tag)) { if (output.length > 0) { var last = output[output.length - 1]; var lastNewline = last.lastIndexOf('\n'); var lastLine = lastNewline === -1 ? last : last.substring(lastNewline + 1); if (lastLine.trim() && !lastLine.trim().match(/^<\/(div|section|article|main|header|footer|nav|aside|ul|ol|li|table|tr|td|th|thead|tbody|tfoot|form|fieldset|dl|dt|dd|details|summary|figure|figcaption|blockquote|p|h[1-6]|pre|hr)>/i)) { output[output.length - 1] = last + tag; } else { output.push(addIndent(level) + tag); } } else { output.push(addIndent(level) + tag); } } else { output.push(addIndent(level) + tag); if (!token.selfClosing) { if (isPreserve(token.tag)) preserveStack++; level++; } } } else if (token.type === 'close') { if (preserveStack > 0) { if (isPreserve(token.tag)) preserveStack--; output.push(''); } else if (isInline(token.tag)) { if (output.length > 0) { output[output.length - 1] = output[output.length - 1] + ''; } else { output.push(''); } } else { level--; if (level < 0) level = 0; output.push(addIndent(level) + ''); } } else if (token.type === 'text') { if (preserveStack > 0 || token.preserve) { output.push(token.value); } else { var text = token.value; var trimmed = text.replace(/\s+/g, ' ').trim(); if (trimmed) { var prevToken = i > 0 ? tokens[i - 1] : null; var nextToken = i < tokens.length - 1 ? tokens[i + 1] : null; var prevIsInline = prevToken && ((prevToken.type === 'open' && isInline(prevToken.tag)) || (prevToken.type === 'close' && isInline(prevToken.tag))); var nextIsInline = nextToken && ((nextToken.type === 'open' && isInline(nextToken.tag)) || (nextToken.type === 'close' && isInline(nextToken.tag))); if (prevIsInline || nextIsInline) { if (output.length > 0) { output[output.length - 1] = output[output.length - 1] + trimmed; } else { output.push(trimmed); } } else { output.push(addIndent(level) + trimmed); } } } } } var result = output.join('\n'); result = result.replace(/\n{3,}/g, '\n\n'); return result.trim(); } function hbMinifyCode(html) { html = html.replace(//g, ''); html = html.replace(/>\s+<'); html = html.replace(/\s+/g, ' '); return html.trim(); } /* ── Stats Calculation ───────────────────── */ function hbGetStats(html) { var stats = { totalTags: 0, uniqueTags: {}, maxDepth: 0, attrCount: 0, warnings: [], tagTypes: { block: {}, inline: {}, void_el: {}, semantic: {} } }; var SEMANTIC = ['article','aside','details','figcaption','figure','footer','header','main','mark','nav','section','summary','time']; var BLOCK = ['div','p','h1','h2','h3','h4','h5','h6','ul','ol','li','table','tr','td','th','thead','tbody','tfoot','form','fieldset','legend','blockquote','pre','dl','dt','dd','hr']; var tokens = hbTokenize(html); var stack = []; var depth = 0; for (var i = 0; i < tokens.length; i++) { var t = tokens[i]; if (t.type === 'open') { stats.totalTags++; stats.uniqueTags[t.tag] = (stats.uniqueTags[t.tag] || 0) + 1; if (t.attrs) stats.attrCount += t.attrs.length; if (SEMANTIC.indexOf(t.tag) !== -1) { stats.tagTypes.semantic[t.tag] = (stats.tagTypes.semantic[t.tag] || 0) + 1; } else if (VOID_ELEMENTS.indexOf(t.tag) !== -1) { stats.tagTypes.void_el[t.tag] = (stats.tagTypes.void_el[t.tag] || 0) + 1; } else if (INLINE_ELEMENTS.indexOf(t.tag) !== -1) { stats.tagTypes.inline[t.tag] = (stats.tagTypes.inline[t.tag] || 0) + 1; } else { stats.tagTypes.block[t.tag] = (stats.tagTypes.block[t.tag] || 0) + 1; } if (!t.selfClosing) { stack.push(t.tag); depth = stack.length; if (depth > stats.maxDepth) stats.maxDepth = depth; } } else if (t.type === 'close') { stats.totalTags++; var found = false; for (var j = stack.length - 1; j >= 0; j--) { if (stack[j] === t.tag) { for (var k = stack.length - 1; k > j; k--) { stats.warnings.push('閉じられていない <' + stack[k] + '> タグがあります'); } stack.splice(j); found = true; break; } } if (!found) { stats.warnings.push('予期しない閉じタグがあります'); } } } for (var s = 0; s < stack.length; s++) { stats.warnings.push('閉じられていない <' + stack[s] + '> タグがあります'); } return stats; } /* ── Display Functions ───────────────────── */ function hbShowStats(inputHtml, outputHtml) { var stats = hbGetStats(inputHtml); var inputSize = new Blob([inputHtml]).size; var outputSize = new Blob([outputHtml]).size; document.getElementById('hbStatTags').textContent = stats.totalTags; document.getElementById('hbStatUnique').textContent = Object.keys(stats.uniqueTags).length; document.getElementById('hbStatDepth').textContent = stats.maxDepth; document.getElementById('hbStatAttrs').textContent = stats.attrCount; document.getElementById('hbStatInputSize').textContent = hbFormatSize(inputSize); document.getElementById('hbStatOutputSize').textContent = hbFormatSize(outputSize); document.getElementById('hbStatsRibbon').classList.add('visible'); var grid = document.getElementById('hbTagGrid'); grid.innerHTML = ''; var types = [ { obj: stats.tagTypes.semantic, cls: 'tag-pill-semantic', label: 'semantic' }, { obj: stats.tagTypes.block, cls: 'tag-pill-block', label: 'block' }, { obj: stats.tagTypes.inline, cls: 'tag-pill-inline', label: 'inline' }, { obj: stats.tagTypes.void_el, cls: 'tag-pill-void', label: 'void' } ]; var hasAny = false; for (var t = 0; t < types.length; t++) { var keys = Object.keys(types[t].obj).sort(); for (var k = 0; k < keys.length; k++) { hasAny = true; var pill = document.createElement('span'); pill.className = 'tag-pill ' + types[t].cls; pill.innerHTML = '<' + keys[k] + '> ' + types[t].obj[keys[k]] + ''; grid.appendChild(pill); } } if (hasAny) { document.getElementById('hbTagBreakdown').classList.add('visible'); } if (stats.warnings.length > 0) { var list = document.getElementById('hbWarningsList'); list.innerHTML = ''; var unique = []; var seen = {}; for (var w = 0; w < stats.warnings.length; w++) { if (!seen[stats.warnings[w]]) { seen[stats.warnings[w]] = true; unique.push(stats.warnings[w]); } } for (var u = 0; u < unique.length && u < 10; u++) { var li = document.createElement('li'); li.textContent = unique[u]; list.appendChild(li); } document.getElementById('hbWarnings').classList.add('visible'); } var pct, isShrink; if (inputSize === 0) { pct = 0; isShrink = true; } else { var change = ((outputSize - inputSize) / inputSize) * 100; isShrink = change < 0; pct = Math.abs(change); } var fill = document.getElementById('hbDiffFill'); var cappedPct = Math.min(pct, 100); fill.style.width = cappedPct + '%'; fill.className = 'diff-fill ' + (isShrink ? 'shrink' : 'grow'); document.getElementById('hbDiffValue').textContent = (isShrink ? '-' : '+') + pct.toFixed(1) + '%'; document.getElementById('hbDiffBar').classList.add('visible'); } function hbFormatSize(bytes) { if (bytes < 1024) return bytes + ''; return (bytes / 1024).toFixed(1) + 'K'; } /* ── Main Actions ────────────────────────── */ function hbBeautify() { var input = document.getElementById('htmlInput').value; if (!input.trim()) return; var indentSel = document.getElementById('hbIndentSize').value; var indent; if (indentSel === 'tab') indent = '\t'; else indent = new Array(parseInt(indentSel) + 1).join(' '); var opts = { indent: indent, sortAttrs: document.getElementById('hbOptSortAttrs').checked, removeComments: document.getElementById('hbOptRemoveComments').checked, preserveInline: document.getElementById('hbOptPreserveInline').checked }; var output = hbBeautifyCode(input, opts); document.getElementById('htmlOutput').value = output; hbShowStats(input, output); } function hbMinify() { var input = document.getElementById('htmlInput').value; if (!input.trim()) return; var output = hbMinifyCode(input); document.getElementById('htmlOutput').value = output; hbShowStats(input, output); }

Embed HTMLビューティファイア Widget

HTMLビューティファイア

HTMLビューティファイアは、乱雑な、または圧縮された、構造が不十分なHTMLを、瞬時にクリーンで適切にインデントされたコードに再フォーマットする無料のオンラインツールです。本番環境のマークアップをデバッグしたり、他人のコードを確認したり、あるいは大規模なテンプレートを整理したりする必要がある場合でも、このツールならワンクリックで処理できます。すべての処理はブラウザ内で行われるため、コードがサーバーに送られることはありません。

HTMLビューティファイアの使い方

HTMLコードを貼り付ける：左側の入力エディタにコードを貼り付けるか、クイックサンプルボタンをクリックしてサンプルコードを読み込みます。
設定を行う：オプションバーを使用して、インデントサイズ（2スペース、4スペース、またはタブ）を選択し、属性のソート、コメントの削除、インライン要素の保持などを切り替えます。
「HTMLを整形」をクリック：即座にコードがフォーマットされます。出力結果は右側のパネルに表示されます。
統計リボンを確認する：タグ数、ネストの深さ、要素の内訳、およびタグの警告を確認できます。
コピーまたはダウンロード：出力パネルのヘッダーにあるボタンを使用して、結果を保存します。

主な機能

✦

スマートなインデント

<span>、<strong>、<a>などの周囲のテキストと同じ行に残すべきインライン要素を尊重しながら、ネストされたタグを適切にインデントします。

⟨/⟩

タグ認識フォーマット

ブロック要素（div、section）、インライン要素（span、em）、空要素（br、img、input）、セマンティック要素（header、nav、article）を区別し、文脈に適した整形を行います。

⚠

エラー検出

整形後に閉じられていないタグや不適切なネストを検出し、ブラウザでの表示崩れの原因となる一般的なHTMLのバグを特定するのに役立ちます。

◁▷

圧縮モード

ワンクリックでHTMLから不要な空白やコメントをすべて取り除き、本番環境でのページ読み込みを高速化するためにファイルサイズを削減します。

📊

ライブ統計

総タグ数、ユニーク要素数、最大ネスト深度、属性数、入力/出力サイズ、およびタグタイプの視覚的な内訳を即座に分析・表示します。

🔒

100% クライアントサイド

すべての処理はブラウザ内で行われます。HTMLがサーバーにアップロード、保存、または送信されることはありません。完全なプライバシーを保証します。

HTMLを整形すべきタイミング

本番用コードのデバッグ

圧縮されたHTMLは、人間にはほとんど読めません。ページの構造を検査したり、レイアウトのバグを追跡したり、CMSがどのように出力をレンダリングしているか理解したりする必要がある場合、圧縮されたソースをここに貼り付けて、読みやすいインデント付きのマークアップに展開してください。

コードレビュー

一貫したフォーマットにより、プルリクエストのレビューが容易になります。レビュー前にHTMLを整形することで、全員が同じクリーンな構造を確認できるようになり、整形の違いではなくロジックの違いが際立つようになります。

HTML構造の学習

HTMLを学習中、または誰かに教えている場合、適切にフォーマットされたコードは不可欠です。適切なインデントにより、要素間の親子関係が明確になり、ドキュメントツリー構造が視覚的に分かりやすくなります。

自動生成されたマークアップのクリーンアップ

WYSIWYGエディタ、メール作成ツール、CMSプラットフォームは、インデントが不揃いで不要な属性が含まれた乱雑なHTMLを生成することがよくあります。手動で編集する前に、このツールを使ってクリーンアップしましょう。

整形成形（Beautify） vs 圧縮（Minify）

側面	整形（Beautify）	圧縮（Minify）
目的	開発中の読みやすさ	本番環境でのファイルサイズ削減
空白	インデントと改行を追加	不要な空白をすべて削除
コメント	保持（オプションで削除可能）	削除
最適	デバッグ、レビュー、学習	デプロイ、ページ速度向上

HTMLフォーマットのベストプラクティス

一貫したインデントを使用する：2スペース、4スペース、またはタブのいずれかを選択し、バージョン管理での差分をクリーンに保つためにプロジェクト全体で統一します。
1行に1つのブロック要素：ドキュメント構造を明確にするため、各ブロックレベル要素は独自の行から開始する必要があります。
インライン要素はインラインのままに：<strong>、<em>、<a>などの要素は、可読性を損なわないよう周囲のテキストと同じ行に保持すべきです。
属性を一定のルールでソートする：属性をアルファベット順に並べることで、チームが属性を素早く見つけられるようになり、重複も防げます。一般的にはidを最初、次にclass、その後にアルファベット順にするのが一般的です。
セマンティック要素を使用する：アクセシビリティとSEOのため、汎用的な<div>要素よりも<header>、<nav>、<main>、<article>、<footer>を優先して使用しましょう。

よくある質問

HTMLビューティファイアとは何ですか？

HTMLビューティファイアは、乱雑な、または圧縮されたHTMLコードを、適切なインデント、一貫したタグの配置、整理された属性レイアウトを備えたクリーンで読みやすい形式に再フォーマットするオンラインツールです。HTMLの読み取り、編集、デバッグ、メンテナンスを容易にします。

このツールを使用する際、HTMLコードは安全ですか？

はい、完全に安全です。すべてのHTML整形は、クライアントサイドのJavaScriptを使用してブラウザ内で完全に行われます。コードがサーバーに送信されたり、保存されたり、送信されたりすることはありません。HTMLのプライバシーは完全に守られます。

HTMLの整形と圧縮の違いは何ですか？

整形は、HTMLを適切なインデントと改行を含んだ読みやすい形式に展開するもので、開発やデバッグに最適です。圧縮は、ファイルサイズを削減するために不要な空白、コメント、改行をすべて削除するもので、本番環境へのデプロイやページの読み込み速度向上に最適です。

このツールはspanやstrongのようなインライン要素を正しく処理しますか？

はい。このツールは、ブロックレベル要素（div、section、article）とインライン要素（span、strong、em、a）を区別します。テキストコンテンツ内のインライン要素は、自然な読みやすさを維持するために同じ行に保持され、ブロック要素には独自のインデントされた行が割り当てられます。

このツールは閉じられていないタグなどのHTMLエラーを検出できますか？

はい。整形後、統計パネルに閉じられていないタグや不適切なネストなどのタグ分析が表示されます。これにより、ブラウザでのレンダリングの問題を引き起こす可能性のある一般的なHTMLエラーを見つけることができます。

HTMLビューティファイア

Understanding Flexbox

Key Concepts

Article Title

Introduction

HTMLビューティファイア

HTMLビューティファイアの使い方

主な機能

スマートなインデント

タグ認識フォーマット

エラー検出

圧縮モード

ライブ統計

100% クライアントサイド

HTMLを整形すべきタイミング

本番用コードのデバッグ

コードレビュー

HTML構造の学習

自動生成されたマークアップのクリーンアップ

整形成形（Beautify） vs 圧縮（Minify）

HTMLフォーマットのベストプラクティス

よくある質問

HTMLビューティファイアとは何ですか？

このツールを使用する際、HTMLコードは安全ですか？

HTMLの整形と圧縮の違いは何ですか？

このツールはspanやstrongのようなインライン要素を正しく処理しますか？

このツールは閉じられていないタグなどのHTMLエラーを検出できますか？

関連リソース

テキスト変更ツール:

おすすめ: