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:
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©">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©
- Escape reserved symbols:
?art&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:
<span>
can be inside<div>
, but not the other way round.<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 asdisabled="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>
havingsrc
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
vsxml-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.