links - html5 using the tags

1. Start here

• A Minimal HTML5 Document   http://www.sitepoint.com/blogs/2010/05/25/a-minimal-html-document-html5-edition/ "Because all browsers (even old ones like IE6) fully support the shortcuts that are being standardized in HTML5, we can use them today; this is despite most new features of HTML5 remaining off-limits until the browsers catch up. ... here's the very minimum that an HTML document should now contain, assuming it has CSS and JavaScript linked to it: ..." (The page won't print or PDF, darn it.) Kevin Yank - SitePoint : May 2010
• Marking up a blog with html5 http://html5doctor.com/designing-a-blog-with-html5/ Good explanation of html5 code and page structure. (Simplified version of Bruce Lawson article) Bruce Lawson : 2009

2. HTML5 tags - overviews

• An Introduction to HTML 5: Doctype, Header and Nav Elements   http://www.devarticles.com/c/a/HTML/An-Introduction-to-HTML-5-Doctype-Header-and-Nav-Elements/ Basics of writing HTML5 code. Alejandro Gervasio : April 2010
• HTML5 Tags Meaning (The Semantics of HTML5 Structural Elements)   http://catcubed.com/2009/10/15/the-semantics-of-html5-structural-elements/ That is: what the new HTML5 tags mean. "Guidelines I’ve devised based on both the W3C HTML5 specs (I usually refer to the latest draft and then review any differences with the older last published version) and the collective opinions of the various “experts”—not all of whom I agree with. A list of reference links is included at the bottom of this article." CatCubed : October 2009
• Touch The Future: Create An Elegant Website With HTML 5 And CSS3 http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/ Quick overviews of HTML5 and CSS3, the process of designing a website, template to download. Piervincenzo Madeo - PV.M Garage : 2010
• You can use html5 today   http://www.sitepoint.com/article/html-5-snapshot-2009 Is HTML 5 really too far away to worry about? Bruce Lawson doesnt think so — you can start using HTML 5's new structural elements right away.' Bruce Lawson : 2009

3a. The tags: listing

• HTML 5 Tags http://www.quackit.com/html_5/tags/ A list of the tags and basic function, linking to more about what they do, with a "tryit" page. QuackIT : 2010
• HTML5 Essentials - Slideshow http://marcgrabanski.com/articles/html5-essentials-presentation Shows the different tags in use, with notes about them. No audio to explain the things, but useful. Marc Grabanski : March 2010

3b. The tags: Forms

• <input type="search" />   http://css-tricks.com/webkit-html5-search-inputs/ "One of the new types of inputs in HTML5 is search. It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling. " WebKit means Safari on Mac, and differently means, it applies its own style, and you can't change it in your css! Very good comments explaining more, and some ways to get around it. Paul Irish - HTML5 Boilerplate : August 2010
• Enhance your web forms with new HTML5 features   http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features "Exciting new HTML5 features to improve your forms and make them more functional and user-friendly." Jean-Baptiste Jung - CatsWhocode : September 2010
• Have a Field Day with HTML5 Forms   http://24ways.org/2009/have-a-field-day-with-html5-forms "How to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques." Inayaili de Leon - 24Ways : December 2009
• How to build cross-browser HTML5 forms   http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/ "how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins." Can make slider, spinner, date picker, color picker, placeholder text, url field, email field. Cristian Colceriu - NetTutsPlus : January 2011
• HTML5 and Even Fancier Forms   http://articles.sitepoint.com/article/html5-forms "Each browser is implementing the new elements slightly differently, and the most impressive features are yet to be fully ready for prime time. However, if you dig a little deeper, there is untapped potential that you can use right away" Tim Connell - SitePoint : September 2010
• Rethinking Forms in HTML5   http://net.tutsplus.com/tutorials/html-css-techniques/rethinking-forms-in-html5/ "browser implementation is spotty to say the least. [But], the changes on the horizon are worth examining today. " John Cox - NetTutsPlus : May 2010

4. Cool examples

