The Future of Markup

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

The Current Markup World

• XHTML 1.0 Transitional provides the best benefit for web developers.
  • Enforces consistency and validation
  • Throws browsers in standards mode which reduces (but doesn't eliminate) differences between modern web browsers.
  • Allows for popular and necessary (but ungood) features like iframes that have been removed from XHTML 1.0 Strict and above

The Best Practices

• Use the vocabulary to provide meaning around the data
• Write as little markup as possible to convey meaning and give you enough hooks to write CSS for

Kevin's Theory of Heterogenous Markup

• It's easier to style documents when you know what markup to expect.
• It's easier to style documents when there are different types of elements to build selectors around.
• It's a lot easier to read type selectors than class selectors.
• You will build smaller, faster, better web applications if you use fewer divs and open yourself to the wide array of semantic elements the XHTML 1.0 spec has to offer you.

Think Outside the <div>

• Divs are for large divisions of the page, or pieces that don't have other applicable semantics
• Use id's and classes to add semantics
  • microformats are a good start

Spans are Useless

• It takes at least 13 characters to put a span around content.
• Spans are meaningless.
• It's better to use another, shorter, meaningless element instead.
• b or i save you 6 characters per instance, which, over a large document, can significantly reduce page size.

Semantics Are What You Make of Them

• HTML was originally meant to mark up scientific documents
• It misses a lot of semantics needed in today's web
• It's OK to bend the original semantics of the element to serve your purpose and to get to heterogenous markup

Questions Before We Travel to the Future?

• One? Two? Three?
• Are they well-formed and valid?
• Now, what's coming next?

XHTML 2 vs. HTML5

• XHTML 2 has been in the works in the W3C for years...
  • But, web developers don't want it and neither do browser vendors
• Ian Hickson started the WHAT Working Group as a response to XHTML 2 "abandoning" the "real" web
• AOL and others led the charge to get a new "real web" HTML group started within the W3C.
• Now, we have a new HTML Working Group working on HTML5 (basically, the WHATWG's spec brought under the W3C umbrella)

What's New in HTML5?

• better document semantics
• new form elements
• video and audio get their own elements
• offline storage API

Better Document Semantics

• section: Denotes generic section of a document or application
• article and aside: Independent pieces of content part of the larger document
• header, footer and nav: Finally!

Video and Audio Get Their Own Playground

• There are video and audio elements now!
• There are huge issues about the default codec, how to handle other things, etc.

New Form Elements

• There are a lot of them!
  • lots of fields around dates and times
  • number
  • range (sliders, finally!)
  • specific for e-mail addresses and URLs

Offline Storage

• Like Google Gears and Firefox 3's APIs
• SQL and/or key-value pairs storage

When to Jump In?

• Not yet! Nothing in HTML5 is interoperably implemented yet!
• You can play around with some the new form elements in Safari 3.
• Apple, Mozilla and Opera have all committed to supporting HTML5 - it's just a matter of waiting for implementations.
  • No word from Microsoft yet...

Questions Before We Move On?

• Are the experimental?
• Are they implemented yet?

Introducing: The URI

http://something.something#fragIdentifier

Subject Predicate Object

http://dev.aol.com/node/230 has the value of creator as "Arun Ranganathan"

Now Use URIs

http://dev.aol.com/node/230
dc:creator
http://www.arunranga.com
TimBL's Tabulator (Demo)

A Challenging Proposition

<address class="vcard">
<a class="fn url" href="http://tantek.com/">Tantek &Ccedil;elik</a>
</address>

Semantics on the GRDDL

• Extract data from XHTML using XSLT Transformations
• link rel="transformation"
  *Use Namespaces Inside XHTML Documents
  *Let the XSLT Do the Trick, or else Use RDFa

RDFa By Example

• Uses XMLNS to Embed Attributes via rel="ns:prop" or

<meta
<html xmlns:cal="http://www.w3.org/2002/12/cal/ical#" xmlns:contact="http://www.w3.org/2001/vcard-rdf/3.0#">

• Creative Commons

<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">cc</a>