WebDev Story HTML Models

1.0 HTML Models

HTML is a declarative language for describing web page layout and content. How a browser interprets and renders that markup is governed by three distinct models:

Model	Governs
Page Model	How a web page document must be structured
Flow Model	How elements are placed visually on the page
Box Model	How block elements are sized and spaced

Understanding all three is essential for writing predictable, maintainable CSS and HTML.

1.1 Page Model

A properly structured HTML page is a tree of elements rooted at <html>, containing two children: <head> and <body>.

<!DOCTYPE html>
<html id="top" lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="js/app.js"></script>
  </head>
  <body>
    <!-- rendered markup starts here -->
    <h3>Page heading</h3>
    <section>
      First section content.
    </section>
    <section>
      Another section:
      <div>child 1</div>
      <div>child 2</div>
    </section>
    <!-- rendered markup ends here -->
    <script>
      /* run-at-load scripts here */
    </script>
  </body>
</html>

The <head> element contains:

Declarations and metadata (<meta>, <title>)
Links to stylesheets
Inline styles (<style>)
Links to JavaScript files
Inline JavaScript (<script>)

The <body> element contains all rendered markup. Head elements alter how body elements are styled and react to events, but are not directly responsible for rendering content. If the body were empty, the rendered page would be blank.

Styles may be placed in linked files or in inline <style> blocks in the head, or declared directly on an element with a style="property: value;" attribute. Scripts can likewise be in source files or <script> blocks in the head, or at the end of <body> for run-at-load code.

1.2 Flow Model

The Flow Model governs how HTML elements are placed on the page. There are two main placement categories:

Block elements (e.g., <div>) stack vertically in declaration order. No space is inserted between them unless they have a margin style.
Inline elements (e.g., <span>) flow horizontally until the container width is consumed, then wrap. Without margin styling no horizontal space is placed between consecutive inline elements unless there is whitespace in the markup.

Elements can be taken out of normal page flow with CSS:

float: right; — pulled out of flow and positioned to the right of its container
position: absolute; — positioned relative to its nearest positioned ancestor
position: fixed; — positioned relative to the viewport; stays during scroll
display: none; — removed from flow and not rendered

Partial List of Block Elements

Element	Brief purpose
`div`	Generic block container.
`p`	Paragraph of text.
`h1`–`h6`	Section headings.
`header / footer`	Introductory / footer content for a section or page.
`main / section / article`	Primary / thematic / self-contained content.
`nav / aside`	Navigation links / tangential content.
`blockquote / pre`	Extended quotation / preformatted text.
`form / fieldset`	Form controls wrapper / grouped controls.
`ul / ol / li`	Unordered / ordered list / list item.
`hr`	Thematic break.

Partial List of Inline Elements

Element	Brief purpose
`a`	Hyperlink or anchor target.
`span`	Generic inline container.
`em / strong`	Stressed emphasis / strong importance.
`b / i / u / s`	Bold / italic / underline / strikethrough (stylistic).
`code / kbd / samp`	Inline code / keyboard input / program output.
`abbr / time / cite`	Abbreviation / date+time / work title.
`mark`	Highlighted text.
`img`	Inline image.
`br / wbr`	Line break / optional word break.
`label`	Caption for a form control.

1.3 Box Model

The Box Model defines how block-structured elements are sized and spaced. Every block element is a rectangular box composed of four nested regions, from inside out:

Content — the actual text or child elements.
Padding — transparent space between the content and the border. Padding takes on the element's background color.
Border — a visible line (or invisible if zero-width) around the padding. Controlled by border-width, border-style, and border-color.
Margin — transparent space outside the border that separates this box from sibling elements. Margin collapse: when two adjacent block elements both have margins, the space between them is the larger of the two, not their sum. This does not apply inside flex or grid containers.

The box-sizing property controls how width and height are measured:

content-box (default) — width and height apply to the content only. Padding and border are added outside that size.
border-box — width and height include content, padding, and border. This is almost always what you want; most resets apply it globally.

Inline elements (e.g., <span>) do not respond to height or width. Vertical sizing is set by line-height and font-size; horizontal spacing uses only padding-left/right and margin-left/right (vertical margins are ignored).

<!-- Box model demo -->
<div id="box-demo">
  <p id="content-demo">
    Content within a paragraph inside a div box.
  </p>
</div>

/* Stylesheet for box-demo */
#box-demo {
  width: 20rem;
  padding: 1rem;
  border: 2px solid steelblue;
  margin: 1rem 0;
  box-sizing: border-box;
  background-color: #e8f4f8;
}