The Marriage of Presentation & Structure

Molly E. Holzschlag & Ethan Marcotte

The Courting Period

Separation or Integration?

What is Document Structure?

Use of Semantic Markup

Understanding why Structure is Important

Your Markup Tree

Tree diagram of a basic XHTML document

Using the Tree as a Guide Helps You …

A Natural Pairing

Picture of a pine tree against the backdrop of a cloudy sky

The CSS Kool-Aid

Blogs do it…

Studios do it…

Even public-facin’ companies do it!

Starting small

ul li { color: #C00; }

The Relationship

Tree diagram of a basic XHTML document, with a style applied

The “Dear John” Letter

Tree diagram of a basic XHTML document, with a failed selector

Preparing Documents for Styling

Putting it into practice

  1. Outline areas of content
  2. Mark up with meaning
    • divide sections appropriately
    • id/class descriptively
  3. Apply style
  4. ...
  5. Profit!

You’re never valid enough

To the happy couple (In closing)