Common HTML validation errors

Run a validator on a few hundred websites and the same handful of mistakes account for the vast majority of the messages. The list below goes through them in rough order of frequency, explains what the checker is complaining about, and shows the markup that makes the message go away. Every example is short enough to compare side by side.

An element that was never closed

Message: Unclosed element div, or End tag for element div which is not open.

This is the classic. One missing closing tag and everything after it is nested one level deeper than you intended, which usually explains a layout that collapses for no visible reason. The validator reports the line where it gave up, not the line where the tag was forgotten, so look above the reported position.

<div class="card">
  <p>Some text
</div>

<div class="card">
  <p>Some text</p>
</div>

A paragraph is a special case: HTML allows you to leave </p> out in many situations, and the parser closes it for you when the next block element starts. That tolerance is exactly why people get surprised elsewhere. Close everything, it costs nothing.

A paragraph inside a paragraph

Message: No p element in scope but a p end tag seen.

A paragraph cannot contain another paragraph, nor a div, a list, a table or a heading. When the parser meets one of those inside an open paragraph, it silently closes the paragraph first, and your closing tag then has nothing to close. The result is a document tree that does not match your indentation at all, and styles that apply to the wrong elements.

<p>Introduction
  <div>A block</div>
</p>

<p>Introduction</p>
<div>A block</div>

The same identifier twice

Message: Duplicate ID value.

An identifier must be unique in the whole document. Two elements sharing one is not a cosmetic issue: getElementById returns only the first, a label points at the wrong field, and an anchor link jumps to an unpredictable place. It usually happens when a block gets copied and the identifier travels with it. Use a class when you need to mark several elements.

An image without an alt attribute

Message: An img element must have an alt attribute.

Every image needs the attribute, but the right value depends on the image. A photograph that carries meaning gets a short description of what it shows. An icon sitting next to a text label that already says the same thing gets an empty value, alt="", which tells assistive technology to skip it rather than read a file name aloud. Leaving the attribute out entirely is the only wrong answer.

<img src="chart.png" alt="Monthly visits, rising from 400 to 1200">
<img src="arrow.svg" alt="">

Attributes that do not exist

Message: Attribute X not allowed on element Y at this point.

Presentational attributes inherited from very old HTML are gone: align, bgcolor, border on tables and images, cellpadding, valign, width and height written as percentages. They belong in CSS now. The same message also appears when a custom attribute is invented; prefix it with data- and it becomes valid.

<table border="1" cellpadding="5" align="center">

<table class="data">

Obsolete elements

Message: The X element is obsolete.

The usual suspects are <center>, <font>, <big>, <strike>, <tt> and <marquee>. Browsers still display them, which is why they survive in old pages, but they have no place in a current document. Their replacements are CSS declarations: text-align, font-family, font-size, and <del> or <s> for struck text depending on the meaning.

A missing document language

Message: Consider adding a lang attribute to the html start tag.

This one arrives as a warning rather than an error, and it deserves more attention than its status suggests. Without it, a screen reader may pronounce your English text with the voice rules of whatever language it defaults to, and automatic translation has nothing to work from. One attribute fixes it: <html lang="en">.

Stray characters that should be entities

Message: Bad character after <, or Saw & in attribute value.

A less than sign in your text is read as the start of a tag, and an ampersand as the start of an entity. Inside ordinary text an ampersand alone is usually tolerated, but in an attribute value it is not, which bites on query strings.

<a href="/search?q=html&lang=en">Results for 5 < 10</a>

<a href="/search?q=html&amp;lang=en">Results for 5 &lt; 10</a>

Headings used as a font size

Message: none, and that is the problem.

Jumping from <h1> straight to <h4> because it looked better, or putting three <h1> elements on a page, is not always flagged by a validator, yet it breaks the outline that assistive technology and search engines rely on. Pick heading levels by the structure of the content, then set their size in CSS.

Block content inside an inline element

Message: Element div not allowed as child of element span.

A span, a strong or an em can hold text and other inline elements, not paragraphs or divs. The one modern exception is worth knowing: an anchor may wrap block content, so making a whole card clickable by putting the <a> around it is valid, as long as it contains no other interactive element.

Character encoding declared too late or not at all

Message: No character encoding declaration.

The declaration has to appear within the first 1024 bytes of the document, which in practice means immediately after the opening <head>. Put it before the title, especially if your title contains accented characters, otherwise the browser may have already started guessing.

<head>
  <meta charset="utf-8">
  <title>Page title</title>

Table structure that does not add up

Message: Table column count mismatch, or A table row was 3 columns wide and exceeded the column count.

Usually a colspan that counts one cell too many, or a forgotten <td> in one row. Count the cells row by row, remembering that a cell spanning two columns counts twice.

Keep going

If the errors concentrate in the head of your documents, the doctype and document structure guide covers what belongs there. If your stylesheet is also throwing complaints, see CSS validation. And if several of your errors involve alt text, labels or headings, they are accessibility issues as much as validation issues, which is the subject of our page on validation and accessibility.

The reference that settles every argument is the specification itself, maintained by the World Wide Web Consortium and published as the living standard by the WHATWG.