A quick introduction to HTML

w3c reference : https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html#writing-secure-applications-with-html

HTML user agents (e.g. Web browsers) then parse this markup, turning it into a DOM (Document Object Model) tree. A DOM tree is an in-memory representation of a document.

DOM trees contain several kinds of nodes, in particular a DocumentType node, Element nodes, Text nodes, Comment nodes, and in some cases ProcessingInstruction nodes.

• DOCTYPE: html
• html
• head
  • #text: ⏎␣␣
  • title
    • #text: Sample page
  • #text: ⏎␣
• #text: ⏎␣
• body
• #text: ⏎␣␣
• h1
  • #text: Sample page
• #text: ⏎␣␣
• p
  • #text: This is a
  • a href="demo.html"
    • #text: simple
  • #text: sample.
• #text: ⏎␣␣
• #comment: this is a comment
• #text: ⏎␣⏎

The root element of this tree is the html element, which is the element always found at the root of HTML documents. It contains two elements, head and body, as well as a Text node between them.

The root element of this tree is the html element, which is the element always found at the root of HTML documents. It contains two elements, head and body, as well as a Text node between them.

There are many more Text nodes in the DOM tree than one would initially expect, because the source contains a number of spaces (represented here by "␣") and line breaks ("⏎") that all end up as Text nodes in the DOM. However, for historical reasons not all of the spaces and line breaks in the original markup appear in the DOM. In particular, all the whitespace before head start tag ends up being dropped silently, and all the whitespace after the bodyend tag ends up placed at the end of the body.