All of the following documentation is generated on-the-fly, in your browser, by slowparse.js and errors.jquery.js. If something looks amiss, run the actual output against the expected results at the test sute; if errors are reported, please feel free to file a bug.
You can also consult the live demo to see this error reporting used in an interactive widget.
hi</i>
The closing </i>
tag
here
doesn't pair with anything, because there are no opening tags that need to
be closed.
{ "type": "UNEXPECTED_CLOSE_TAG", "closeTag": { "name": "i", "start": 2, "end": 5 } }
<p>hi</i>
The closing </i>
tag
here
doesn't pair with the opening <p>
tag
here.
{ "type": "MISMATCHED_CLOSE_TAG", "openTag": { "name": "p", "start": 0, "end": 3 }, "closeTag": { "name": "i", "start": 5, "end": 8 } }
<br>hello</br>
The closing </br>
tag
here
is for a void element (that is, an element that doesn't need to be
closed).
{ "type": "CLOSE_TAG_FOR_VOID_ELEMENT", "closeTag": { "name": "br", "start": 9, "end": 13 } }
hello<p/>there
The <p>
tag
here
can't be self-closed, because <p>
is not
a void element; it must be closed with a separate
</p>
tag.
{ "type": "SELF_CLOSING_NON_VOID_ELEMENT", "name": "p", "start": 5, "end": 9 }
hello <em>there
The <em>
tag
here
never closes.
{ "type": "UNCLOSED_TAG", "openTag": { "name": "em", "start": 6, "end": 10 } }
<-lol>
The <
character
here appears
to be the beginning of a tag, but is not followed by a valid tag name.
If you just want a <
to appear on your Web
page, try using <
instead.
Or, see a list of HTML5 tags.
{ "type": "INVALID_TAG_NAME", "openTag": { "name": "", "start": 0, "end": 1 } }
hello <em>there</em dude.
The closing </em>
tag
here
doesn't end with a >
.
{ "type": "UNTERMINATED_CLOSE_TAG", "closeTag": { "name": "em", "start": 15, "end": 19 } }
<a class=foo bar>
The Attribute value here should start with an opening double quote.
{ "type": "UNQUOTED_ATTR_VALUE", "start": 9 }
The HTML5 specification actually allows unquoted attribute values, so long as they don't have spaces in them. However, this isn't commonly done outside of minifying HTML. Furthermore, by complicating the standard, our predictions about the user's intent also become ambiguous, which results in more cryptic and confusing error messages. By choosing to enforce monotony, we ease the learning process and provide more helpful errors.
hello <em </em>
The opening <em>
tag
here
doesn't end with a >
.
{ "type": "UNTERMINATED_OPEN_TAG", "openTag": { "start": 6, "end": 10, "name": "em" } }
hello <em class="foo>there</em>
The <em>
tag's
class
attribute has a value
here that
doesn't end with a closing double quote.
{ "type": "UNTERMINATED_ATTR_VALUE", "openTag": { "name": "em", "start": 6 }, "attribute": { "name": { "value": "class", "start": 10, "end": 15 }, "value": { "start": 16 } } }
hello <em class='foo>there</em>
The <em>
tag's
class
attribute has a value
here that
doesn't end with a closing double quote.
{ "type": "UNTERMINATED_ATTR_VALUE", "openTag": { "name": "em", "start": 6 }, "attribute": { "name": { "value": "class", "start": 10, "end": 15 }, "value": { "start": 16 } } }
hello <em class="foo'>there</em>
The <em>
tag's
class
attribute has a value
here that
doesn't end with a closing double quote.
{ "type": "UNTERMINATED_ATTR_VALUE", "openTag": { "name": "em", "start": 6 }, "attribute": { "name": { "value": "class", "start": 10, "end": 15 }, "value": { "start": 16 } } }
hello <em class='foo">there</em>
The <em>
tag's
class
attribute has a value
here that
doesn't end with a closing double quote.
{ "type": "UNTERMINATED_ATTR_VALUE", "openTag": { "name": "em", "start": 6 }, "attribute": { "name": { "value": "class", "start": 10, "end": 15 }, "value": { "start": 16 } } }
hi<!--blah
The comment here
doesn't end with a -->
.
{ "type": "UNTERMINATED_COMMENT", "start": 2 }
<style> a
Selector a still needs finalising with {
{ "type": "UNFINISHED_CSS_SELECTOR", "cssSelector": { "start": 8, "end": 9, "selector": "a" } }
<style> a {
Missing property for a.
{ "type": "MISSING_CSS_PROPERTY", "cssSelector": { "start": 8, "end": 9, "selector": "a" } }
<style> a { color
Property color still needs finalising with :
{ "type": "UNFINISHED_CSS_PROPERTY", "cssProperty": { "start": 12, "end": 17, "property": "color" } }
<style> a { color:
Missing value for color.
{ "type": "MISSING_CSS_VALUE", "cssProperty": { "start": 12, "end": 17, "property": "color" } }
<style> a { colour:
CSS property colour does not exist. You may want to see a list of CSS properties.
{ "type": "INVALID_CSS_PROPERTY_NAME", "cssProperty": { "start": 12, "end": 18, "property": "colour" } }
<style> a { color: red
Value red still needs finalising with ;
{ "type": "UNFINISHED_CSS_VALUE", "cssValue": { "start": 19, "end": 22, "value": "red" } }
<style> a { color: red;
Missing block closer or next property:value; pair following red.
{ "type": "MISSING_CSS_BLOCK_CLOSER", "cssValue": { "start": 19, "end": 22, "value": "red" } }
<style> a { color: red; }
Missing either a new CSS selector or the </style> tag here.
{ "type": "MISSING_CSS_SELECTOR", "cssBlock": { "start": 24, "end": 25 } }
<style> a { li {
Missing block closer or next property:value; pair following a.
{ "type": "MISSING_CSS_BLOCK_CLOSER", "cssValue": { "start": 8, "end": 12, "value": "a" } }
<style>
<!-- html comment in CSS block -->
</style>
HTML code was detected in CSS context starting here
{ "type": "HTML_CODE_IN_CSS_BLOCK", "html": { "start": 13, "end": 14 } }
<style>
<p>html code in CSS block</p>
</style>
HTML code was detected in CSS context starting here
{ "type": "HTML_CODE_IN_CSS_BLOCK", "html": { "start": 13, "end": 14 } }
<style> /* unterminated comment
The CSS comment here
doesn't end with a */
.
{ "type": "UNTERMINATED_CSS_COMMENT", "start": 8 }
The tree-inspectors.js
script must be included to enable these errors.
hi<script>alert('yo');</script>
Sorry, but security restrictions on this site prevent you from
using <script>
tags
here. If you really need to
use JavaScript, consider using jsbin
or jsfiddle.
{ "openTag": { "start": 2, "end": 10 }, "closeTag": { "start": 22, "end": 31 }, "type": "SCRIPT_ELEMENT_NOT_ALLOWED" }
<p onclick="alert('yo');">hi</p>
Sorry, but security restrictions on this site prevent you from using the JavaScript event handler attribute here. If you really need to use JavaScript, consider using jsbin or jsfiddle.
{ "name": { "start": 3, "end": 10 }, "value": { "start": 11, "end": 25 }, "type": "EVENT_HANDLER_ATTR_NOT_ALLOWED" }
<a href="javascript:alert('yo');">hi</a>
Sorry, but security restrictions on this site prevent you from
using the javascript:
URL
here.
If you really need to use JavaScript, consider using
jsbin
or jsfiddle.
{ "name": { "start": 3, "end": 7 }, "value": { "start": 8, "end": 33 }, "type": "JAVASCRIPT_URL_NOT_ALLOWED" }