🔍 HTML Checker
Validate your HTML code for errors, warnings, and best practices
`;document.getElementById('htmlInput').value = sampleHTML;
}function clearAll() {
document.getElementById('htmlInput').value = '';
document.getElementById('resultsSection').classList.remove('active');
checkResults = {
errors: [],
warnings: [],
info: [],
totalLines: 0,
totalTags: 0
};
}function showNotification(message) {
const notification = document.getElementById('downloadNotification');
notification.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}function exportPDF() {
const errorCount = checkResults.errors.length;
const warningCount = checkResults.warnings.length;
const infoCount = checkResults.info.length;
const timestamp = new Date().toLocaleString();
const status = errorCount === 0 ? '✓ VALID' : '✗ INVALID';
const statusColor = errorCount === 0 ? 'PASSED' : 'FAILED';const content = `
╔════════════════════════════════════════════════════════════════╗
║ ║
║ HTML VALIDATION REPORT ║
║ ║
║ CalcsHub.com ║
║ Your Trusted Calculation And Solution Hub ║
║ ║
╚════════════════════════════════════════════════════════════════╝━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
REPORT INFORMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Generated On : ${timestamp}
Report Status : ${status}
Total Lines : ${checkResults.totalLines}
Total Tags : ${checkResults.totalTags}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
VALIDATION SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┌──────────────────────────┬──────────────┐
│ Category │ Count │
├──────────────────────────┼──────────────┤
│ Errors │ ${errorCount.toString().padEnd(12)}│
│ Warnings │ ${warningCount.toString().padEnd(12)}│
│ Suggestions │ ${infoCount.toString().padEnd(12)}│
│ Status │ ${statusColor.padEnd(12)}│
└──────────────────────────┴──────────────┘${errorCount === 0 && warningCount === 0 && infoCount === 0 ? `
┌────────────────────────────────────────────────────────────────┐
│ │
│ ✓ EXCELLENT! Your HTML code is perfectly valid! │
│ │
│ No errors, warnings, or suggestions found. │
│ Your code follows all HTML5 standards and best practices. │
│ │
└────────────────────────────────────────────────────────────────┘
` : ''}
${errorCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ ERRORS (${errorCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.errors.map((error, index) => `
┌─ Error #${index + 1} ─────────────────────────────────────────────────
│
│ 📍 Line Number: ${error.line}
│
│ 📝 Description:
│ ${error.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${warningCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️ WARNINGS (${warningCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.warnings.map((warning, index) => `
┌─ Warning #${index + 1} ───────────────────────────────────────────────
│
│ 📍 Line Number: ${warning.line}
│
│ 📝 Description:
│ ${warning.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${infoCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ️ SUGGESTIONS (${infoCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.info.map((info, index) => `
┌─ Suggestion #${index + 1} ────────────────────────────────────────────
│
│ 📍 Line Number: ${info.line}
│
│ 📝 Description:
│ ${info.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RECOMMENDATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${errorCount > 0 ? '• Fix all errors before deploying your HTML code.\n' : ''}${warningCount > 0 ? '• Review and address warnings for better code quality.\n' : ''}${infoCount > 0 ? '• Consider implementing suggestions for best practices.\n' : ''}${errorCount === 0 && warningCount === 0 ? '• Your code is production-ready!\n' : ''}• Validate your HTML regularly during development.
• Use semantic HTML5 elements for better accessibility.
• Keep your code clean and well-structured.
• Test across different browsers and devices.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ABOUT THIS REPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━This report was generated by CalcsHub HTML Checker, a free online
tool for validating HTML code and ensuring web standards compliance.Tool : HTML Checker
Website : CalcsHub.com
Description : Your Trusted Calculation And Solution Hub
Version : 1.0
Date : ${timestamp}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Thank you for using CalcsHub.com!
Visit us for more free web tools.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╔════════════════════════════════════════════════════════════════╗
║ End of Report - CalcsHub.com © ${new Date().getFullYear()} ║
╚════════════════════════════════════════════════════════════════╝
`;const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `HTML-Validation-Report-${new Date().getTime()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('✓ PDF Report downloaded successfully!');
}function exportText() {
const errorCount = checkResults.errors.length;
const warningCount = checkResults.warnings.length;
const infoCount = checkResults.info.length;
const timestamp = new Date().toLocaleString();
const status = errorCount === 0 ? '✓ VALID' : '✗ INVALID';
const statusColor = errorCount === 0 ? 'PASSED' : 'FAILED';const content = `
╔════════════════════════════════════════════════════════════════╗
║ ║
║ HTML VALIDATION REPORT ║
║ ║
║ CalcsHub.com ║
║ Your Trusted Calculation And Solution Hub ║
║ ║
╚════════════════════════════════════════════════════════════════╝━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
REPORT INFORMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Generated On : ${timestamp}
Report Status : ${status}
Total Lines : ${checkResults.totalLines}
Total Tags : ${checkResults.totalTags}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
VALIDATION SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┌──────────────────────────┬──────────────┐
│ Category │ Count │
├──────────────────────────┼──────────────┤
│ Errors │ ${errorCount.toString().padEnd(12)}│
│ Warnings │ ${warningCount.toString().padEnd(12)}│
│ Suggestions │ ${infoCount.toString().padEnd(12)}│
│ Status │ ${statusColor.padEnd(12)}│
└──────────────────────────┴──────────────┘${errorCount === 0 && warningCount === 0 && infoCount === 0 ? `
┌────────────────────────────────────────────────────────────────┐
│ │
│ ✓ EXCELLENT! Your HTML code is perfectly valid! │
│ │
│ No errors, warnings, or suggestions found. │
│ Your code follows all HTML5 standards and best practices. │
│ │
└────────────────────────────────────────────────────────────────┘
` : ''}
${errorCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ ERRORS (${errorCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.errors.map((error, index) => `
┌─ Error #${index + 1} ─────────────────────────────────────────────────
│
│ 📍 Line Number: ${error.line}
│
│ 📝 Description:
│ ${error.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${warningCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️ WARNINGS (${warningCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.warnings.map((warning, index) => `
┌─ Warning #${index + 1} ───────────────────────────────────────────────
│
│ 📍 Line Number: ${warning.line}
│
│ 📝 Description:
│ ${warning.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}
${infoCount > 0 ? `━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ️ SUGGESTIONS (${infoCount})
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${checkResults.info.map((info, index) => `
┌─ Suggestion #${index + 1} ────────────────────────────────────────────
│
│ 📍 Line Number: ${info.line}
│
│ 📝 Description:
│ ${info.message}
│
└──────────────────────────────────────────────────────────────────
`).join('\n')}
` : ''}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RECOMMENDATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${errorCount > 0 ? '• Fix all errors before deploying your HTML code.\n' : ''}${warningCount > 0 ? '• Review and address warnings for better code quality.\n' : ''}${infoCount > 0 ? '• Consider implementing suggestions for best practices.\n' : ''}${errorCount === 0 && warningCount === 0 ? '• Your code is production-ready!\n' : ''}• Validate your HTML regularly during development.
• Use semantic HTML5 elements for better accessibility.
• Keep your code clean and well-structured.
• Test across different browsers and devices.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ABOUT THIS REPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━This report was generated by CalcsHub HTML Checker, a free online
tool for validating HTML code and ensuring web standards compliance.Tool : HTML Checker
Website : CalcsHub.com
Description : Your Trusted Calculation And Solution Hub
Version : 1.0
Date : ${timestamp}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Thank you for using CalcsHub.com!
Visit us for more free web tools.━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╔════════════════════════════════════════════════════════════════╗
║ End of Report - CalcsHub.com © ${new Date().getFullYear()} ║
╚════════════════════════════════════════════════════════════════╝
`;const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `HTML-Validation-Report-${new Date().getTime()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('✓ Text Report downloaded successfully!');
}function printResults() {
window.print();
}function shareResults() {
const errorCount = checkResults.errors.length;
const warningCount = checkResults.warnings.length;
const shareText = `HTML Check Results: ${errorCount} errors, ${warningCount} warnings. Status: ${errorCount === 0 ? 'Valid ✓' : 'Invalid ✗'}. Check your HTML at CalcsHub.com`;if (navigator.share) {
navigator.share({
title: 'HTML Checker Results',
text: shareText
}).then(() => {
showNotification('✓ Results shared successfully!');
}).catch(err => console.log('Error sharing:', err));
} else {
// Fallback: copy to clipboard
navigator.clipboard.writeText(shareText).then(() => {
showNotification('✓ Results copied to clipboard!');
}).catch(() => {
alert('Share text:\n\n' + shareText);
});
}
}// Auto-resize textarea
const textarea = document.getElementById('htmlInput');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = Math.max(300, this.scrollHeight) + 'px';
});
