Using the right element for the job is of great importance. One problem with frameworks is that they make using the wrong one too easy. React can just as easily bind a click event to a
<div> or a
<button>, but only one of these is keyboard-focusable by default. Without even thinking, we could be excluding a whole set of visitors from ever viewing our sites and applications.
Some elements have pre-defined behaviour already built in. There’s no need to worry about whether it behaves as the user expects or that it gets announced correctly to a screenreader user as these problems are abstracted away for us right from the start. HTML’s API is beautifully simple and if you hook up the required pieces correctly, everything else falls into place.
In this issue, we go through some really useful HTML elements that don’t get the praise they deserve. Depending on your experience not all elements will be new to you - I get that. But hopefully somewhere there will be a little nugget of information that surprises you about an element you use every day.
For me, that was using different media queries inside
Pick up a copy of Net Magazine today and see what you could learn!