Spot and fix HTML errors before they break your page.
A validator reads your markup the way a browser's parser does, then measures it against the HTML specification — flagging anything malformed, ambiguous, or quietly corrected behind your back.
When a browser meets broken HTML it almost never shows an error. Instead it guesses — closing tags for you, relocating stray content, and building a document tree that may not match what you intended. That forgiveness is convenient right up until two browsers guess differently and your layout breaks in one of them. Validation removes the guesswork: it points at the exact line where your markup leaves the standard, so you fix the cause instead of chasing the symptom.
Checking happens across several layers at once, from raw characters up to document semantics. Write your markup in the HTML code editor, then run it through the points below.
Every opened tag is closed, angle brackets and quotes are balanced, and attribute values are properly delimited. Malformed syntax is the single most common reason a page renders nothing like its code.
The specification defines which elements may contain which. An <li> belongs inside a <ul> or <ol>; a block element cannot sit inside a <p>. The checker catches nesting the parser would otherwise silently rearrange.
Some attributes are mandatory: <img> needs alt, the root <html> needs lang, and form controls need names. Omit them and the page looks valid but loses accessibility, function, or both.
A conforming page needs a doctype, one root <html>, a <head> with a character set, and a <body>. Skip the doctype and browsers drop into quirks mode with legacy box behaviour.
Elements such as <center>, <font> and <marquee>, and attributes like bgcolor, were dropped from the standard years ago. They may still render, but they flag as errors and belong in CSS now.
An id must be unique on the page. Duplicates break in-page anchors, label associations, and any script or stylesheet that targets that id — a subtle bug the validator surfaces at once.
Most validation failures come from the same short list. Here are the ones you will meet most often, why each one matters, and the exact fix.
A tag you open but never close stays open, swallowing everything after it. Give it a matching end tag — <p>Hello</p>, not a bare <p>Hello. Void elements such as <img> and <br> need no closing tag at all.
Elements must nest, never cross. <b><i>text</b></i> is invalid because the bold closes before its child. Close the inner element first: <b><i>text</i></b>.
<img src="logo.png"> with no alt fails validation and hides the image from screen readers. Describe it — alt="Company logo" — or use an empty alt="" for purely decorative images.
An id must be unique. Two elements sharing id="main" break in-page links, label associations and scripts. Rename one, or switch to a class when you genuinely need a shared hook.
A literal & or < in text confuses the parser. Write them as entities — & and < — so Tom & Jerry appears as Tom & Jerry in the source.
Leave out <!DOCTYPE html> and the browser renders in quirks mode, reviving legacy box-model behaviour. Make it the very first line of every document, above <html>.
<input type=text value=hi there> breaks at the space — there is read as a stray attribute. Quote the values: <input type="text" value="hi there">.
<ul> and <ol> may only hold <li> children. Wrap every entry — <li>Item</li> — instead of dropping text straight into the list.
Every entry below is a real validation failure paired with the exact correction. Read the invalid version, then the valid one — the fix is almost always smaller than the bug.
An element you open but never close keeps absorbing the content after it until the parser guesses where it should end.
<p>First paragraph.
<p>Second paragraph.<p>First paragraph.</p>
<p>Second paragraph.</p>Elements must nest cleanly: an inner element has to close before the element that contains it does.
<b><i>Bold italic</b></i><b><i>Bold italic</i></b>Every <img> needs an alt attribute — descriptive for meaningful images, empty for decorative ones.
<img src="team.jpg"><img src="team.jpg"
alt="Our team on launch day">An id must be unique on the page; repeats break in-page anchors, label associations, and any script or stylesheet that targets that id.
<div id="card"></div>
<div id="card"></div><div id="card-1"></div>
<div id="card-2"></div>A bare &, < or > in text can be read as markup. Write them as HTML entities.
<p>Fish & chips for < $5</p><p>Fish & chips for < $5</p>With no doctype the browser falls back to quirks mode and its legacy box model. Make it the very first line of the document.
<html>
<head>…</head><!DOCTYPE html>
<html lang="en">
<head>…</head>An unquoted value ends at the first space, so everything after it is misread as extra attributes.
<input type=text value=Jane Doe><input type="text" value="Jane Doe">A <p> may hold only inline content; a block element inside it forces the paragraph to close early, scrambling the tree.
<p>Summary <div>details</div></p><p>Summary</p>
<div>details</div>The lang attribute tells browsers, screen readers and translation tools which language the page is written in.
<html><html lang="en">Declare UTF-8 as the first thing inside <head>, or accented and non-Latin characters can render as garbled symbols.
<head>
<title>Café menu</title>
</head><head>
<meta charset="UTF-8">
<title>Café menu</title>
</head>A <label> must reference its control with matching for and id (or wrap it), or clicking the label does nothing and screen readers lose the field name.
<label>Email</label>
<input type="email"><label for="email">Email</label>
<input type="email" id="email">Headings form the page outline. Jumping from <h1> straight to <h4> leaves gaps that confuse readers and crawlers reading that outline.
<h1>Guide</h1>
<h4>Step one</h4><h1>Guide</h1>
<h2>Step one</h2><ul> and <ol> may contain only <li> children — wrap every entry rather than dropping text straight in.
<ul>
Apples
Pears
</ul><ul>
<li>Apples</li>
<li>Pears</li>
</ul>Presentational tags such as <center> and attributes like bgcolor were dropped from HTML5. Move the styling into CSS.
<center>
<p bgcolor="yellow">Sale</p>
</center><p style="text-align:center;
background:yellow">Sale</p>The same mistake often bites in three places at once. This table maps common validation failures to their cost for search visibility, assistive technology, and how the page draws.
| Mistake | SEO impact | Accessibility impact | Rendering impact |
|---|---|---|---|
Malformed <head> |
Title and meta description can be dropped from results | Page language and context become unclear | Body content can slip into the head and never render |
| Missing alt text | Images can't be understood or ranked in image search | Screen readers announce nothing, or read the filename | Broken images show no descriptive fallback |
| Duplicate id | In-page anchor links may resolve to the wrong spot | Label-to-input associations break | Scripts and styles target the wrong element |
| Skipped heading levels | Weakens the topical outline crawlers read | Heading-by-heading navigation jumps or stalls | Minimal — a hidden problem with no visible symptom |
Unclosed <div> |
Content can be misattributed to the wrong section | Focus and reading order jump unexpectedly | Later sections nest inside the wrong container |
| Invalid JSON-LD | Rich results silently never appear | Minimal — not surfaced to assistive tech | Minimal — no visible change |
| Missing lang attribute | Wrong-language targeting and hreflang confusion | Screen reader uses the wrong pronunciation rules | Minimal — no visible change |
| Obsolete presentational tags | Bulkier, noisier markup that is harder to crawl | Meaning is lost — no semantics for assistive tech | Styling drifts between browser engines |
Clean markup is not pedantry. Broken HTML carries concrete costs — for how you rank, who can use your page, and how consistently it renders.
Reach for semantic markup from the start — build and test it in the HTML5 editor — and most of these problems never appear. Once the validator comes back clean, download your project as ready-to-deploy files.
Run through this once before every deploy. It catches the errors a validator flags and the standards issues it can't, so the page you publish is the page you meant to.
<!DOCTYPE html> is the first line, and <html> carries a lang attribute.<meta charset="UTF-8"> and a responsive viewport meta sit at the top of <head>.alt="" for decorative ones.<br> and <img> are not given end tags.<label>.href="#" placeholders and no broken relative paths.&, < and > in text are written as entities.Clear on every point? Assemble and re-check the page in the HTML code editor, then download the validated project as deploy-ready files.
Full-featured HTML editor with live preview and Monaco engine.
Code on the left, live rendered output on the right.
Real-time preview that updates with every keystroke.
Unified editor for all three front-end languages.
Manage complex projects with multiple files and folders.
Monaco-powered editor with VS Code shortcuts and IntelliSense.
Catch syntax errors, unclosed tags and compliance issues in real-time — before they reach production.
Want to run your HTML, CSS, and JavaScript code instantly and see the result live? Try our free HTML Runner Online — a lightweight browser-based code runner and viewer with real-time live preview. No download or signup required.
Open HTML Runner Online