1. A block inside a paragraph
- Written
<p>Intro <div>a block</div> after</p>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: No “p” element in scope but a “p” end tag seen.
A paragraph holds phrasing content only. The <div> start tag closes it, so " after" lands in the body, and the final </p>, with no paragraph open, makes a new, empty one. The validator complains about that end tag, not about the div: without the </p> the same markup is valid, because a div is allowed to end a paragraph whose end tag was left out.
2. A link inside a link
- Written
<p><a href="/one">one <a href="/two">two</a> after</a></p>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: Start tag “a” seen but an element of the same type was already open.
Error: Stray end tag “a”.
The parser never builds an a inside an a. The second start tag closes the first link, so " after" is no longer part of any link, and the last </a> has nothing to close.
3. A div inside a list
- Written
<ul><div>not an item</div><li>an item</li></ul>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: Element “div” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)
No repair at all: the tree matches the source. A ul may hold only li and script-supporting elements, but the parser has no rule that moves a div out of a list. The tree is exactly as wrong as the markup: the list has one item and one thing that is not an item.
4. Text directly inside a table
- Written
<table>stray text<tr><td>a cell</td></tr></table>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: Misplaced non-space characters inside a table.
Fatal Error: Cannot recover after last error. Any further errors will be ignored.
Foster parenting: text that is not allowed where it appears in a table is moved out, to just before the table. The parser also inserts the tbody the source left out. This is the one error here that makes the Nu checker stop: it reports nothing after it, so fix it and check again.
5. A button inside a link
- Written
<a href="/item"><button>Save</button></a>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: The element “button” must not appear as a descendant of the “a” element.
Again no repair. The tree holds interactive content inside interactive content, just as written, and the browser has to guess which one a click means. Only the validator notices.
6. A list item outside a list
- Written
<li>an orphan item</li>
- Built
Turn on JavaScript to compute the tree.
- The validator says
Error: Element “li” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
The parser does not invent a list to hold it. The li sits in the body on its own, still styled as a list item, but it belongs to no list: assistive technology has no list to announce and no count to give.