structures, semantics, controls, and more: html 5 is here!
TRANSCRIPT
![Page 1: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/1.jpg)
1
Structures, Semantics, Controls, and More: HTML 5 is Here!Char James-TannyJTF Associates, Inc.http://[email protected] ~ @charjtf
Copyright © 2010 JTF Associates, Inc.
![Page 2: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/2.jpg)
Copyright © 2010 JTF Associates, Inc.
![Page 3: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/3.jpg)
Copyright © 2010 JTF Associates, Inc.
BACKGROUND3
![Page 4: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/4.jpg)
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
![Page 5: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/5.jpg)
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
1996 Tables (HTML 2)
row
row
column column
row
row
![Page 6: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/6.jpg)
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
1997 DIVs (HTML 3.2)
div
div
div div
div
![Page 7: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/7.jpg)
Copyright © 2010 JTF Associates, Inc.
Layout Stages 5
2004 Semantic Structure (HTML 5)
header
nav
article
footer
section
section
aside
aside
![Page 8: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/8.jpg)
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
![Page 9: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/9.jpg)
Copyright © 2010 JTF Associates, Inc.
ELEMENTS AND ATTRIBUTES
7
![Page 10: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/10.jpg)
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
![Page 11: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/11.jpg)
Copyright © 2010 JTF Associates, Inc.
Structural(Semantic) Elements
<header><nav><article><section><aside><footer>
9
<header>
<nav>
<article>
<footer>
<aside><section> <aside>
<section>
![Page 12: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/12.jpg)
Copyright © 2010 JTF Associates, Inc.
Other New Elements
• audio and video• canvas• command• datalist• figure and figcaption• mark• time
10
![Page 13: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/13.jpg)
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
![Page 14: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/14.jpg)
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
![Page 15: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/15.jpg)
Copyright © 2010 JTF Associates, Inc.
New Controls
• Drag-and-drop• Editable Areas• Geolocation (not really HTML5)• Client-side Storage (session, local,
database)
13
![Page 16: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/16.jpg)
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
![Page 17: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/17.jpg)
Copyright © 2010 JTF Associates, Inc.
BROWSER COMPATIBILITY AND SUPPORT
15
![Page 18: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/18.jpg)
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
![Page 19: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/19.jpg)
Copyright © 2010 JTF Associates, Inc.
CONVERSION ISSUES17
![Page 20: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/20.jpg)
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
![Page 21: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/21.jpg)
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
![Page 22: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/22.jpg)
Copyright © 2010 JTF Associates, Inc.
DEMOS20
![Page 23: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/23.jpg)
Copyright © 2010 JTF Associates, Inc.
![Page 24: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/24.jpg)
24Copyright © 2010 JTF Associates, Inc.
![Page 25: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/25.jpg)
Copyright © 2010 JTF Associates, Inc.
![Page 26: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/26.jpg)
26Copyright © 2010 JTF Associates, Inc.
![Page 27: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/27.jpg)
Copyright © 2010 JTF Associates, Inc.
![Page 28: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/28.jpg)
28Copyright © 2010 JTF Associates, Inc.
![Page 29: Structures, Semantics, Controls, and More: HTML 5 is Here!](https://reader037.vdocument.in/reader037/viewer/2022102323/54bb62a64a7959f7038b45e3/html5/thumbnails/29.jpg)
WritersUA Samples
• Visit http://jtfassociates.com/wua2010 for sample HTML files.
Copyright © 2010 JTF Associates, Inc.
24