HTML Code Validator - Free Online Syntax Check & Formatting

Input HTML Code

<div class="stats" id="inputStats"></div>
    <div class="btn-row">
      <button class="btn btn-primary" onclick="validateHtml()">🔍 Validate</button>
      <button class="btn btn-success" onclick="formatHtml()">✨ Format Code</button>
      <button class="btn btn-secondary" onclick="loadExample()">📋 Load Example</button>
      <button class="btn btn-danger" onclick="clearAll()">🗑 Clear</button>
    </div>
  </div>

<div class="result-section" id="resultSection" style="display:none">
    <h2>Validation Result</h2>
    <div id="statusBadge"></div>
    <div class="stats" id="resultStats"></div>
    <div class="error-list" id="errorList"></div>
    <div id="formattedOutput" style="display:none;margin-top:12px">
      <h3 style="font-size:1rem;color:#f1f5f9;margin-bottom:8px">Formatted Code</h3>
      <div class="code-output" id="codeOutput"></div>
      <div class="btn-row" style="margin-top:8px">
        <button class="btn btn-secondary" onclick="copyFormatted()">📋 Copy Formatted</button>
      </div>
    </div>
  </div>

<div class="ad-placeholder">Ad Placeholder - Middle (728×90)</div>

<div class="info-section">
    <h2>HTML Validation Knowledge</h2>
    <h3>Why Validate HTML Code?</h3>
    <p>Browsers have powerful error-recovery capabilities and will try to render even malformed HTML. However, this forgiveness comes at a cost: different browsers may handle errors differently, leading to inconsistent page behavior across environments. Additionally, invalid HTML can negatively impact search engine crawling, screen reader parsing (accessibility), and the proper functioning of CSS and JavaScript.</p>

<h3>Common HTML Error Types</h3>
    <ul>
      <li><strong>Unclosed tags</strong>: e.g., <code><div></code> missing its matching <code></div></code></li>
      <li><strong>Invalid nesting</strong>: e.g., <code><b><i>text</b></i></code> (crossed nesting)</li>
      <li><strong>Missing attribute quotes</strong>: e.g., <code><div class=box></code> should be <code><div class="box"></code></li>
      <li><strong>Incorrect self-closing syntax</strong>: e.g., <code><br></br></code> should be <code><br></code> or <code><br /></code></li>
      <li><strong>Illegal child elements</strong>: e.g., <code><ul></code> can only contain <code><li></code> as direct children</li>
    </ul>

<section class="info-section">
      <h2>Usage Guide</h2>
      <p>This HTML code validator is simple yet powerful. Here is the detailed usage guide:</p>
      <p><strong>Validate Code:</strong> Paste or type the HTML code you want to validate into the input box, then click the "Validate" button. The tool will analyze the code structure in real time, checking tag closure, nesting relationships, and attribute syntax. The validation result will show the overall status (Pass / Warning / Fail) and list all discovered issues with their specific locations.</p>
      <p><strong>Format Code:</strong> Click the "Format Code" button to automatically reformat your HTML with standard indentation. The formatted code will appear in the result area, ready to copy and use. The formatting handles tag alignment, attribute wrapping, and empty line cleanup, making the code much more readable.</p>
      <p><strong>Load Example:</strong> If you are unsure how to start, click the "Load Example" button to insert a sample HTML snippet containing several common errors. Validate this example first to observe how the tool detects and reports issues, then try validating your own code.</p>
    </section>

<section class="info-section">
      <h2>Use Cases</h2>
      <p>The HTML code validator has broad applications in front-end development workflows:</p>
      <p><strong>Development Debugging:</strong> Validate code structure at any time while writing HTML templates or components. This is especially valuable when using frameworks like Vue or React, where complex nesting logic can easily produce tag closure errors. Use this tool to quickly catch structural problems before committing code.</p>
      <p><strong>Code Review:</strong> In team collaboration, lead developers can use this tool to batch-check HTML code submitted by team members, ensuring consistent code quality standards. Integrating validation into your CI/CD pipeline can automatically block builds that contain structural errors.</p>
      <p><strong>Learning and Teaching:</strong> For HTML beginners, this tool is an excellent learning aid. By intentionally writing incorrect code and observing the validation results, learners can intuitively understand HTML syntax rules and browser error-recovery behavior. Teachers can also use this tool in class to demonstrate common mistakes and their impact.</p>
    </section>

