HTML Formatter

HTML Formatter

Paste your HTML code and format it with beautiful, readable indentation.

Input HTML
Formatted HTML





0
Input Lines
0
Output Lines
0
Input Characters
0
Output Characters

 Optimized for mobile devices
 `;
// Initialize with sample HTML
inputEl.value = sampleHTML;
formatHTML();
// Event Listeners
formatBtn.addEventListener('click', formatHTML);
minifyBtn.addEventListener('click', minifyHTML);
copyBtn.addEventListener('click', copyOutput);
clearBtn.addEventListener('click', clearAll);
inputEl.addEventListener('input', updateInputStats);
// Format HTML with proper indentation
function formatHTML() {
const input = inputEl.value.trim();
if (!input) {
showNotification('Please enter some HTML code', 'error');
return;
}
try {
let formatted = '';
let indentLevel = 0;
const indentStr = '  '; // 2 spaces for indentation
// Process the HTML line by line
const lines = input.split('\n');
for (let line of lines) {
// Trim the line
const trimmed = line.trim();
if (!trimmed) continue;
// Handle closing tags that reduce indentation
if (trimmed.startsWith('') ||
trimmed.includes('') && !trimmed.includes('') || trimmed.endsWith('>') &&
!trimmed.includes('/>') && !trimmed.startsWith('\s+<') // Remove spaces between tags
.trim();
// Apply syntax highlighting (minified version will be on one line)
minified = applySyntaxHighlighting(minified);
// Update output
outputEl.innerHTML = minified;
// Update stats
updateStats(input, minified);
showNotification('HTML minified successfully!');
} catch (error) {
showNotification('Error minifying HTML', 'error');
console.error(error);
}
}
// Apply syntax highlighting to HTML
function applySyntaxHighlighting(html) {
return html
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/\n/g, '
')
.replace(/("([^"]*)")/g, '$1')
.replace(/(<\/?[a-zA-Z][^>]*>)/g, '$1')
.replace(/([a-zA-Z-]+)=/g, '$1=')
.replace(/<!--[\s\S]*?-->/g, '$&');
}
// Copy output to clipboard
function copyOutput() {
const textToCopy = outputEl.textContent || outputEl.innerText;
if (!textToCopy.trim()) {
showNotification('No output to copy', 'error');
return;
}
// Use the Clipboard API
navigator.clipboard.writeText(textToCopy)
.then(() => {
showNotification('Output copied to clipboard!');
// Temporarily change button text
const originalHTML = copyBtn.innerHTML;
copyBtn.innerHTML = ' Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalHTML;
}, 2000);
})
.catch(err => {
console.error('Failed to copy: ', err);
showNotification('Failed to copy to clipboard', 'error');
});
}
// Clear both input and output
function clearAll() {
inputEl.value = '';
outputEl.innerHTML = '';
updateStats('', '');
inputEl.focus();
showNotification('All fields cleared');
}
// Update statistics
function updateStats(input, output) {
const inputLines = input ? input.split('\n').length : 0;
const outputLines = output ? output.split('\n').length : 0;
const inputChars = input ? input.length : 0;
const outputChars = output ? output.replace(/<[^>]*>/g, '').length : 0;
inputLinesEl.textContent = inputLines;
outputLinesEl.textContent = outputLines;
inputCharsEl.textContent = inputChars;
outputCharsEl.textContent = outputChars;
}
// Update input stats in real-time
function updateInputStats() {
const input = inputEl.value;
const inputLines = input ? input.split('\n').length : 0;
const inputChars = input ? input.length : 0;
inputLinesEl.textContent = inputLines;
inputCharsEl.textContent = inputChars;
}
// Show notification
function showNotification(message, type = 'success') {
notificationEl.textContent = message;
notificationEl.className = 'notification';
if (type === 'error') {
notificationEl.classList.add('error');
}
notificationEl.classList.add('show');
// Hide after 3 seconds
setTimeout(() => {
notificationEl.classList.remove('show');
}, 3000);
}
// Initialize stats on page load
updateInputStats();
 
Share:


							


Facebook									


							


X									


							


LinkedIn									


							


Email									


							


Reddit									



Rate this Tool

















User Ratings:
0.0
0.0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%
Relevant Tools






About the HTML Formatter
The HTML Formatter Tool is a powerful, web-based utility designed to help developers, designers, and content creators transform messy, unformatted HTML code into clean, readable, and professionally structured code. This tool bridges the gap between machine-generated HTML and human-readable code by applying consistent indentation, proper spacing, and visual syntax highlighting.



How to Use the HTML Formatter
Basic Formatting:
  1. Paste Your HTML: Copy your unformatted HTML code from any source (code editor, browser inspector, CMS) and paste it into the Input HTML textarea
  2. Click Format HTML: Press the “Format HTML” button with the magic wand icon to automatically apply proper indentation and structure
  3. View Results: Your beautifully formatted HTML will appear in the Formatted HTML section with syntax highlighting
 
Additional Functions:
  • Minify HTML: Click the “Minify HTML” button to compress your code by removing unnecessary whitespace, comments, and line breaks
  • Copy Output: Use the “Copy Output” button to instantly copy the formatted HTML to your clipboard
  • Clear All: Start fresh with the “Clear All” button to empty both input and output areas



Key Features
1. Intelligent Formatting
  • Smart Indentation: Automatically detects tag hierarchy and applies consistent 2-space indentation
  • Nested Structure: Properly handles deeply nested HTML elements
  • Self-Closing Tags: Correctly formats tags like <img />, <br />, <input />
 
2. Syntax Highlighting
  • Color-Coded Elements: Differentiates tags (red), attributes (purple), values (green), and comments (gray)
  • Visual Clarity: Makes code easier to read and debug at a glance
  • Preserved Structure: Maintains your HTML’s functionality while enhancing readability
 
3. Dual Display Modes
  • Human-Readable Format: Perfect for reviewing, debugging, and learning HTML structure
  • Minified Version: Optimized for production with reduced file size and bandwidth usage
 
4. Real-Time Statistics
  • Line Count: Track input vs. output line numbers
  • Character Count: Monitor code size changes
  • Compression Metrics: See how much space you save when minifying
 
5. User-Friendly Interface
  • Clean Design: Intuitive layout with clear section separation
  • Visual Feedback: Animated buttons and notifications
  • Accessibility: Keyboard-friendly with focus states and clear visual cues
 
6. No Installation Required
  • Browser-Based: Runs entirely in your web browser
  • No Uploads: Your code never leaves your computer
  • Privacy-Focused: All processing happens locally



FAQs





 Is my HTML code safe? Does it get uploaded to a server?





Absolutely safe! All processing happens locally in your browser. Your code never leaves your computer or gets transmitted to any server.






The tool supports all HTML versions including HTML5, XHTML, and legacy HTML. It works with any valid HTML syntax.






Yes! You can format complete HTML documents or partial snippets like <div> sections, list elements, or form components.






No, it only changes whitespace and formatting. All attributes, content, and functionality remain exactly the same.






Minification reduces file size for faster page loading, lower bandwidth usage, and improved website performance—especially important for mobile users.


ADVERTISEMENT