8. HISTORY
2000 XHTML 1.0 Released
gone W3C XHTML
proposal memo public 1.0 2.0 4.0 1.0
1981 1989 1991 1993 1995 1997 2000
1996 1998
CSS 1.0 CSS 1.0
9. HISTORY
WHATWG starts work on
2004 HTML5 under the name
Web Applications 1.0
gone W3C XHTML WHATWG
proposal memo public 1.0 2.0 4.0 1.0 HTML5
1981 1989 1991 1993 1995 1997 2000 2004
1996 1998
CSS 1.0 CSS 1.0
21. Tag Etique e
<img src=”../img/mjackson.jpg” /> ok
<img src=../img/mjackson.jpg /> ok
<IMG SRC=../img/mjackson.jpg /> ok
<img src=../img/mjackson.jpg > ok
<br /> or <br> ok
<input /> or <input> ok
22. Block-Level Links
You can now wrap links <li>
around block-level <a href="page.html">
elements, rather than <img src="pic.jpg">
having to create links
around every element <h3>Title</h3>
inside the block <p>Text</p>
element. </a>
</li>
23. “drop it like
Removed Tags it’s hot”
big applet
center dir
u basefont
frame
s, strike frameset
font noframes
acronym
24. New Tags
Provides new <HEADER>
semantic vocabulary
for parts of a page <NAV>
previously served by
DIVs with ID and
Class a ributes. <SECTION>
IE requires some
workarounds using <ASIDE>
JavaScript to make <ARTICLE>
these elements work.
<FOOTER>
25. <figure>
Allows for <FIGURE>
associating captions
with embedded
content, including
videos, audio,
pullquotes, or
images.
CONTENT
(IMG,VIDEO,ETC.)
<LEGEND>
29. <meter>
Represents a scalar measurement within a
known range...
<meter> 2 out of 10 </meter>
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>
<p>Your score is: <meter value="91" min="0" max="100" low="40"
high="90" optimum="100">A+</meter></p>
30. <progress>
Defines work-in-progress. Use it to display the
progress of a time consuming function in Javascript
<progress>
<span>76</span>%
</progress>
<progress max="50" value="23">
<span>23</span> of <span>50</span>
</progress>
31. <time>
Defines a time or a date, or both.
<p>We scrum it up at <time>9:00</time> every morning.</p>
<time datetime="2011-03-1709:00" pubdate>9:00</time>
32. <mark>
Defines marked or highlighted text.
<p>Search Results for <mark>mildred</mark></p>
Some Good Uses
Highlighting search terms on a page
Directing a ention to a word or phrase
Adding emphasis
33. WEB FORMS!
New A ributes
required
autocomplete
placeholder
autofocus
35. autocomplete
<input type="text" autocomplete >
The autocomplete a ribute specifies that the
form or input field should have an autocomplete
function. Tells the browser to allow the field to
be autocompleted or not.
38. WEB FORMS (cont)
Input Types
search number
email range
url date
tel color
39. search
<input type="search">
The search field behaves like
a regular text field. Some
browsers add special styling
and/or functionality for
clearing.
+ mobile
43. number
<input type="number">
used for input fields that should
contain a numeric value.
<input type="number"
min="0"
max="10"
step="2"
value="6">
+ mobile
48. NEW API’s
Drag and Drop Canvas
Cross-Document Messaging SVG
Web Storage
O line Web Apps
49. drag’n drop
Allows objects (images and links, by
default) to be dragged and then
dropped onto a target.
h p://instantsprite.com
50. cross doc messaging
Cross Document Messaging
allows documents of
di erent domains to
communicate.
Sending document can call
postMessage() and
receiving document listens
for a ‘message’ event.
51. web storage
“The sessionStorage DOM a ribute stores session
data for a single window, like cookies on crack.”
<input type="checkbox"
onchange="
localStorage.insurance=checked
" />
+ mobile
52. o line web apps
Allows the client to <html manifest="/cache.manifest">
refer directly to its
CACHE MANIFEST
cache for certain
index.html
resources even help.html
while o line. style/default.css
images/logo.png
Resources under images/background.png
"network" are
never cached NETWORK:
server.cgi
+ mobile
53. canvas svg scalable vector graphics
Canvas is like making a Making layers that retain
flat drawing without distinctive shapes. Like
layers. Like a whiteboard. construction paper.
+ mobile + mobile
54. geolocation
Allows users to share their location for
location-aware services.
Some Uses
Show users position on a map
Tag content (photos/sound/video)
Turn-by-turn navigation
Alert users of nearby points of interest
Social networking
Users must be allowed to opt-in to location sharing
+ mobile
60. HTML5 Shiv
In IE8- new tags are recognized so they
need to be created.
document.createElement(‘header’);
document.createElement(‘section’);
etc.
HTML5 Shiv determines browser version
and creates the elements for us if needed.
61. Modernizr.js
O ers a 3.7k javascript file you can add to
your project.
Includes the HTML5 shiv
Uses feature detection to easily control fallbacks
Works with both HTML5 and CSS3 elements
63. Sources
Because I didn’t make this stu up.
Up to Speed on HTML5 & CSS3 M.Jackson Wilkinson and Jason Garber
HTML5 the 30,000’ View Peter Lubbers
Echo HTML5 John Dyer and Nathan Smith
In Control 2010 HTML5 Christopher Schmi
The Future of the Web: HTML5 Derek Bender
Semantics of HTML5 Jesh Barlow
Dive into HTML5 Mark Pilgrim
W3Schools.com
HTML5 Doctor h p://html5doctor.com/about/
HTML5 for Web Designers Jeremy Keith