WebDev Bites: HTML Models

page, flow, and box

About WebDev Track Page Model Flow Model Box Model

1.0 - HTML Models

HTML is a declarative language for describing web page layout and contents. It does that using three models:
  1. Page Model:
    Describes the structure of a page using parts:
    • Document declaration <!Doctype html>
    • <head> element containing metadata, scripts, and styles.
      Head elements alter how body elements are styled and react to events, but do not directly render content.
    • <body> element contains child elements and, occasionally script at the end.
    Page Model Example
  2. Flow Model:
    Defines rules for placement of child elements visually in the page, e.g.:
    • Inline elements like <span> flow left to right, breaking to another line when there is not enough room for the entire sequence of inline elements.
    • Block elements like <div> that stack vertically in the order declared.
    • Elements that are taken out of the normal page flow with css styles like { float: right; }, { position: absolute; } or { position: fixed; } and { display: none; }.
    Flow Model Example
  3. Box Model:
    Defines the positioning of parts of a block element, e.g.:
    • Content which may be text or child elements or both.
    • Padding that surrounds content. That sets the content in a field of colored but otherwise empty space.
    • Border that bounds the content and padding with a border of specified style, width, and color.
    • Margins that insert spacing between the block-with-margins and sibling elements.
      Margins collapse: if two adjacent elements both have margins the distance between them is that of the largest margin, not the sum of margins.
      There are two exceptions to that rule: in both flex and grid containers margins do not collapse for elements in either of those containers.
    Box Model Example
Examples for each of these models are linked from the header bar at the top of this page.