The Web Designer’s 10 Favorite HTML5 Elements and Attributes

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

Prior to HTML5 I relied heavily on JavaScript and other tools to make my forms work the way I wanted them to. Now, there are some tools for making my life, and my site users’ lives much easier.

Autocomplete

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: [sourcecode language=”html”] <form autocomplete=”on”><input type=”text” /></form> [/sourcecode]

Required

Have you even struggled through the process of creating form validation? Well, you will at some point, and most of us have had to create or use JavaScript to make this work. With the required attribute in a form, you can specify to have the browser automagically check that those required inputs have data. While this doesn’t work for all browsers yet, the word on the street is that even Safari will support the required option. They claim to support it, but I haven’t seen that to be the case yet. So while you can’t use this for everything, if a client has site visitors that use Firefox, Chrome, or Opera, then this works like a charm. IE and Safari have more limited support and may rely on JavaScript form validation. To use this validation tool, you have to put the code into the individual inputs: [sourcecode language=”html”] <form><input type=”text” required=”required” /></form> [/sourcecode] 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.”

Email

Speaking of emails, another form validation tool that I use regularly is the email attribute. When I put a form on a page that requires an email address, I add the email attribute to let the browser do the work. This means that I don’t have to make a regex or JavaScript-based validator for this one field. 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. [sourcecode language=”html”] <form><input type=”email” /></form> [/sourcecode]

Tel

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. [sourcecode language=”html”] <form><input type=”tel” /></form> [/sourcecode]

Range

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: [sourcecode language=”html”] <form><input type=”range” /></form> [/sourcecode]

Video

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. Of course, there are all kinds of attributes within the video element I could go into.  (The poster and control features are wonderful as well.) But for now, the most basic format for getting your videos to play today in most browsers, without the use of any external JavaScript, flash, or plug-ins, would look like this: [sourcecode language=”html”] <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″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″> <param name=”src” value=”https://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” src=”https://www.sitepoint.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf” flashvars=”url=/wp-admin/yourmovie.mp4&poster=/wp-admin/” allowfullscreen=”true” allowscriptaccess=”true” /> </object> </video> [/sourcecode] Need to convert your client’s video? I use the free Miro Video Converter.

Semantic Markup

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.

Article

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: [sourcecode language=”html”] <article> Title of your piece A bunch of content here Your author profile here </article> [/sourcecode]

Header

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. [sourcecode language=”html”] <article> <header> <h1>Title of your piece</h1> <h2>And some subtitle as well if you want it</h2> </header> A bunch of content here Your author profile here </article> [/sourcecode]

Footer

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. [sourcecode language=”html”] <footer> Copyright 2012 SomeSite.com, ALL Rights Reserved </footer> [/sourcecode]

Rich Snippets

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:

• Name
• Photo
• Title (Owner, Analyst, Designer, etc)
• URL
• Affiliation
• Address
• 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. [sourcecode language=”html”] <div> <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>. <span>City: <span>Albuquerque</span>, State:<span>NM</span> </span> </div> [/sourcecode]

Conclusion

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?

Frequently Asked Questions (FAQs) about HTML5 Elements and Attributes