Transitioning to HTML5 and CSS3 Patrick Carey, Cengage Learning Author

Innovations Browsers Languages HTML 3.2 W3C Rec. HTML 4.0 W3C Rec. HTML 3.2 W3C Rec. HTML 4.0 W3C Rec. HTML 4.01 W3C Rec. HTML 4.01 W3C Rec. HTML 5 Draft HTML 5 Draft HTML 5 working group HTML 5 working group XHTML 1.0 W3C Rec. XHTML 1.0 W3C Rec. XHTML 1.1 W3C Rec. XHTML 1.1 W3C Rec. XHTML 2 Draft XHTML 2 Draft IE 4 IE 5 IE 6 IE 7 IE 8 NS 4 NS 4.7 NS 6 NS 7 FF 1 FF 2 FF 3 Facebook podcasting youtube iTunes CSS 2.0 W3C Rec. CSS 2.0 W3C Rec. CSS 3.0 Draft CSS 3.0 Draft MySpace AJAX SAF 1 SAF 2 SAF 3 SAF 4 twitter blogging RSS Web Commerce Web Conferencing iPhone iPad IE 9 FF 3.5 FF 4 SAF 5 GC 1 GC 3 GC 8 GC 10 XHTML 2 Halted XHTML 2 Halted HTML 5 Can. Rec. (2012) HTML 5 Can. Rec. (2012)

HTML5 Differences from HTML4  New structural elements  Web forms  Support for audio and video  Modified existing HTML4 elements and attributes  Removal of outdated HTML4 elements and attributes  New APIs for Web applications  Extensions to the DOM

New HTML4 Structural Elements  Header and footers ohgroup oheader ofooter  Content elements osection oarticle oaside  Navigation onav  Figures ofigure ofigcaption

HTML4 DIV-itis

HTML5 Structural Elements …

Elements Absent in HTML5  Presentational Elements obasefont, big, center, font, strike, tt, u  Frames oframe, frameset, noframes  Redundant Elements oacronym (use abbr ) oapplet (use object ) odir (use ul ) oisindex (use form controls)

Attributes Absent in HTML5  Presentational Attributes o align, background, bgcolor, hspace, vspace  Table Attributes o border, char, cellpadding, cellspacing, nowrap, valign, width  Hypertext Attributes o alink, link, text  Frame Attributes o frameborder, scrolling, marginheight, marginwidth

New HTML5 APIs  API for playing audio and video  API to enable offline Web applications  API for creating editable content  Drag & Drop API  Canvas API  Web Messaging API

HTML Enhancements to the DOM  getElementsByClassName()  innerHTML to parse or serialize an HTML or XML document  activeElement to determine which element currently has the focus

New HTML5 Web Forms  New input types otype="tel" (phone numbers) otype="search" (search boxes) otype="url" otype=" " otype="number" (spin boxes) otype="range" (slider) otype="color" (color picker) otype="date" (calendar picker)  placeholder attribute  form attribute to associate fields with forms

Form Validation  Attributes to constrain input: oautocomplete omin, max, step omultiple opattern orequired  form validation is on by default (turn off using novalidate attribute)

Audio in HTML5  New audio element for embedded audio osrc, preload, autoplay, loop, and control attributes o Scriptable  Codecs Natively Supported by Major Browsers BrowserWAVOgg VorbisMP3 IE Firefox Safari Chrome Opera

Video in HTML5  New video element for embedded video osrc, poster, preload, autoplay, loop, control attributes o Scriptable  Codecs Natively Supported by Major Browsers BrowserWebMOgg TheoraMPEG-4 H.264 IE Firefox Safari Chrome Opera

New with CSS3  Expanded selectors  Opacity filters  HSL color model  Rounded and elongated corners  Background image styles  Drop shadows  Media queries  Transitions and Animations  Multi-column layouts

Supporting HTML5 and CSS3  Many features can and should be used today  Employ progressive enhancement to deliver the best user experience  Make sure that Web pages degrade gracefully  Don't ask for perfect repeatability

Example 1: HTML5 and CSS3

Example 2: Web Forms

Example 3: Audio and Video

Contact Information Patrick Carey Carey Associates 8502 Miller Road Verona, WI (608)