<section class="info-section">
      <h2>Extended Knowledge</h2>
      <p><strong>HTML Parsing Error Recovery:</strong> When parsing HTML, browsers follow the error-recovery rules defined in the HTML5 specification. For example, an unclosed <code><p></code> tag is automatically closed when the next block-level element is encountered; a missing <code><tbody></code> inside a table is implicitly inserted. While browsers try their best to fix errors, this implicit behavior may vary slightly across browsers, so explicitly writing correct structure is the best practice.</p>
      <p><strong>Accessibility and Semantics:</strong> Validating HTML structure not only affects rendering consistency but also directly impacts web accessibility. Screen readers rely on correct HTML structure to understand page content hierarchy. For example, <code><button></code> is more accessible than <code><div onclick></code> because it carries built-in keyboard interaction and focus management semantics.</p>
      <p><strong>Related Standards:</strong> Beyond HTML structure validation, front-end development also involves CSS syntax validation (CSS Validator), JavaScript linting (ESLint), and overall code style consistency (Prettier). Using these tools together establishes a complete front-end code quality assurance system.</p>
    </section>

<div class="faq-item">
      <h3>What issues can the HTML validator detect?</h3>
      <p>This tool can detect unclosed tags, mismatched open/close tags, missing quotes around attribute values, invalid nesting, missing DOCTYPE declarations, and incorrect self-closing tag syntax among other common HTML errors.</p>
    </div>
    <div class="faq-item">
      <h3>Is the validation process safe? Will my code be uploaded?</h3>
      <p>Completely safe. All validation logic runs locally in your browser. No code is ever sent to any server. You can confidently validate HTML that contains sensitive information.</p>
    </div>
    <div class="faq-item">
      <h3>Does the auto-fix feature change my code structure?</h3>
      <p>The auto-fix only corrects explicit syntax errors such as closing unclosed tags and fixing attribute quotes. It does not modify your business logic or content structure. We recommend copying your original code as a backup before applying fixes.</p>
    </div>
    <div class="faq-item">
      <h3>Why does my HTML display fine in browsers but the validator reports errors?</h3>
      <p>Browsers have powerful error-recovery mechanisms that automatically fix many HTML errors (such as auto-closing unclosed tags). However, this does not mean the code is correct - malformed HTML may behave inconsistently across browsers and can hurt SEO and accessibility.</p>
    </div>
    <div class="faq-item">
      <h3>Does it support HTML5 semantic tags?</h3>
      <p>Yes. The tool includes a comprehensive whitelist of HTML5 tags, including semantic elements like article, section, nav, header, footer, main, aside, figure, figcaption, time, mark, and multimedia tags like video, audio, canvas, and svg.</p>
    </div>
    <div class="faq-item">
      <h3>Can the validator detect CSS and JavaScript errors?</h3>
      <p>This tool focuses on HTML structural validation. It does not deeply inspect CSS code inside style tags or JavaScript inside script tags. For CSS validation, use our CSS Formatter tool; for JS, use our JS Formatter tool.</p>
    </div>
  </div>

<div class="ad-placeholder">Ad Placeholder - Bottom (728×90)</div>
</div>

<div class="footer container">
  <div style="margin-bottom:12px">
    <a href="../index.html">Home</a>
    <a href="../index.html">All Tools</a>
    <a href="mailto:shexiangsheng@gmail.com">Contact</a>
    <a href="../html-validator/">中文</a>
  </div>
  <p>Online HTML Code Validator · Pure Front-End · No Data Sent to Server</p>
  <p style="margin-top:4px">Tag Closure Check · Nesting Validation · Attribute Syntax · Formatting Output</p>
  <p style="margin-top:8px;color:#475569;font-size:.8rem">Feedback: shexiangsheng@gmail.com</p>
</div>

function showToast(msg) {
  toast.textContent = msg;
  toast.classList.add('show');
  setTimeout(function() { toast.classList.remove('show'); }, 2000);
}

function updateInputStats() {
  var text = htmlInput.value;
  var lines = text.length ? text.split('\n').length : 0;
  inputStats.innerHTML = '<span>Chars: ' + text.length + '</span><span>Lines: ' + lines + '</span>';
}

var voidTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
var html5Tags = new Set(['a','abbr','address','area','article','aside','audio','b','base','bdi','bdo','blockquote','body','br','button','canvas','caption','cite','code','col','colgroup','data','datalist','dd','del','details','dfn','dialog','div','dl','dt','em','embed','fieldset','figcaption','figure','footer','form','h1','h2','h3','h4','h5','h6','head','header','hgroup','hr','html','i','iframe','img','input','ins','kbd','label','legend','li','link','main','map','mark','math','menu','meta','meter','nav','noscript','object','ol','optgroup','option','output','p','param','picture','pre','progress','q','rp','rt','ruby','s','samp','script','search','section','select','slot','small','source','span','strong','style','sub','summary','sup','svg','table','tbody','td','template','textarea','tfoot','th','thead','time','title','tr','track','u','ul','var','video','wbr']);

function validateHtml() {
  var html = htmlInput.value.trim();
  if (!html) { showToast('Please enter HTML code'); return; }

var errors = [];
  var warnings = [];

// Check DOCTYPE
  if (!/<!DOCTYPE\s+html/i.test(html)) {
    warnings.push({line: 1, msg: 'Missing DOCTYPE declaration', hint: 'Add <!DOCTYPE html> at the beginning'});
  }

// Parse tags
  var tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9-]*)[^>]*?\/?>/g;
  var stack = [];
  var match;
  var lineNum = 1;

while ((match = tagRegex.exec(html)) !== null) {
    var fullTag = match[0];
    var tagName = match[1].toLowerCase();
    var startPos = match.index;

// Calculate line number
    lineNum = 1;
    for (var i = 0; i < startPos; i++) {
      if (html[i] === '\n') lineNum++;
    }

var isClosing = fullTag[1] === '/';
    var isSelfClosing = fullTag[fullTag.length - 2] === '/' || voidTags.has(tagName);

if (!html5Tags.has(tagName)) {
      warnings.push({line: lineNum, msg: 'Unknown tag: <' + tagName + '>', hint: 'Please verify the tag name spelling'});
      continue;
    }

if (isClosing) {
      var found = false;
      for (var si = stack.length - 1; si >= 0; si--) {
        if (stack[si].name === tagName) {
          for (var j = stack.length - 1; j > si; j--) {
            errors.push({line: stack[j].line, msg: 'Tag not properly closed: <' + stack[j].name + '> (opened at line ' + stack[j].line + ')', hint: 'Missing </' + stack[j].name + '> before </' + tagName + '>'});
          }
          stack.length = si;
          found = true;
          break;
        }
      }
      if (!found) {
        errors.push({line: lineNum, msg: 'Extra closing tag: </' + tagName + '>', hint: 'No matching opening tag <' + tagName + '>'});
      }
    } else if (!isSelfClosing) {
      stack.push({name: tagName, line: lineNum});
    }

// Check attribute quotes
    var attrRegex = /\s([a-zA-Z-:]+)=(?!"|')([^\s>]*)/g;
    var attrMatch;
    while ((attrMatch = attrRegex.exec(fullTag)) !== null) {
      warnings.push({line: lineNum, msg: 'Missing quotes on attribute: ' + attrMatch[1] + '=' + attrMatch[2], hint: 'Use ' + attrMatch[1] + '="' + attrMatch[2] + '"'});
    }
  }

// Unclosed tags
  for (var ui = 0; ui < stack.length; ui++) {
    errors.push({line: stack[ui].line, msg: 'Unclosed tag: <' + stack[ui].name + '>', hint: 'Missing </' + stack[ui].name + '> at end of document'});
  }

// Display results
  resultSection.style.display = 'block';
  var totalIssues = errors.length + warnings.length;

if (totalIssues === 0) {
    statusBadge.innerHTML = '<span class="status-badge status-pass">✅ Validation Passed - No issues found</span>';
  } else if (errors.length === 0) {
    statusBadge.innerHTML = '<span class="status-badge status-warn">⚠️ ' + warnings.length + ' warning(s) found</span>';
  } else {
    statusBadge.innerHTML = '<span class="status-badge status-fail">❌ ' + errors.length + ' error(s), ' + warnings.length + ' warning(s)</span>';
  }

resultStats.innerHTML = '<span>Errors: ' + errors.length + '</span><span>Warnings: ' + warnings.length + '</span><span>Total Lines: ' + html.split('\n').length + '</span>';

var errorHtml = '';
  for (var ei = 0; ei < errors.length; ei++) {
    var e = errors[ei];
    errorHtml += '<div class="error-item"><span class="error-line">Line ' + e.line + '</span><div><div class="error-msg">❌ ' + e.msg + '</div><div class="error-hint">💡 ' + e.hint + '</div></div></div>';
  }
  for (var wi = 0; wi < warnings.length; wi++) {
    var w = warnings[wi];
    errorHtml += '<div class="error-item warn"><span class="error-line">Line ' + w.line + '</span><div><div class="error-msg">⚠️ ' + w.msg + '</div><div class="error-hint">💡 ' + w.hint + '</div></div></div>';
  }

if (totalIssues === 0) {
    errorHtml = '<p style="color:#4ade80;font-size:.9rem">🎉 Congratulations! Your HTML code structure is perfect - no issues found.</p>';
  }
  errorList.innerHTML = errorHtml;
  formattedOutput.style.display = 'none';

resultSection.scrollIntoView({behavior: 'smooth', block: 'start'});
}

