By now, I’ve read dozens of pushy blog posts and complicated tutorials, all boasting about the cool stuff that can be done in HTML5. Even though I’ve been inspired by HTML5 developments, I hadn’t yet been entirely convinced that I could start making sites in HTML5 today, free of incompatibility consequences or doing triple the work to ensure cross-browser consistency.
That all changed this past Monday, when I attended Denver’s first HTML5 Meetup, hosted by and featuring David Geary and Scott Davis.
The turnout was so successful (100+ attendees) that the group had already outgrown their venue in the Oxford Hotel before the first meeting began. Part practical-application, part inspiring pep talk, the meetup had something for everyone: designers, developers, or simply the curious. My favorite concept that I took away from the evening was that I could start with the easier, less overwhelming parts today, while learning concepts that are more foreign to me at my own pace. Below are 5 easy ways I learned to help you jump into HTML5 immediately and consequence-free:
1. HTML5 is already mainstream. You can start with the doctype.
Google and Apple’s home pages? HTML5. 75% of all smartphone traffic? Done with HTML5-compatable browsers. Even if you change nothing else on your site right away, you can use the HTML5 doctype immediately:
<!doctype html>
You can be confident that the HTML5 doctype is backwards-compatible for aging browsers, while switching modern browser content to standards mode. It’s a good first step.
2. Make older browsers recognize HTML5 elements.
Start utilizing some HTML5 structural elements, such as the header, nav, article, section, and footer tags and make older browsers recognize the elements with a small bit of javascript:
<!--[if IE]>
<script>
document.createElement("header" );
</script>
<![endif]-->
Additionally, to make sure all of these elements look the same in older or modern browsers, you can add an HTML5 CSS reset to your stylesheet:
section, article, aside, footer, header, nav, hgroup {
display:block;
}
3. Enhance your forms.
Let’s say that your form includes a text box asking for a number. You could easily change the input type from “text” to “number” and watch your advanced browsers show increase or decrease increment controls:
<input type="number" min="0" max="20" step="2" value="10"/>
If a browser doesn’t recognize what the number type is, no harm done, because the unrecognized value will default to “text.”
4. Get ahead: start practicing the canvas element.
This month’s meetup focused a lot on practical applications of the canvas element, demonstrating its potential to easily match the sleekness and performance that we’ve usually only been able to pull off with flash or much more heavy javascript. To me, canvas is still an intimidating element, and one on which I will be needing further tutorials and guidance, so I am looking forward to seeing what people will come up with in future examples of using it for transformations, scaling, drawing, compositing, image and video manipulation, and more.
5. Check out these great resources for more help.
I walked away from the meetup with several great sites to help me get started in HTML5:
- diveintohtml5.org – free online version of Mark Pilgrim’s HTML5 Up and Running book from O’Reilly Press
- modernizr.com – helps you figure out how to use HTML5 semantic elements
- findmebyip.com – tells you what is supported in your browser, among other cool things
- html5demos.com – demos/examples filterable by topic
- www.html5rocks.com – valuable resources and tutorials
Register for the HTML5 Denver Users Group to get updates and meeting reminders, or search for a meetup group near you: http://www.meetup.com/HTML5-Denver-Users-Group/.
And don’t forget the boilerplate HTML5 reset by Paul Irish, http://www.html5boilerplate.com/