Errors

There are various of error types for HTML and XHTML. There are the common pitfalls while creating a document.

Unintuitive Errors

Invalid syntax constructs that contributes senseless DOM trees. Example:

<table>
        <hr />
        ...
</table>

Table tag should always come with row tag <tr>, then column tag <th> or <td> depending on heading requirements, before presenting with any contents. In the above, it jumps straight into the content, which is a horizontal line <hr>. A proper version would be:

<table>
        <tr>
                <th> ... </th>
                <td> <hr /> </td>
                ...
        </tr>
</table>

Errors with Optional Recovery

Errors that is self-healable by client's parser. These types of errors are usually minor like missing close tag but is able to produce a proper DOM. In such case, the client's parser / browser will recover such errors automatically.

Incompatible Errors

Errors where tags or features are not available at the client's side parser and browser. These are usually recognized as essential errors. A good way to avoid such errors is to check the availability across different browsers using https://caniuse.com/.

Infoset Coercion Errors

More of parser's mismatch. The common case is having a XML consumer engaged with a HTML parser instead of XHTML version. Hence, most of the HTML-only syntax can be raised as errors.

Poor Performance Errors

Correct syntax but the generated DOM is inefficient or poor performance. Example:

<p><i>He dreamt.
<p><i>He dreamt that he ate breakfast.
<p><i>Then lunch.
<p><i>And finally dinner.

This renders the following DOM:

  1. p
  2. i
    1. #text: He dreamt.
  3. p
  4. i
    1. i
      1. #text: He dreamt that he ate breakfast.
  5. p
  6. i
    1. i
      1. i
        1. #text: Then lunch.
  7. p
  8. i
    1. i
      1. i
        1. i
          1. #text: And finally dinner.

Due to the fact that each unclosed <i> tags has to reconstruct itself for each paragraphs.

Fragile Syntax Constructs Errors

Usually due to misinterpreted syntax. Example:

<a href="?art&copy">Art and Copy</a>

The link is interpreted as ?art© instead due to the missing semicolon. The correct solution would be:

  • Use semi-colon at the end of the parameters: ?art&copy;
  • Escape reserved symbols: ?art&amp;copy

Legacy Interoperability Errors

Usually happens for legacy client parser / browser. Similar to incompatibility error, a good way to avoid such errors is to check the availability across different browsers using https://caniuse.com/.

Security Risks Errors

Errors that create security risk to both server and client sides. Example: UTF-7 - https://www.w3.org/TR/2017/REC-html52-20171214/references.html#biblio-rfc2152

Unclear Intention Errors

Unguessable errors done by authors. Example:

<h2>Contact details</h1>

It is unsure whether author wants lv-2 heading or lv-1 heading.

Typo Errors

Mistyped errors. Example:

  • <capton> instead of <caption>

Futuristic Errors

Errors that interfere with new syntax in the future use / deployment.

Dubious Semantic Errors

Mis-use tags without referring to specifications. Example, using <section> inside <kbd>.

Conflicting Semantic Errors

Tag with conflicting intents. Example:

<hr role="cell">
<input type=radio role=progressbar>

Is it a line or a cell?

Is it a radio input or a display progress bar?

Confusing Semantic Errors

Tag that is not used correctly. Example:

  1. <span> can be inside <div>, but not the other way round.
  2. <button> shouldn't have <textarea>. Keep them separate.

Specification Misunderstood Errors

Sometimes, some values cause more confusion than serving purposes. Example:

  • disabled can't be set as disabled="false"

Hungarian Notation Errors

Errors caused by hungarian notation. Example:

  • <area shape="circ" > should be <area shape="circle" >

Parser Peculiarities Errors

Bad use of tags. Example:

  • <form> shouldn't be inside any phrasing contents like <p>.

Hard to Debug Errors

Intentional errors that is very hard to debug. Example:

  • having 2 elements with the same id.
    • The hard part is the selection.

Wasting Time Errors

Errors that waste developer's time. Example:

  • <script> having src attribute ignores all contents' javascript. If a bug occurs, it causes developer to read those inline javascripts without realizing that they are not executed.

XHTML-HTML Portability Errors

Errors related to XHTML or HTML specific use tag. Example:

  • lang vs xml-lang
  • xmlns

Future Reservation Errors

Error related to future reserved use. Example:

  • target has predefined values.

Other Specification Errors

Any other specification errors especially related to media type.