If you guys have read any of my other blogs, I’m sure you’ll notice a pattern: rather than discussing opinions or news of new technologies, more often than not, I like to write more in the form of tutorials and hands-on exercises that demonstrate either fundamentals or new tips and tricks that I have learned.
In this blog, I’d like to discuss HTML5. I know, I know, it’s not exactly a subject that’s brand new. However, with as many HTML5 implementations as there are out there, and throughout many discussions, I’ve realized that many of the most talented Web developers have had to return to the basics of HTML5 features and techniques in order to redesign projects the same way they developed them.
Simply put: If we forget what we’ve done and scripted for over two decades with previous HTML versions and return to the basics, we can re-learn a new foundation that is sure to make us stronger developers and smarter engineers.
I. Declaration of Independence … or at least a declaration you don’t have to spend hours memorizing!
The old (4 and below) way:
<!DOCTYPE HTML PUBLIC “=//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>
Of course the actual strict/transitional or html/xhtml would vary depending on your page, but they pretty much worked the same way.
The new HTML5 way:
Done. I know it seems like such a simple thing, but returning to the foundation of what we learned so many years ago and re-learning them in the new HTML5 way will not only strengthen our sites, but it will also build a brand new foundation of flexibility and efficiency. Technology evolves at such a rapid pace that if we don’t keep up, we’re going to be left chasing the wagon of the future.
Just for giggles (if you’re not familiar with HTML5’s editable content), give this a try:
<!DOCTYPE html> <html> <head> <title>SLayer’s Awesome List</title> </head> <body> <h1> SLayer’s 5 Most Awesome Bloggers </h1> <ul contenteditable=”true”> <li>Steve Kinman</li> <li>Kevin Hazard</li> <li>Gary Kinman</li> <li>Matthew Herring</li> <li>Mark Quigley</li> </ul> </body> </html>
Put that into an .html file, and open it up in your favorite browser. You’ll see what should look like this:
A simple list of course. In the years of your career I’m sure you’ve made tens of thousands of these. What’s cool about this list, if you’re not familiar with all of HTML5’s neat little tricks, is that this list is editable. Go ahead and try clicking on the list item and replace the names; even add your own name!
As you can see, I didn’t have the heart to remove any of our most frequent bloggers, so I just appended my name to Mark Quigley (of course, that’s not my true SoftLayer Blog ranking, but one day soon … it shall be!)
This feature may not save the user’s edits, but if you add in some nifty HTML5 storage abilities (local or session), you could have yourself a pretty robust application!
III. Beautiful placeholders to hold a place for my heart.
HTML5 now comes equipped with beautiful support for placeholder text (well, I suppose it depends on your POV on designing/developing forms. If you do it as much as I do, the new placeholders are the holy grail of usable forms!). A very simple preview of what HTML form life was like before HTML5 (without the jQuery function to add text to just one input box):
The fact is: Sometimes we don’t always have the real estate that we would like to provide the user enough instructions to clarify what needs to be done!
This simple form could end up being very confusing for the user. It’s so simple, yet there are several ways to enter a phone number, and depending on the backend, it may only accept one format.
Let’s add a placeholder to that textbox and clear things up:
<input placeholder="(555) 555-5555" type="text" name="phone" id="phone" />
Just by adding the simple
placeholder attribute, we have now cleared up exactly what format we need the phone number! Now let’s have a look:
It’s funny how a simple, light-colored demonstration of acceptable input can really beautify a form and increase usability. With the placeholder attribute in place in this example, I’m not even sure it’s necessary to have the instruction text on the right, as we can clearly see we need 10 digits, with parenthesis and dashes.
Well my friends, looking at the word count of this document, it looks like this blog is coming to a close, and I’ve only gone over three of my favorite foundational features of HTML5, so you know what that means … Part 2!