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://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

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)

http://html5demos.com/

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

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

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

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/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

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

This entry was posted on Tuesday, July 20th, 2010 at 3:47 pm by James Conway and is filed under C2, Dreamweaver, Events, HTML, Standards-Based Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.