Super quick Introduction to          HTML5                         Woody Pewitt                    Icenium Evangulist     ...
•   Less Header Code•   More Semantic HTML tags•   Media Tags•   Geolocation•   Canvas•   Input Types•   Form Validation• ...
Simplified!
HTML5<!DOCTYPE html>XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org...
SOME NEW TAGS IN HTML5
SO WHERE IS THE SEXY?
<canvas> + <svg>• SVG (Scalable Vector Graphics)  pre-dates HTML5• But it is finally viable now that IE9 supports it• This...
New for elements<input type="date" /><input type="datetime" /><input type="email" /><input type="month" /><input type="num...
Resources•   html5test.com•   alistapart.com/articles/get-ready-for-html-5•   dev.w3.org/html5/spec/Overview.html•   divei...
Super quick introduction to html5
Upcoming SlideShare
Loading in...5
×

Super quick introduction to html5

1,988

Published on

a quick look at the form elements of html5, to me one of the least appreciated features

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,988
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • &lt;header&gt;&lt;footer&gt;&lt;aside&gt;&lt;nav&gt;&lt;div class=”content”&gt;&lt;article&gt;&lt;section&gt;&lt;hgroup&gt;&lt;section&gt;&lt;dialog&gt;&lt;p&gt;etc...&lt;figure&gt;&lt;figcaption&gt;&lt;img /&gt;&lt;details&gt;&lt;summary&gt;&lt;p&gt;etc...
  • Super quick introduction to html5

    1. 1. Super quick Introduction to HTML5 Woody Pewitt Icenium Evangulist http://blog.pewitt.org @woodyp woodyp@telerik.com
    2. 2. • Less Header Code• More Semantic HTML tags• Media Tags• Geolocation• Canvas• Input Types• Form Validation• Draggable• Local Storage• Cross-Domain Messaging• Web Sockets• Eventually, 3D canvas
    3. 3. Simplified!
    4. 4. HTML5<!DOCTYPE html>XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5 HTML5<script> <style> // Code here. // Code here.</script> </style>XHTML 1.0 Transitional XHTML 1.0 Transitional<script type="text/javascript"> <style type="text/css"> /* <![CDATA[ */ // Code here. // Code here. </style> /* ]]> */</script>
    5. 5. SOME NEW TAGS IN HTML5
    6. 6. SO WHERE IS THE SEXY?
    7. 7. <canvas> + <svg>• SVG (Scalable Vector Graphics) pre-dates HTML5• But it is finally viable now that IE9 supports it• This means all major browsers will support SVG and canvas I will not cover <svg> or <canvas> in this talk
    8. 8. New for elements<input type="date" /><input type="datetime" /><input type="email" /><input type="month" /><input type="number" /><input type="range" /><input type="tel" /><input type="time" /><input type="url" /> All tags from HTML4 are supported
    9. 9. Resources• html5test.com• alistapart.com/articles/get-ready-for-html-5• dev.w3.org/html5/spec/Overview.html• diveintohtml5.org• html5.org• html5demos.com• html5doctor.com• sencha.com/products/touch• w3schools.com/html5

    ×