• "Color cycling" - Beautiful waterful with HTML5 (and javascript) http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5 You don't have to read all the balabala. Scroll down to the picture, and click on one of the "Launch" buttons. Then sit back and be amazed. This is NOT an animated gif, and it is NOT flash. Full source code is there to download. Mark J. Ferrari : August 2010
• HTML5 watch http://html5watch.tumblr.com/ "Collecting examples of creative, innovative, and unexpected use of emerging web technologies such as HTML5 and CSS3." Links to sites, pages, and tools. Nevin Mrgan : June 2010

more: HTML5 templates

• Coda Clip Library for HTML5   http://rathersplendid.net/home/coda-clip-library-for-html5 [code]
  "Many of these clips have been lifted from the brilliant HTML5 Boilerplate & I credit them fully for that. I have added some Coda bookmark comments (which look like ) to help you navigate your code."
  Full code is on the page, plus download links. Zander Martineau - RatherSplendid : September 2010
• Coding a CSS3 & HTML5 One-Page Website Template   http://tutorialzine.com/2010/02/html5-css3-website-template/ [code]
  "Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in." 1. The Design; 2. the HTML; 3. The CSS; 4. jQuery scrollTo plugin.
  Full code is on the page, plus download links. Martin Angelov - TutoralZine : February 2010
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using   http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techn iques-youll-soon-be-using/ [code]
  "In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. "
  Full code is on the page, with images, good explanations. Mads Kjaer - NetTutsPlus : July 2009
• HTML5 Boilerplate   http://html5boilerplate.com/ [code and explain]
  "HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed."
  Full code is on the page, plus download all files as zip. Good comments. Paul Irish - HTML5 Boilerplate : August 2010
• HTML5 Reset   http://html5Reset.org/ [code and explain]
  "Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We've been using these files for a long time and we've progressively added bits and pieces to them as our own personal best practices have evolved. Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for an update, and we thought we'd put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it's a fairly good starting place that anyone can take and make their own."
  Explains the code; download as zip file; links to good resources. HTML5 Reset : August 2010

more: HTML5 compatibility

• HTML 5 in Internet Explorer http://www.splashnology.com/blog/html5/413.html "Web developers cry happily looking at HTML 5 ... Alas, Internet Explorer is dragging its feet as usual ... Actually, there are two problems in IE: you have to separately switch on the support of the HTML 5 tags in the ordinary document and in the dynamically added (for example, via AJAX) content." How to get MeSsIE to recognise HTML5 tags -- pretty easily! SplashNology : April 2010
• HTML5 Accessibility http://www.html5accessibility.com/ "which HTML5 user interface features are accessibility-supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web." Focusing on accessibility issues. Good chart, latest browsers, will be updated. HTML5Accessibility : January 2011

more: Resources, references, cheatsheets

• 15 Best HTML 5 Tutorials http://www.topdesignmag.com/the-best-html-5-tutorials/ Some basics, and some fancy advanced stuff. TopDesignMag : October 2010
• 25 HTML5 Features, Tips, and Techniques you Must Know http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and -techniques-you-must-know/ "If you're feeling a bit overwhelmed with the coming changes/updates in HTML5 ... " use this nice clear list of the main things we need to know. NetTutsPlus : August 2010
• HTML 5 specs http://www.whatwg.org/specs/web-apps/current-work/ A work in progress. "Introduces features to HTML and the DOM that ease the authoring of Web-based applications. Additions include the context menus, a direct-mode graphics canvas, inline popup windows, and server-sent events." WHATWG : June 2007
• HTML Cheatsheets http://spyrestudios.com/mega-collection-of-cheatsheets-for-designer-developers/#html Links to useful online cheatsheets and references, with screenshots. Spyre Studios : June 2010
• HTML5 Doctor   http://html5doctor.com/ "Helping you implement HTML 5 today." HTML5 Doctor : 2009
• HTML5/CSS3 Cheatsheet http://www.storiesinflight.com/html5/ Very useful! Summary of tags and properties - code and examples Stories in Flight : September 2010

More html info on this site