The usability of HTML elements

Last week, I gave a talk at the Maps for the Web workshop. As part of the discussion, I talked about how some HTML elements are really easy for developers to use and understand, and others are hard.

I'm not aware of any formal research on this - all I have is my experience as a user and teacher of HTML. If you know of anyone who has looked into this more deeply, I'd love to know.

Let's take a look at the <video> and <audio> elements for adding multimedia to a page.

 HTML<audio controls>

  <source src="myAudio.mp3" type="audio/mpeg">

  <source src="myAudio.ogg" type="audio/ogg">

  <p>Your browser doesn't support HTML5 audio. Here is

     a <a href="myAudio.mp4">link to the audio</a> instead.</p>

</audio>

 HTML<video controls width="250">

  <source src="myVideo.mp4" type="video/mp4">

  <source src="myVideo.webm" type="video/webm">

  <p>Your browser doesn't support HTML5 video. Here is

     a <a href="myVideo.mp4">link to the video</a> instead.</p>

</video>

The syntax is pretty clear - if you've used <img> you'll get what src= is. Once you've learned how to use one, the other is almost identical. The list of events that they support is identical. Imagine if <audio> used playing and <video> used isInProgress for the same things - it would be a nightmare!

But not all elements are so easy to use. For example, <picture>

 HTML<picture>

  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">

  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">

  <source srcset="logo-480.png, logo-480-2x.png 2x">

  <img src="logo-320.png" alt="logo">

</picture>

Why does this use srcset? How is that different from src? Why is whitespace significant? What if I leave out the commas? Why is there a CSS-like syntax in media? What do the w and x mean?

Sure, you can figure this all out from reading the spec - but it is radically different from the <img> and <video> elements. Is it powerful? Sure! Is it easy to learn and use? I don't think so.

Perhaps I'm picking unfairly on <picture>. From my experience it is confusing for developers both new and experienced.

With any extension to the specification, we need to think about how developers-as-users will interact with the new functionality.

I don't know if any user research was carried out on the <video> element before it was released. But I do know that lots of users want more than just a binary on/off for controls, for example.

When we think about adding geographic mapping in HTML, we have to create something with is useful for the power-user. But it also has to be useful for the harried developer who has their boss shouting "JUST ADD A F$*&ING MAP TO THE WEBSITE!"

Do non-English speakers know that lat and lon refer to latitude and longitude? Do developers know whether zoom=0 means zoomed in or zoomed out?

Those are just some examples from the top of my head. I'm sure you can think of others.

My plea to you, gentle reader, is to do some user research before introducing new things to a specification. Don't just ask the people around your office, but go out and speak to users around the world and find out how your proposal makes life easier for them.