The Web Designer’s 10 Favorite HTML5 Elements and AttributesBy Tara Hornor
In spite of Zuckerberg’s mildly critical remarks regarding HTML5, the rest of the world has happily jumped on the HTML5 bandwagon — and for good reason. The newish standard has put a whole host of tools into the hands of designers that help us translate client needs into functional, cross-browser compatible solutions.
Like many other developers, I’ve found that I reach for a few favorites when I work with clients. I recently developed an electronic medical records system all within a WordPress-based platform that required every form input imaginable. I came away realizing just how much I’ve come to rely on the latest HTML5 standards — and not just the forms handling.
So, here are some of my favorite HTML5 elements and attributes that I find myself using just about every day. From forms to video, semantic markup to canvas renders — these are a few of my favorite things.
HTML Form Inputs
I love the form autocomplete option, but mostly because I can turn it off! There are plenty of examples of when I would leave autocomplete in its default state of on — comment forms, contact forms, and basic information gathering tools like that.
But, many forms that I’ve had to create lately are for data collection purposes where the user wouldn’t want to deal with autocomplete trying to fill in information for them. One example is in that Electronic Records Management system when a doctor or nurse is adding patient information. 99% of the time they will not enter the same patient information identically, so an autocomplete feature is pointless — and distracting. Worse, we found that some staff were accidentally using the autocomplete information because they thought it was accurate.
It’s simple to implement, but you must use it within the form tag, not on individual form elements:
<form autocomplete="on"><input type="text" /></form>
To use this validation tool, you have to put the code into the individual inputs:
<form><input type="text" required="required" /></form>
Note that using the required statement does not put one of those little red stars by the input. If the user attempts to submit the form with the field empty, they will be prompted by the browser to fill out the field. Each browser looks a bit different and some browsers have different warnings based upon the type of input — a checkbox gives a different warning than an email field, for example. You may want to design your own visual indication that a form field is in fact “required.”
The email input type doesn’t get validated by all browsers — IE and Safari don’t validate. But, even Safari converts the iPhone and iPad keyboards to have a default “@” and “.com” input, so it makes it easier for the user to input their address.
<form><input type="email" /></form>
Anytime I want a series of only numbers from a user, I like to use the “tel” input type. This is a bit lower on my list, because no real validation occurs. But, if you’re developing for mobile users at all, you’ll want this trick up your sleeve.
When a mobile user begins to input data, their device only prompts them with a number pad when you use this input. Of course, this doesn’t do anything for desktop users, but it makes input for your mobile visitors so much easier. Again, no form validation takes place by default.
<form><input type="tel" /></form>
Last on my favorite HTML5 form features is the “range” input type. I like to use this for surveys as it gives the user a slider as a way to input their response. We’ve all seen the typical 1-5 or 1-10 type response options. But this one is nice because you can create a 1-100 or more, and the user only sees the slider position. With a little CSS gradient, you can start with red and fade to green to give users an additional visual cue as to which direction “good” is:
<form><input type="range" /></form>
I don’t even know where to begin when it comes to the video element in HTML5, other than to say it’s been a life saver! I regularly have to add video to pages for clients across multiple platforms. Few things have made my life easier than being able to upload, drop the video element onto the page, tweak the size, etc., and I’m done.
It’s easy to use and gives you a hierarchy of fallback options. Since many of my clients want self-hosted videos (for various reasons from security to branding), the video tag gives me plenty of options. I typically use two video formats. I can’t go into all the details behind my logic/experience with this decision, but I’ve found that using MP4 and WEBM covers most of my bases. If you want to get even more coverage, throw down the OGG format. Lastly, you can create a fallback to a YouTube video in the absolute worst case.
<video width="320" height="240"><source src="yourmovie.mp4" type="video/mp4" />
<source src="yourmovie.webm" type="video/webm" /><source src="yourmovie.ogg" type="video/ogg" />
<object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
<param name="src" value="http://www.sitepoint.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/wp-admin/yourmovie.mp4&poster=/wp-admin/" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed width="320" height="240" type="application/x-shockwave-flash"
allowfullscreen="true" allowscriptaccess="true" />
Need to convert your client’s video? I use the free Miro Video Converter.
Okay, so I know that about 92% of readers’ eyes crossed when they saw the word “semantic,” but it’s not really all that bad. The main point to understand is that semantic markup isn’t necessarily something that readers see, but you can use the markup to help with your CSS and other functions on your site.
Semantic markup mostly helps search engines. If your clients want better search engine marketing (one of my specialties), then you’d best start integrating semantic markup into your designs. It’s not necessary, of course, but it helps. The reason I list these as favorites is because of the positive impact they’ve had for my clients. Semantic markup has had a huge impact on the visibility of my clients in search engines. No matter how awesome your designs, if you can’t send search traffic to your customers, they’re going to fail.
The test I apply for whether or not to wrap a section in the article element is if it can stand alone and make sense to a person. Will all the content within the article section, if seen by itself, make sense to a reader? If so, then it’s a good candidate for the <article> element. Individual comments, the content in a post to include the headings and the like — these are some natural fits for the article element.
You can then break the article down into the details elements. These can be any subset of the article. From headings to sub-sections within the piece. For comments, the commenter information and the separate comment can be two separate details. Here’s how it might look in your code:
Title of your piece
A bunch of content here
Your author profile here
I use the header to nest the title and/or subtitle of content. Search engines look at this information to see the title. Always use heading elements within the header tag. You can use paragraph text and graphics, but I haven’t found those to be helpful.
<h1>Title of your piece</h1>
<h2>And some subtitle as well if you want it</h2>
A bunch of content here
Your author profile here
The footer element is critical for one very important reason — it shows search engines a block of content that it can expect to see over and over. Search engines are increasingly sensitive to duplicate content on your pages. By defining the footer section consistently through your designs, you help search engines know why that content is repeated. You’d think they’d figure this one out, but some footers contain social media links, others just a simple copyright statement, and others full-featured widgets.
Copyright 2012 SomeSite.com, ALL Rights Reserved
Also a huge boon to search engine success is that of rich snippet markup. I can’t go into detail in this article, but if there’s enough interest, I’ll create some sample markup code of the various common rich snippet formats (<hint><hint> Let me know in the comments if you’d like a piece with more details).
So, I’ll stick with the author rich snippet, since that’s becoming increasingly popular and powerful for protecting content. There are lots of properties you can associate with a person using rich snippets, including:
- Title (Owner, Analyst, Designer, etc)
- Lots more!
Search engines see the rich snippet data within an article and know who the author is and can start linking the author to other pieces. Search engines can also display the author content in the search results, which make author rich snippets a powerful branding tool as well. Here’s how an author section within an article could look.
<h2>Author: <span>Tara Hornor</span></h2>
<h3>Title: <span>Sr. Editor</span></h3>
Site: <a href="http://www.example.com">www.example.com</a>.
And these HTML5 elements are my top 10 that have had the biggest impact on me… My personal favorites, if you will.
What about you? What HTML5 elements and attributes have you found indispensable?