HTML structure & DOM explainer

What the document declares

DOCTYPE

<!DOCTYPE html>

mode

no-quirks The standards mode: <!DOCTYPE html> or an equivalent was found first.

title

T

lang

en

charset

absent

most used

li 2body 1br 1div 1head 1html 1img 1table 1tbody 1td 1title 1tr 1

The tree the parser built

Each row is one node, indented by depth, with the line of its tag in the source. One element was created by the parser without a tag, 3 end tags were supplied by the parser, no element was split, one node was moved out of a table; no whitespace-only text node is left out of the list.

1. 1<!DOCTYPE html>
2. 1<html lang="en">
3. 1<head>
4. 1<title>
5. 1“T”
6. 1<body>
7. 1<ul>
8. 1<li>end supplied
9. 1“one”
10. 1<li>end supplied
11. 1“two”
12. 1“stray”moved
13. 1<table>
14. ·<tbody>created
15. 1<tr>
16. 1<td>
17. 1“x”
18. 1<br>void
19. 1<div>end supplied
20. 1“text”
21. 1<img src="a.png">void

A dot in the line gutter marks a node with no source position: the parser created it. The pills say what the parser did: created (no tag in the source), end supplied (no end tag in the source), void (never has an end tag), self-closing (foreign content written with />), piece n (one source element split into several), moved (foster-parented before a table), obsolete (section 16.2 of the standard), template (lives in a template's content, not in the document).

One parse error

The codes marked standard are the HTML Standard's own (13.2.2 Parse errors, where the descriptions are non-normative); the standard leaves the tree-construction errors unnamed and parse5, the parser used here, names those itself. Parse errors are syntax only: "Parse errors are only errors with the syntax of HTML." The error handling is defined, so a document with errors still has one exact tree, the one shown above.

6 findings

1. noteD5The character encoding declaration
   <meta charset="utf-8">

   No character encoding is declared in the document (no meta charset and no Content-Type meta). If the HTTP response does not declare one either, the browser sniffs the encoding. The HTML Standard requires documents to be UTF-8; <meta charset="utf-8"> in the head says so in the file itself.

2. errorD6line 1Images without alternative text
   <img>

   One img element has no alt attribute (line 1). WCAG 2.2 SC 1.1.1 Non-text Content (Level A): "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose". The HTML Standard: "Except where otherwise specified, the alt attribute must be specified and its value must not be empty", and for purely decorative images "the alt attribute must be present but must be empty". Note that an absent alt and an empty alt mean different things.

3. warningD13line 1End tags the parser supplied
   <div>

   One div element was closed by the parser, not by an end tag in the source, and div is not among the elements whose end tag the standard allows authors to omit (html, head, body, li, dt, dd, p, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th). Either the end tag is missing or a later end tag closed this element first (misnesting). The tree shows where the parser ended it.

4. warningD15line 1Content moved out of a table
   <table>

   One node was moved before the table: text or elements written inside a table where only table parts (caption, colgroup, thead, tbody, tfoot, tr, td, th) may appear are inserted before the table by the standard's foster parenting rule. In the tree they appear ahead of the table they were written in.

5. noteD16Void elements written with a trailing slash
   <br />

   One void element is written with a trailing slash (<br />). The HTML Standard: "On void elements, it does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind. For such void elements, it should be used only with caution", because "if directly preceded by an unquoted attribute value, it becomes part of the attribute value". Harmless as written here.

6. noteD20Elements the parser created
   <tbody>

   The parser created one element that has no tag in the source: tbody. The HTML Standard: "Omitting an element's start tag in the situations described below does not mean the element is not present; it is implied, but it is still there." html, head, body and tbody are the usual ones.

What did not run

script elements

0 (none external)

inline event handlers

0

javascript: URLs

0

style elements

0

iframes

0

This page builds the tree and reads it. Scripts are kept as text, event handler attributes as attributes, URLs as strings; no style is applied, no image, frame or script is fetched. The same parser runs in the hosted API with the same result.