1
Structures, Semantics, Controls, and More: HTML 5 is Here!Char James-TannyJTF Associates, Inc.http://[email protected] ~ @charjtf
Copyright © 2010 JTF Associates, Inc.
Copyright © 2010 JTF Associates, Inc.
Copyright © 2010 JTF Associates, Inc.
BACKGROUND3
Copyright © 2010 JTF Associates, Inc.
Timeline 4
5/96 HTML
2.0(tables added)
11/1996 XML(first
working draft)
12/96 CSS1
1/97 HTML 3.2
12/97 HTML 4
5/98 CSS2
1/00 XHTML
1.0
2001 Semantic
Web
5/01 XHTML
1.1
6/04 HTML 5
Development Starts
1/08 HTML 5(working
draft)
11/95 HTML
2.0(IETF)
Not to scale
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
1996 Tables (HTML 2)
row
row
column column
row
row
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
1997 DIVs (HTML 3.2)
div
div
div div
div
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
2004 Semantic Structure (HTML 5)
header
nav
article
footer
section
section
aside
aside
Copyright © 2010 JTF Associates, Inc.
HTML 5 Stages
• 2004: Development starts (WHATWG)• “…new version of HTML 4, XHTML 1,
and DOM Level 2”• “…defines many APIs that form the
basis of Web architecture”• 2008: First Public Working Draft• 2012: W3C Candidate Recommendation• 2022: W3C Recommendation
6
Copyright © 2010 JTF Associates, Inc.
ELEMENTS AND ATTRIBUTES
7
Copyright © 2010 JTF Associates, Inc.
DOCTYPE
<!DOCTYPE html>
Not…<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> OR<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
8
Copyright © 2010 JTF Associates, Inc.
Structural(Semantic) Elements
<header><nav><article><section><aside><footer>
9
<header>
<nav>
<article>
<footer>
<aside><section> <aside>
<section>
Copyright © 2010 JTF Associates, Inc.
Other New Elements
• audio and video• canvas• command• datalist• figure and figcaption• mark• time
10
Copyright © 2010 JTF Associates, Inc.
Element/Attribute Syntax
• No rules:• Mix case (not case sensitive)• Double quotes, single quotes, no quotes• Closing tags not required for void elements• Optional attribute values
• Allows for easier conversion from older specs• Just be consistent!• I use XHTML syntax.
11
Copyright © 2010 JTF Associates, Inc.
Element/Attribute Examples
• <img src=“pic.gif" width="207" height="47" alt=“alt text here" />• <img src=pic.gif width=207
height=47 alt=alt text here />• <IMG src=“pic.gif" width=207
height="47" alt>
12
Copyright © 2010 JTF Associates, Inc.
New Controls
• Drag-and-drop• Editable Areas• Geolocation (not really HTML5)• Client-side Storage (session, local,
database)
13
Copyright © 2010 JTF Associates, Inc.
Some Important Changes
• No attributes on <body>• Can link block level elements (of content)• Be sure to set a to use { display: block; }
• Create anchors by adding id to tag:• <h1 id=“welcome”>Welcome!</h1>
NOT• <h1><a name=“welcome”>Welcome!
</a></h1>
14
Copyright © 2010 JTF Associates, Inc.
BROWSER COMPATIBILITY AND SUPPORT
15
Copyright © 2010 JTF Associates, Inc.
Browser Compatibility
• Opera 10.1• Safari 4• Chrome 4• FF 3.6• IE6/IE7/IE8: Needs script to define elements• Shiv script available• Some pages still won’t work.
When Can I Use… http://a.deveria.com/caniuse/
16
Lots of support for many elements
Copyright © 2010 JTF Associates, Inc.
CONVERSION ISSUES17
Copyright © 2010 JTF Associates, Inc.
Planning the Process
• Decide which syntax you will use.• Add new DOCTYPE.• Reduce content in <head> (see PDF).• Remove all presentation tags and
attributes, and replace with CSS.• Remove all table tags and replace with
structural tags.• If necessary, learn HTML4, CSS, and
semantics.
18
Copyright © 2010 JTF Associates, Inc.
Here’s What You Need to Know
• Adding the new HTML 5 DOCTYPE makes the page HTML 5.• Google now uses HTML 5.
• You can use many of the new elements and attributes now.• Obsolete elements will still work.
However, the page won’t be valid HTML 5.• See PDF – page 1 for list.
19
Copyright © 2010 JTF Associates, Inc.
DEMOS20
Copyright © 2010 JTF Associates, Inc.
24Copyright © 2010 JTF Associates, Inc.
Copyright © 2010 JTF Associates, Inc.
26Copyright © 2010 JTF Associates, Inc.
Copyright © 2010 JTF Associates, Inc.
28Copyright © 2010 JTF Associates, Inc.
WritersUA Samples
• Visit http://jtfassociates.com/wua2010 for sample HTML files.
Copyright © 2010 JTF Associates, Inc.
24
