structures, semantics, controls, and more: html 5 is here!

Download Structures, Semantics, Controls, and More: HTML 5 is Here!

Post on 16-Apr-2017

1.134 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

Structures, Semantics, Controls, and More: HTML 5 is Here!

Structures, Semantics, Controls, and More: HTML 5 is Here!Char James-TannyJTF Associates, Inc.http://jtfassociates.comchar@jtfassociates.com ~ @charjtfCopyright 2010 JTF Associates, Inc.1

1Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Copyright 2010 JTF Associates, Inc.

http://9elements.com/io/projects/html5/canvas/ - FF2Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Background

Copyright 2010 JTF Associates, Inc.3

TimelineCopyright 2010 JTF Associates, Inc.45/96 HTML 2.0(tables added)11/1996 XML(first working draft)12/96 CSS11/97 HTML 3.212/97 HTML 45/98 CSS21/00 XHTML 1.02001 Semantic Web5/01 XHTML 1.16/04 HTML 5 Development Starts1/08 HTML 5(working draft)11/95 HTML 2.0(IETF)Not to scale

Internet Engineering Task Force (IETF), Web Hypertext Application Technology Working Group (WHATWG); CSS3 introduced May 20014Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Layout StagesCopyright 2010 JTF Associates, Inc.51996 Tables (HTML 2)

rowrowcolumncolumnrow

row

http://html5doctor.com/aside-revisited/5Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Layout StagesCopyright 2010 JTF Associates, Inc.51997 DIVs (HTML 3.2)

divdivdivdivdiv

http://html5doctor.com/aside-revisited/6Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Layout StagesCopyright 2010 JTF Associates, Inc.52004 Semantic Structure (HTML 5)

headernavarticlefootersectionsection

asideaside

http://html5doctor.com/aside-revisited/7Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

HTML 5 Stages2004: Development starts (WHATWG)new version of HTML 4, XHTML 1, and DOM Level 2defines many APIs that form the basis of Web architecture2008: First Public Working Draft2012: W3C Candidate Recommendation2022: W3C RecommendationCopyright 2010 JTF Associates, Inc.6

WHATWG: Web Hypertext Application Technology Working GroupHTML 5 is about moving HTML away from document markup and turning it into a language for web applications.8Copyright 2010 JTF Associates, Inc.Prepared for The 2010 Conference for Software User Assistance

Elements and Attributes

Copyright 2010 JTF Associates, Inc.7

DOCTYPE

Not OR

Copyright 2010 JTF Associates, Inc.8

Structural(Semantic) Elements

Copyright 2010 JTF Associates, Inc.9

Other New Elementsaudio and videocanvascommanddatalistfigure and figcaptionmarktimeCopyright 2010 JTF Associates, Inc.10

Element/Attribute SyntaxNo rules:Mix case (not case sensitive)Double quotes, single quotes, no quotesClosing tags not required for void elementsOptional attribute valuesAllows for easier conversion from older specsJust be consistent!I use XHTML syntax.Copyright 2010 JTF Associates, Inc.11

Element/Attribute Examples

Recommended

View more >