Html5

Where we're at

• Comfortable with HTML4 or XHTML and CSS2
• Hearing talk of HTML5 and CSS3
• Rapidly advancing browsers
• ...but we've still got IE6

HTML5 and CSS3 are ready

• Dispelling some myths
• How to begin using them today

What HTML5 is

• HTML5 is the next iteration of web page markup
• HTML4 -> XHTML 1 -> XHTML 2 -> HTML5
• Introduces new tags and attributes
o <header>, <footer>, <nav>, <section>...
o <input type="email">
• Designed for web apps
• Already understood by all browsers
o Even IE6!

Myth: It's not done yet

• "The HTML5 spec won't be done until 2012 or 2022"
• Reality:
o Browser support is what matters
o 2022: "Proposed Recommendation"
 Meaningless in a practical sense
o 2012: "Candidate Recommendation"
 Spec is finished and ready for widespread adoption
o But it's only 2011...
 ...browser support is what matters.

o CSS 2.1 is just now a final spec (2011)
 "Candidate Recommendation" in 2005

Myth: Browsers don't support it

• Reality:
o Browsers don't support HTML4 or XHTML either -- they
support a collection of tags and attributes
o Browsers understand any <tagname>
o Browsers will ignore HTML tag attributes and CSS
properties that they don't understand
o For JavaScript, use object detection or try/catch
o Unrecognized <input> types are rendered as <input
type="text">
o "The HTML5 specification is really just documenting what browsers already do." -
HTML5 for Web Designers

Myth: My favorite tag will be obsolete

• Reality:
o "Obsolete" != "deprecated"
o Obsolescence is defined by browser support, and always
has been
o Alternatives are already in place for obsolete tags

Obsolete tag alternatives

• <font>
o <span>
• <frame>, <noframe>, <frameset>
o <iframe>, re-design with <div>s
• <acronym>
o <abbr>
• tags: <big>, <strike>, <center>
attributes: bgcolor, cellspacing, cellpadding,
valign
o Use CSS

Myth: It can't all be ready, can it?

• Reality: No, you're right, it's not all ready.
• Some elements are in a state of transition and need
fallbacks (<video>, <canvas>)
• Some APIs are simply not close to being ready
(WebSockets, form validation)
• However...
o Cross-platform alternatives and sample fallbacks exist
today
 offline storage
o Some can be designed around
 A browser doesn't support geolocation? Ask the user
for their ZIP code.

How do I start using it?

• <!DOCTYPE html>
• New elements:
o Modern browsers: header { display: block; }
o IE: shivs
• Keep your old syntax or adopt a new one
o <input type="text" />
o <input type="text">
o <input type=text>
• CSS3: just use it
o IE 6-8: css3pie.com

Resources

• HTML5 tag
list: www.w3schools.com/html5/html5_reference.asp
• CSS3 property list: modernizr.com/docs/
• Feature detection: Modernizr (includes shivs)
• Shivs: code.google.com/p/html5shiv
• html5boilerplate.com -- detailed page structure
• Gradient generator: colorzilla.com/gradient-editor/
• Try it yourself:
o playground.html5rocks.com
o css3please.com
• Keep tabs on browser support: caniuse.com
• These links and more: patik.com/html5/

Html5

More Related Content

What's hot (13)

Viewers also liked (6)

Similar to Html5 (20)

Recently uploaded (20)

Html5