I am a grad student working on a project to visualize how the HTML markup is translated into a webpage in a browser. I am not a programmer, and thus am confused by how all the following concepts relate to one another. The goal lis to list them in a logical order and describe how one concept leads to the next in a sequential manner.

I’d like to create a hierarchal list of all these terms and their definitions as a start. Here’s what I have so far.
Tried to start with the most basic, and work my way up Any help would be appreciated. Any errors?

----------------------------------------------------------------------------------------
SPECIFICATIONS
----------------------------------------------------------------------------------------
WC3 / WHTWG Specification
Defines the semantics, structure, syntax, and rendering of HTML code

elements in HTML5 (tags)
any element in the HTML namespace (as per the doctype declaration) - refers to all tags and their attributes - these tags are used to describe the meaning of the content they contain

content model types (tags can fit in one ore more of these categories of model types)

(metadata, flow, sectioning, heeding, phrasing, embedded, interactive)


Outline Algorithm (definition)
Definition in the HTML5 spec of the rules that user agents should use when parsing code in order creating an outline of section content elements in an HTML document
the outline (based on their ranking)


----------------------------------------------------------------------------------------
AUTHOR
----------------------------------------------------------------------------------------


HMTL5 Document - the document contenting HTML elements and authored content

Document Semantics - the meaning associated with each HTML element Tag
the collection of tags with meaning form the semantic structure of the HTML document

Document Structure (combination of ordered semantic elements) - the order and nesting of tags, and the associations associated with the levels of nesting (ranking) create the document structure

understanding the W3C outline Algorithm helps the author decide how and when to chose which elements to properly structure content

understanding the process that HTML5 uses to outline documents will help in this decision

----------------------------------------------------------------------------------------
USER AGENT (BROWSER)
----------------------------------------------------------------------------------------
User Agent (browser)-
the browser (application that user operates to interact with HTML documents

parsing algorithm (executed) - the rules the browser uses to parses (walks through) the elements in order to establish its structure and add to the outline using a parsing engine
examples: webkit (safari) and gecko (firefox)
body is established as the outline root (beginning)

the result of the parsing is a Document object Model (DOM) and the Document Ouline

Document outline - the nested, hierarchical outline created by the browser parsing the html document’s structure and content

each part of the outline is considered a node

(relationships in the node are described with family tree terms like parent, child, and sibling.)

sectioning and heading elements are used to define the outline

sectioning elements are containers - so any elements contented within a a section is nested as a child in the parent’s section

DOM -

The DOM is the structure created by the DOM API in which CSS and Javascript interact with and modify the HTML

based on an object structure that closely resembles the structure of the documents it models.

structure similar to that of a tree - in which every element is a node

similar to the document outline, but instead of a hierarchical list, the DOM is a tree diagram


----------------------------------------------------------------------------------------
OUTPUT
----------------------------------------------------------------------------------------

Final webpage