Fried Logic

Top Tweeted Technical Tip of the Day – HTML5

This fantastic article was just posted the first of this month and has a great collection of “25 HTML5 Features, Tips, and Techniques You Must Know” by Jeffrey Way on net.tutsplus.com.  I learned quite a bit from reading this article, which can be read in its entirety in less than 30 minutes without having to click links to other sites to get the “full” information.

A few of the things I learned which will save tons of time in future projects are:

1. With the new pattern attribute, you can insert a regular expression directly into your markup. So, for example, inside of a form input element this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.
2. To handle Interent Explorer’s default setting of all elements to display:inline you have to declare each HTML5 element to display:block.  There is a great script available by Remy Sharp that fixes this issue and some IE print issues as well. It can be embedded this way (using Google’s hosted version):
   <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
3. Instead of using divs with id declarations of “header” and “footer”, you can now specify them with their own semantic tags, <header> and <footer> with corresponding closing tags.
4. I knew this one, but it’s one of the best! You do NOT have to use quotes around your attributes like XHTML and you don’t have to close your elements.  So, something like this works just fine:
   <p class=myClass id=someId> Something about something...
5. There is new audio and video support via <audio> and <video> elements; however, these only work on a few browsers right now, and you have to offer at least a couple different formats for different browsers to handle them automatically as well as a download link for ones that don’t support them at all, yet.  There is much more great information about this in the full article, including explanations for the controls and preload attributes.

That’s all I’ll share of my favorites, but there are 20 more in the article that you really should check out if this topic interests you. Again, the article is  ”25 HTML5 Features, Tips, and Techniques You Must Know” by Jeffrey Way on net.tutsplus.com.

Happy coding!