NYC microformats workshop background

Tantek Çelik

Web History 1990s

• HTML began structural and semantic
• Browser Wars
• Responses:
  • CSS: separate presentation
  • XML: clean up HTML "mess"
• Implementations raced forward

2000-2001

• Reliable CSS1 support ships!
  • IE5/Mac, Mozilla, IE6/Windows, Opera
• XHTML introduced
• Web designers transition to CSS
  • <font>s, <table>s replaced with CSS font-family, float etc.
  • Less HTML = smaller documents
  • First CSS hacks appear and spread
  • (X)HTML use and proficiency increased
• "pure XML" replacement of HTML...
  • ...still incomplete.

2002-2003

Wired News redesign, CSS tipping point, semantic XHTML

• More headings and paragraphs
• Less <b>ed and <br>eakfast markup

  old:	new:
  <b>had lunch</b> <br> i had lunch today <br>	<h3>had lunch</h3> <p> i had lunch today </p>

• Advantages:
  • Search engine relevance.
  • Easier to style more beautifully.

2002-2003

More semantic (X)HTML: better anchors & links

• CSS Zen Garden launches
• Blogging tools built-in semantic XHTML
• Fewer <a>norexic </a>nchors

  old:	new:
  <a name="post123"></a> ... <a href="#post123">#</a>	<div id="post123"> ... <a href="#post123" rel="bookmark">#</a> </div>

• Discoverable permalinks! - 'rel' attribute rediscovered.

Semantic HTML (POSH)

• Dan Cederholm's Simple Quiz
• Know your markup
  • thead, tbody, headers
  • fieldset, legend, label, optgroup
  • del, ins
  • rel, rev

2003-2004 elemental microformats emerge

• rel-license
• XFN
• rel-tag
• vote-links

Exercise

• exercise: rel-license