I was lucky enough to be invited to lead a discussion of HTML5 with the Madison Web Design & Dev Meetup group Monday night. Instead of the standard Keynote/PowerPoint presentation, I decided that because the topic was so intimately web related I’d go with a live demo of actual web pages, projects and resources related to the new features of the HTML5 language, focusing, where possible, on features we can use right now. The “live demo” nature gave the group plenty of opportunities ask questions, make comments and offer up their experiences with HTML5.
The Madison Web Design & Dev Meetup is a great group of web professionals of all skill levels and a fantastic resource for the Madison web community. If you’re very experienced you’ll find peers you can discuss the most advanced development topics with and anyone just dipping their toes into web design can get real world answers they’ll understand from working professionals in the field.
You can find all their contact info here:
http://www.meetup.com/madisonwebmeetup/
If you’re interested in learning more about HTML5 (and CSS3 and Javascript) here is a list of the sites visited/discussed during my presentation.
A very short history of the web – from basic text to the equivalent of the printed page
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
http://web.archive.org/web/19961017235908/http://www2.yahoo.com/
http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/
http://www.csszengarden.com/?cssfile=/206/206.css&page=0
Examples of HTML5, CSS3 and Javascript – applications in the browser window
http://radikalfx.com/files/collage/demo.html
http://www.kesiev.com/akihabara/
http://htmlfive.appspot.com/static/gifter.html
http://mrdoob.com/projects/harmony/
HTML5 references and browser capability resources
http://www.w3schools.com/html5/html5_reference.asp
http://www.findmebyip.com/litmus/
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
HTML5 & CSS3 feature detection and Javascript browser enhancement
http://diveintohtml5.org/detect.html
http://remysharp.com/2009/01/07/html5-enabling-script/
http://www.fontsquirrel.com/fontface/generator
Exercise showing the new HTML5 semantic tags in use
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
New HTML5 Attributes
http://www.w3schools.com/html5/html5_ref_standardattributes.asp
New HTML5 Events
http://www.w3schools.com/html5/html5_ref_eventattributes.asp
New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)
http://people.opera.com/brucel/demo/html5-forms-demo.html
http://www.w3schools.com/html5/html5_form_input_types.asp
http://www.w3schools.com/html5/html5_form_elements.asp
http://www.w3schools.com/html5/html5_form_attributes.asp
Geolocation
(Note: these demos are only useable on mobile devices for the most part)
http://www.html5rocks.com/tutorials/geolocation/trip_meter/
http://www.drdobbs.com/web-development/225600440
http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation
Local Storage
http://www.html5rocks.com/tutorials/webdatabase/todo/
Session Storage
Web Workers
http://www.drdobbs.com/web-development/225701170
HTML5 Audio Tag
http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to
http://www.html5rocks.com/tutorials/audio/quick/
http://html5doctor.com/native-audio-in-the-browser/
HTML5 Video Tag
http://jilion.com/sublime/video
http://camendesign.com/code/video_for_everybody
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
HTML5 Canvas Tag
http://www.kesiev.com/akihabara/
https://developer.mozilla.org/en/canvas_tutorial
http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/
New HTML5 Tags
article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video
*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)
Existing tags that have been redefined in HTML5 (some subtly)
!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance
Removed Tags
acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp