Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
<!doctype html>
<title>About the Nu Html Checker</title>
<meta charset=utf-8>
<style>
html, body, h1, div#banner, div#banner a {
	font-weight: normal;
	font-family: Helvetica, Arial, Sans-Serif;
	font-size: 100%;
}

strong {
	color: rgb(54, 93, 149);
}

a img {
	border: 0;
}

h1#title {
	font-family: "Myriad Web", "Myriad Pro", "Gill Sans", Helvetica, Arial, Sans-Serif;
	background-color: #365D95;
	color: #fdfdfd;
	font-size: 1.6em;
	padding: 0.430em;
	line-height: 1;
	border-radius: 6px;
}

h1#title a, h1#title a img {
  background-color: #365D95;
}

h1#title a:link, h1#title a:hover, h1#title a:visited, h1#title a:active {
  color: #fdfdfd !important;
  text-decoration: none;
}

h1#title img {
	vertical-align: middle;
	margin-right: 0.7em;
}

div#banner {
	margin: 1.5em 2em;
}

div, p, li, h2 {
	font-family: sans-serif;
}

h2 {
	font-size: 120%;
	color: rgb(54, 93, 149);
}

img#w3clogo {
	margin-right: 6px !important;
}

img#html5-logo {
  margin-top: 12px;
}

div#banner {
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 18px
}

body > p, body > ul {
	margin-right: 3%;
	margin-left: 3%;
}

section {
	margin-top: 0px;
	padding-left: 3%;
	margin-right: 3%;
	margin-bottom: 12px;
}

section:last-child {
  margin-bottom: 700px;
}

body {
	font-family: sans-serif;
	font-size: inherit;
	margin: 0;
}

</style>
<div id="banner"><h1 id="title"><a href="."><span>Nu Html Checker</span></a></h1></div>

<p>The Nu Html Checker (v.Nu) checks HTML documents.
It is an experimental tool and its behavior remains
subject to change. In particular, because new types of error checks
continue to be actively added to the checker, there is no guarantee
provided that if the checker reports zero errors for a particular document
at one point in time, it will report zero errors for that same document at
some later point in time.

<p>The Nu Html Checker should not be used as a means to attempt to
unilaterally enforce pass/fail conformance of documents to any particular
specifications; it is intended solely as a checker, not as a pass/fail
certification mechanism.

<section id=extras>
<h2>Extras</h2>
<p>
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a>
has created the following bookmarklets you can use in conjunction with the Nu Html Checker.
<ul>
<li>
<a href='javascript:(function(){function%20c(a,b){var%20c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var%20e=function(a){for(var%20b="",a=a.firstChild;a;){switch(a.nodeType){case%20Node.ELEMENT_NODE:b+=a.outerHTML;break;case%20Node.TEXT_NODE:b+=a.nodeValue;break;case%20Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case%20Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case%20Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE%20"+a.name+">\n"}a=a.nextSibling}return%20b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("content",e);document.body.appendChild(d);d.submit()})();'>Check serialized DOM of current page</a>: grabs the serialized DOM of whatever page you’re currently browsing and sends it to the checker</li>
<li>
<a href='javascript:(function(){function%20c(a,b){var%20c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var%20e=function(a){for(var%20b="",a=a.firstChild;a;){switch(a.nodeType){case%20Node.ELEMENT_NODE:b+=a.outerHTML;break;case%20Node.TEXT_NODE:b+=a.nodeValue;break;case%20Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case%20Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case%20Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE%20"+a.name+">\n"}a=a.nextSibling}return%20b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/nu/";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("showsource","yes");c("out","json");c("content",e);document.body.appendChild(d);d.submit()})();'>Check serialized DOM of current page (results as JSON)</a>: same as above but returns the results from the checker as JSON</li>
<li>
<a href='javascript:(function(){var filterStrings=["tag seen","Stray end tag","Bad start tag","violates nesting rules","Duplicate ID","first occurrence of ID","Unclosed element","not allowed as child of element","unclosed elements","not allowed on element","unquoted attribute value","Duplicate attribute"];var filterRE=filterStrings.join("|");var root=document.getElementById("results");if(!root){return;} var results=root.getElementsByTagName("li");var result,resultText;for(var i=0;i<results.length;i++){result=results[i];if(results[i].className!==""){resultText=(result.innerText!==undefined?result.innerText:result.textContent)+"";if(resultText.match(filterRE)===null){result.style.display="none";result.className=result.className+" steveNoLike";}}}})();'>Check for WCAG 2.0 parsing compliance</a>:
filters checker results to just show messages relevant to
<a href="http://www.paciellogroup.com/blog/2012/02/wcag-2-0-parsing-error-bookmarklet/">requirements in the WCAG 2.0 spec</a>
</ul>
</section>

<section id=issues>
<h2>Reporting issues</h2>
<p>
To report bugs, request new features, or ask questions, please
<a href="https://github.com/validator/validator/issues">raise an issue</a>
or send mail to
<a href="mailto:www-validator@w3.org">www-validator@w3.org</a>.
</section>

<section id=run-your-own-copy>
<h2>How to to run your own copy of the Nu Html Checker</h2>
<p>
To run your own copy of the Nu Html Checker,
<a href="https://github.com/validator/validator/releases/latest">get the latest release</a>
and read the following instructions on how you can use it both for:
<ul>
<li><a href="http://validator.github.io/validator/#web-based-checking">web-based checking of documents</a>
<li><a href="http://validator.github.io/validator/#usage">batch-checking of documents from the command line and from other scripts/apps</a>
</ul>
<p>
Alternatively, consider automating your HTML checking with a frontend such as:
<ul>
<li>
<a href="https://github.com/jzaefferer/grunt-html">Grunt plugin for HTML validation</a>
<li>
<a href="https://github.com/watilde/gulp-html">Gulp plugin for HTML validation</a>
<li>
<a href="https://github.com/svenkreiss/html5validator">HTML5 Validator Integration for Travis CI</a>
(auto-check documents pushed to a github repo)
<li>
<a href="https://github.com/cvrebert/lmvtfy/">LMVTFY: Let Me Validate That For You</a>
(auto-check HTML of JSFiddle/JSBin etc. links in github issue comments)
</ul>
</section>

<section id=why-validate>
<h2>Why validate?</h2>
<p>The core reason to run your HTML documents through a conformance checker
is simple: To catch unintended mistakes—mistakes you might have otherwise
missed—so that you can fix them.
<p>
Beyond that, some document-conformance requirements (validity rules) in the
HTML spec are there to help you and the users of your documents avoid
certain kinds of potential problems. To explain the rationale behind those
requirements, the HTML spec contains these two sections:
<ul>
<li>
<a href="http://www.w3.org/TR/html/introduction.html#syntax-errors">rationale for syntax-level errors</a>
<li>
<a href="http://www.w3.org/TR/html/introduction.html#restrictions-on-content-models-and-on-attribute-values">rationale for restrictions on content models and on attribute values</a>
</ul>
<p>
To summarize what’s stated in those two sections:
<ul>
<li>
There are some markup cases defined as errors because they are potential
problems for accessibility, usability, interoperability, security, or
maintainability—or because they can result in poor performance, or that
might cause your
scripts to fail in ways that are hard to troubleshoot.
<li>
Along with those, some markup cases are defined as errors because they can
cause you to run into potential problems in HTML parsing and error-handling
behavior—so that, say, you’d end up with some unintuitive, unexpected
result in the DOM.
</ul>
<p>
Validating your documents alerts you to those potential problems.
</section>
New to GrepCode? Check out our FAQ X