Know Your HTML

HTML didn’t stop at version 5 and it continues to evolve. Chris Lienert will review a number of HTML elements and attributes that are new and (somewhat!) ready to be used.

Know Your HTML

Chris Lienert, Front End Technical Lead Iress

Chris starts by noting the title is a bit of a lie… “Know Your HTML” seemed a bit too authoritarian, so he changed it “What’s New In HTML”… but most of this isn’t new either… so really the title should just be What’s In HTML? Because most people don’t really seem to know.

A little history – HTML reached version 5 and it was brillant, but the name has never changed because now we have living standard instead of HTML 6… whut?

What that’s about is reflecting the way HTML and the web have evolved. Everything is an increment from a vendor, or the W3C, or the community. Each feature is released progressively, which is what always really happened.

There is some debate now about whether there’d be some marketing benefit to an HTML6 even if only to get people take a new look at it.

When looking at what’s new, there are three key features:

  1. Does it work?
  2. Is it accessible?
  3. Can we style it?

It seems odd to even ask if something works – ie. does it do the thing it set out to do? Not everything gets used as intended, notoriously the web filled in the idea of a Date Picker with so many patterns that it was impossible to standardised.

Accessibility is reasonably straightforward and unambiguous – new things in HTML have to work for everyone.

Being able to style things isn’t so straightforward. Not everything can be styled out of the box.

Chris notes he is not the type of person who comes up with beautiful demos, so instead go to Oliva Ng’s codepen for nice examples! Chris’s own demos are relatively plain.

Codepen: range slider

✔ Works – good for quickly picking within an explicit set of values
✔ Accessible – works across devices and inputs
✔ Styleable – yes you can, although it is an absolute nightmare to do. TLDR: steal someone else’s example and if you are the praying type, pray.

This example also includes the output element. It’s a box you can assign an output to – a value on the screen that updates as the input changes. Very simple.

✔ Works – yes. It’s a box you can assign a value to…
✔ Accessible – yes as it will tell people what’s going on, although it is a little shouty.
✔ Styleable – yes. It’s a box. You can apply whatever you want to the box…

Basically you should use this any time you are writing output to the screen.

Codepen: HTML Progress

Progress is what it sounds like: it indicates progress between a start and end value, or an indeterminate progress state for things like file downloads.

✔ Works – it shows progress
✔ Accessible – it announces progress
✔ Styleable – you need remove native style first with appearance:none, then work the design back up with browser-specific code. You will need to get into shadow DOM to figure out what’s going on, so it’s worth digging into the tools to enable features for inspecting the shadow DOM.

Codepen: HTML Meter

Meter is another element that does one specific thing really well. It shows incremental progress towards an ideal value. A password strength indicator is a good example.

✔ Works – it shows progress
✔ Accessible – it announces progress
✔ Styleable – yes, in a similar manner to progress where you remove the native style and work it back up for each browser

Codepen: HTML Details/Summary

This one is weird – it seems like it would be an accordion but it’s not an accordion.

❓ Works – people aren’t too sure what it’s meant to do, but it
❓ Accessible – since the purpose isn’t clear it’s hard to say
❓ Styleable – naturally Chris immediately wanted to animate it, since that’s almost certainly a design requirement… and you can animate out but not in.

So it’s not quite what we want yet.

Codepen: HTML Hidden attribute

The ultimate in doing one thing and doing it well…

✔ Works – it hides things
✔ Accessible – it’s not there when it’s hidden
✔ Styleable – …well, it takes away style…!

Codepen: HTML Dialog

Awesome! Finally a native dialog right?

❓ Works – you can show and hide just by changing attributes; it handles the backdrop for you; there’s a DOM API that you must use for things to work; and you’ll need polyfills
❓ Accessible – there are some issues
❓ Styleable – if backdrop worked it would be great, otherwise it’s just a box

Painfully close, but not supported in Firefox yet.

So what makes a good HTML element? The things that work are the ones that do something really well, usually something small and well understood. But there are lots of pieces missing – no tabs, no accordion, things like that.

So what can you do about it? You can get involved – many features are being specced at the moment and many browsers let you vote for what you want them to work on.

So this was what’s in HTML. Many aren’t new – you can use them today. You don’t have to reinvent the wheel. For the things that aren’t there, you can make a difference to bring them into existence.