HTML5 Beautifier, Minifier & Syntax Validator

HTML Formatter

Beautify, format, validate, and minify HTML markup with custom indentation rules, void element handling, DOM structure analysis, and safe sandboxed preview.

Load Preset Template:

Indent Size:

Indent Type:

Line Wrap (Print Width):

Whitespace Sensitivity:

Bracket Position:

Input HTML Code

0 chars

0 chars

HTML5 Structure Valid: No syntax errors detected.

Valid HTML

Lines:0|Input Chars:0|Output Chars:0|DOM Elements:0|Void Elements:0|Comments:0|Scripts & Styles:0

HTML5 Formatting Standards & Developer Specification Reference

HTML5 Void Elements

Self-closing void tags (<br>, <hr>, <img>, <input>, <meta>, <link>) do not contain closing tags. The formatter preserves HTML5 syntax without generating erroneous closing tags.

Whitespace Sensitive Tags

Content inside <pre> and <textarea> blocks contains significant whitespace. Prettier indentation rules preserve internal spaces and line breaks intact.

Sandboxed Preview Security

The render preview displays HTML in an isolated <iframe sandbox="allow-forms">, preventing user-submitted scripts from accessing local cookies or parent DOM storage.

Full Unicode & UTF-8

Preserves accented letters, Telugu, Hindi, Cyrillic, CJK scripts, and Emojis without corrupting character encodings.

`, card: `

Nike Running Shoes

New Arrival

Nike Air Max 270

Lightweight cushioning and responsive foam sole for maximum running comfort.

$99.00

`, table: `

#	Product Name	Category	Price	Status
1	Wireless Mechanical Keyboard	Electronics	$129.99	In Stock
2	Ergonomic Gaming Mouse	Accessories	$49.50	In Stock

`, form: ``, svg: `` }; document.querySelectorAll('.btn-preset').forEach(btn => { btn.addEventListener('click', function () { const key = this.getAttribute('data-preset'); if (presets[key] && typeof inputEditor !== 'undefined') { inputEditor.setValue(presets[key], -1); if (typeof formatCode === 'function') formatCode(); } }); }); }); // HTML Validation & Statistics Helper Function function runHtmlAnalysis(inputCode, outputCode) { const inputChars = inputCode.length; const outputChars = outputCode.length; const lines = inputCode.split('\n').length; document.getElementById('statLines').innerText = lines; document.getElementById('statInChars').innerText = inputChars; document.getElementById('statOutChars').innerText = outputChars; document.getElementById('inputCharCount').innerText = inputChars + ' chars'; document.getElementById('outputCharCount').innerText = outputChars + ' chars'; // Update Sandboxed Render Preview const previewIframe = document.getElementById('htmlPreviewIframe'); if (previewIframe) { previewIframe.srcdoc = outputCode || inputCode; } // Calculate DOM Elements & Statistics via Regex const elementsMatch = inputCode.match(/<[a-z1-6]+(\s|>)/gi); const elementsCount = elementsMatch ? elementsMatch.length : 0; const voidMatch = inputCode.match(/<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)(\s|\/|>)/gi); const voidCount = voidMatch ? voidMatch.length : 0; const commentsMatch = inputCode.match(//g); const commentsCount = commentsMatch ? commentsMatch.length : 0; const scriptStyleMatch = inputCode.match(/<(script|style)(\s|>)/gi); const scriptStyleCount = scriptStyleMatch ? scriptStyleMatch.length : 0; document.getElementById('statElements').innerText = elementsCount; document.getElementById('statVoid').innerText = voidCount; document.getElementById('statComments').innerText = commentsCount; document.getElementById('statScripts').innerText = scriptStyleCount; // Validate HTML Structure validateHtmlSyntax(inputCode); } function validateHtmlSyntax(code) { const alertBox = document.getElementById('htmlValAlert'); const alertTitle = document.getElementById('htmlValTitle'); const alertMsg = document.getElementById('htmlValMsg'); const alertBadge = document.getElementById('htmlValBadge'); if (!code || code.trim() === '') { alertBox.className = 'alert alert-secondary border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'Editor Empty'; alertMsg.innerText = 'Enter HTML code to validate.'; alertBadge.className = 'badge bg-secondary font11px'; alertBadge.innerText = 'Empty'; return; } const voidTags = ['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']; const invalidVoidClosing = code.match(/<\/(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)>/i); if (invalidVoidClosing) { alertBox.className = 'alert alert-warning border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'HTML Warning'; alertMsg.innerText = `Void element '' should not have a closing tag.`; alertBadge.className = 'badge bg-warning text-dark font11px'; alertBadge.innerText = 'Warning'; return; } // Check DOM Parsing Syntax const parser = new DOMParser(); const doc = parser.parseFromString(code, 'text/html'); const parserErrors = doc.querySelectorAll('parsererror'); if (parserErrors.length > 0) { alertBox.className = 'alert alert-danger border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'HTML Syntax Error'; alertMsg.innerText = parserErrors[0].textContent || 'Malformed HTML syntax detected.'; alertBadge.className = 'badge bg-danger font11px'; alertBadge.innerText = 'Syntax Error'; return; } // Valid HTML alertBox.className = 'alert alert-success border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'HTML Structure Valid'; alertMsg.innerText = 'HTML markup syntax and DOM tree are valid.'; alertBadge.className = 'badge bg-success font11px'; alertBadge.innerText = 'Valid HTML'; }

Ojoo is a low-code/no-code platform to build apps, automate workflows, and manage business operations — all in one place.

Follow Us

Need assistance or custom enterprise solutions?

Contact Support