HTML Guides for semicolon

Character references are how HTML represents special characters that would otherwise be interpreted as markup or that aren’t easily typed on a keyboard. They come in three forms:

• Named references like &, <, ©
• Decimal numeric references like <, ©
• Hexadecimal numeric references like <, ©

All three forms share the same structure: they begin with & and must end with ;. When you omit the trailing semicolon, the HTML parser enters error recovery mode. Depending on the context, it may still resolve the reference (browsers are lenient), but this behavior is not guaranteed and varies across situations. For example, &copy without a semicolon might still render as ©, but &notit could be misinterpreted as the &not; (¬) reference followed by it, producing unexpected output like “¬it” instead of the literal text “&notit”.

Why this matters

• Unpredictable rendering: Without the semicolon, browsers use heuristic error recovery that can produce different results depending on surrounding text. What looks fine today might break with different adjacent characters.
• Standards compliance: The WHATWG HTML specification requires the semicolon terminator. Omitting it is a parse error.
• Maintainability: Other developers (or future you) may not realize the ampersand was intended as a character reference, making the code harder to read and maintain.
• Data integrity: In URLs within href attributes, a missing semicolon on a character reference can corrupt query parameters and produce broken links.

How to fix it

1. Add the missing semicolon to the end of every character reference.
2. If you meant a literal ampersand, use &amp; instead of a bare &. This is especially common in URLs with query strings.
3. Search your document for patterns like &something without a trailing ; to catch all instances.

Examples

❌ Missing semicolon on named references

<p>5 &lt 10 and 10 &gt 5</p>
<p>&copy 2024 All rights reserved</p>

✅ Properly terminated named references

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>&copy; 2024 All rights reserved</p>

❌ Missing semicolon on numeric references

<p>The letter A: &#65</p>
<p>Hex example: &#x41</p>

✅ Properly terminated numeric references

<p>The letter A: &#65;</p>
<p>Hex example: &#x41;</p>

❌ Bare ampersand in a URL (common mistake)

<a href="https://example.com/search?name=alice&age=30">Search</a>

Here the validator sees &age and tries to interpret it as a character reference without a semicolon.

✅ Escaped ampersand in a URL

<a href="https://example.com/search?name=alice&amp;age=30">Search</a>

❌ Ambiguous reference causing wrong output

<p>The entity &notit; doesn't exist, but &not without a semicolon resolves to ¬</p>

✅ Use &amp; when you want a literal ampersand

<p>The text &amp;notit is displayed literally when properly escaped.</p>

A quick rule of thumb: every & in your HTML should either be the start of a complete, semicolon-terminated character reference, or it should itself be written as &amp;.

CSS uses semicolons as delimiters between declarations. When you forget one, the parser tries to interpret the next property name as part of the previous declaration’s value. For example, if you write z-index: auto content: "", the parser reads auto content as if it were the value of z-index, which is invalid. It then encounters the colon after what it expected to be a value, resulting in a parsing error that can cause one or more of your declarations to be silently ignored.

This is a problem for several reasons:

• Broken styles: The browser will typically discard the malformed declaration and potentially subsequent ones, leading to unexpected visual results that can be difficult to debug.
• Standards compliance: The CSS specification requires semicolons between declarations. While the last declaration in a block technically doesn’t need a trailing semicolon, omitting it is a common source of bugs when new declarations are added later.
• Maintainability: Always including semicolons — even on the last declaration — is a widely recommended best practice. It prevents this exact class of errors when code is edited or rearranged in the future.

To fix this issue, locate the line referenced in the error message and check the declaration immediately before it. Add the missing semicolon at the end of that declaration.

Examples

❌ Missing semicolon between declarations

The semicolon is missing after z-index: auto, so the parser cannot recognize content as a new property:

<style>
  .overlay {
    z-index: auto
    content: "";
    display: block;
  }
</style>

✅ Fixed with semicolon added

Adding the semicolon after auto properly terminates the z-index declaration:

<style>
  .overlay {
    z-index: auto;
    content: "";
    display: block;
  }
</style>

❌ Missing semicolon with shorthand properties

Shorthand values with multiple parts can make it harder to spot the missing semicolon:

<style>
  .card {
    margin: 10px 20px 10px 20px
    padding: 1em;
    border: 1px solid #ccc;
  }
</style>

✅ Fixed shorthand example

<style>
  .card {
    margin: 10px 20px 10px 20px;
    padding: 1em;
    border: 1px solid #ccc;
  }
</style>

❌ Missing semicolon on the last declaration causes issues when editing

While technically valid, omitting the trailing semicolon on the last declaration becomes a bug the moment a new line is added:

<style>
  .button {
    color: white;
    background: blue
    border-radius: 4px;
  }
</style>

Here, background: blue was originally the last declaration (without a semicolon). When border-radius was added afterward, the missing semicolon was not noticed.

✅ Best practice: always include a trailing semicolon

<style>
  .button {
    color: white;
    background: blue;
    border-radius: 4px;
  }
</style>

By consistently ending every declaration with a semicolon — including the last one in each rule block — you avoid this error entirely and make your stylesheets easier to maintain.