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:
1 | <form autocomplete="on"><input type="text" /></form> |
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:
1 | <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.”
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.
1 | <form><input type="email" /></form> |
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.
1 | <form><input type="tel" /></form> |
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:
1 | <form><input type="range" /></form> |
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:
1 | <video width="320" height="240"><source src="yourmovie.mp4" type="video/mp4" /> |
2 | <source src="yourmovie.webm" type="video/webm" /><source src="yourmovie.ogg" type="video/ogg" /> |
3 | <object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" |
6 | <param name="flashvars" value="url=/wp-admin/yourmovie.mp4&poster=/wp-admin/" /> |
7 | <param name="allowfullscreen" value="true" /> |
8 | <param name="allowscriptaccess" value="true" /> |
9 | <embed width="320" height="240" type="application/x-shockwave-flash" |
11 | flashvars="url=/wp-admin/yourmovie.mp4&poster=/wp-admin/" |
12 | allowfullscreen="true" allowscriptaccess="true" /> |
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
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:
6 | Your author profile here |
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.
3 | <h1>Title of your piece</h1> |
4 | <h2>And some subtitle as well if you want it</h2> |
7 | Your author profile here |
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.
2 | Copyright 2012 SomeSite.com, ALL Rights Reserved |
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 (
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.
2 | <h2>Author: <span>Tara Hornor</span></h2> |
3 | <h3>Title: <span>Sr. Editor</span></h3> |
6 | <span>City: <span>Albuquerque</span>, |
7 | State:<span>NM</span> </span> |
Conclusion
And these HTML5 elements are my top 10 that have had the biggest impact on me… My personal favorites, if you will.
No comments: