0 Replies Latest reply on Feb 2, 2011 3:07 PM by SloMotion

    Basic HTML concepts and how they relate to eachother


      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?






      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 - content that sets up the presentation or behavior of the rest of the content
              flow - elements that would be included in the normal flow of the document (fits in the HTML body tag)
              sectioning - defines the scope of heading and footers - create new sections in document
              heading - defines the header of a section, which can either be explicitly marked up with sectioning elements or implied by the heading content itself


              phrasing (similar to inline in HTML 4) - the text of the document, as well as elements used to mark up the text within paragraph level structures
              embedded - any content that imports other resources into the document
              interactive - any content that is specifically interacted for user interaction


      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
                      he outline (based on their ranking)




      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)-
          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




      Final webpage