function formatHtml() {
  var html = htmlInput.value.trim();
  if (!html) { showToast('Please enter HTML code'); return; }

var formatted = '';
  var indent = 0;
  var indentSize = 2;
  var tokens = html.split(/(<[^>]+>)/g);
  for (var ti = 0; ti < tokens.length; ti++) {
    var token = tokens[ti].trim();
    if (!token) continue;

if (token[0] === '<') {
      var fc = token[1] === '/';
      var sc = token[token.length - 2] === '/' || voidTags.has(token.replace(/[<\/>]/g, '').split(' ')[0].toLowerCase());
      var tn = token.replace(/[<\/>]/g, '').split(' ')[0].toLowerCase();

if (fc) {
        indent = Math.max(0, indent - indentSize);
        formatted += ' '.repeat(indent) + token + '\n';
      } else if (sc) {
        formatted += ' '.repeat(indent) + token + '\n';
      } else {
        formatted += ' '.repeat(indent) + token + '\n';
        if (!['html','head','body'].includes(tn)) {
          indent += indentSize;
        }
      }
    } else {
      var lines = token.split(/\s+/).filter(function(s) { return s; });
      if (lines.length > 0) {
        formatted += ' '.repeat(indent) + lines.join(' ') + '\n';
      }
    }
  }

resultSection.style.display = 'block';
  statusBadge.innerHTML = '<span class="status-badge status-pass">✨ Formatting Complete</span>';
  resultStats.innerHTML = '<span>Original Lines: ' + html.split('\n').length + '</span><span>Formatted Lines: ' + formatted.split('\n').length + '</span>';
  errorList.innerHTML = '';
  codeOutput.textContent = formatted;
  formattedOutput.style.display = 'block';
  resultSection.scrollIntoView({behavior: 'smooth', block: 'start'});
}

function loadExample() {
  var example = '<!DOCTYPE html>\n<html>\n<head>\n  <title>Example Page</title>\n</head>\n<body>\n  <div class=container>\n    <div>Title</div>\n    <p>Paragraph content</p>\n    <ul>\n      <li>Item 1\n      <li>Item 2</li>\n    </ul>\n    <img src=test.png>\n  </div>\n

<div id="feedback-widget" style="position:fixed;bottom:20px;right:20px;z-index:1000">
<button id="feedback-toggle" onclick="toggleFeedback()" style="width:48px;height:48px;border-radius:50%;background:rgba(6,182,212,.2);border:2px solid rgba(6,182,212,.5);color:#22d3ee;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .2s" onmouseover="this.style.background='rgba(6,182,212,.4)'" onmouseout="this.style.background='rgba(6,182,212,.2)'">💬</button>
<div id="feedback-panel" style="display:none;position:absolute;bottom:56px;right:0;width:320px;background:#1e293b;border:1px solid rgba(6,182,212,.3);border-radius:12px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
<span style="color:#f1f5f9;font-size:.95rem;font-weight:600">📝 Feedback</span>
<button onclick="toggleFeedback()" style="background:none;border:none;color:#64748b;font-size:1.2rem;cursor:pointer">✕</button>
</div>
<select id="feedback-type" style="width:100%;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:8px 10px;color:#e2e8f0;font-size:.85rem;margin-bottom:8px;outline:none">
<option value="feedback">💡 Feature Request</option>
<option value="bug">🐛 Bug Report</option>
<option value="other">💬 Other</option>
</select>
<textarea id="feedback-text" placeholder="Describe your suggestion or issue..." style="width:100%;height:100px;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:10px;color:#e2e8f0;font-size:.85rem;resize:vertical;outline:none;font-family:inherit" maxlength="1000">

0/1000

🔍 Online HTML Code Validator

Input HTML Code