Transitioning to HTML5 and CSS3
Patrick Carey, Cengage Learning Author
Languages
XHTML 1.0
W3C Rec.
XHTML 2
Draft
XHTML 2
Halted
HTML 3.2
W3C Rec.
HTML 4.01
W3C Rec.
HTML 4.0
W3C Rec.
XHTML 1.1
W3C Rec.
CSS 2.0
W3C Rec.
HTML 5
working group
IE 4
IE 5
NS 4
NS 4.7
SAF 1
SAF 2
IE 6
NS 6
1997
1998
iTunes
RSS
1999
2000
2001
2002
SAF 4
FF 2
GC 1
GC 3
FF 3
FF 3.5
IE 9
GC 8
GC 10
FF 4
AJAX
podcasting
Facebook
MySpace
youtube
2003
SAF 5
IE 8
NS 7
Innovations
blogging
SAF 3
IE 7
FF 1
Web Commerce
HTML 5
Can. Rec. (2012)
CSS 3.0
Draft
Browsers
Web Conferencing
HTML 5
Draft
2004
2005
iPhone
iPad
twitter
2006
2007
2008
2009
2010
2011
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
o hgroup
o header
o footer
 Content elements
o section
o article
o aside
 Navigation
o nav
 Figures
o figure
o figcaption
HTML4 DIV-itis
<div id="header">
<div id="links">
<div id="mainContent">
<div class="sidebar">
<div id="footer">
<div
id="article">
HTML5 Structural Elements
<header> … </header>
<nav> … </nav>
<section> … </section>
<aside> … </aside>
<footer> … </footer>
<article>
…</article>
Elements Absent in HTML5
 Presentational Elements
o basefont, big, center, font, strike, tt, u
 Frames
o frame, frameset, noframes
 Redundant Elements
o
o
o
o
acronym (use abbr)
applet (use object)
dir (use ul)
isindex (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
o
o
o
o
o
o
o
o
type="tel" (phone numbers)
type="search" (search boxes)
type="url"
type="email"
type="number" (spin boxes)
type="range" (slider)
type="color" (color picker)
type="date" (calendar picker)
 placeholder attribute
 form attribute to associate fields with forms
Form Validation
 Attributes to constrain input:
o
o
o
o
o
autocomplete
min, max, step
multiple
pattern
required
 form validation is on by default
(turn off using novalidate attribute)
Audio in HTML5
 New audio element for embedded audio
o src, preload, autoplay, loop, and control attributes
o Scriptable
 Codecs Natively Supported by Major Browsers
Browser
WAV
Ogg Vorbis
MP3

IE
Firefox


Safari

Chrome


Opera




Video in HTML5
 New video element for embedded video
o src, poster, preload, autoplay, loop, control
attributes
o Scriptable
 Codecs Natively Supported by Major Browsers
Browser
WebM
Ogg Theora

IE
Firefox
MPEG-4 H.264



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 53593
(608) 832-6313
patrick1@careys.com