3 Underrated HTML elements that are actually awesome
Did you know that there are over 100 different HTML elements? We're all familiar with common elements
like <h1>, <p> or <img>.
But many elements lead a niche existence. Some web developers don't even know they exist.
That's why in this article I'd like to bring three underrated HTML elements to the
fore: <time>, <picture> and <dl>.
Photo: © Olya Kobruseva / pexels.com
The time element: Machine-readable dates
The <time> HTML element
represents a specific point in time, date, or period. Together with the datetime attribute,
the date is provided in a machine-readable format. What's that good for? Here's an example:
The example above shows three events, each with a date displayed in a tear-off calendar style. Maybe your thinking: Dude, that's self-explanatory! Together with the heading "Events 2022" it's clear what the precise dates are.
Sighted people will probably have no problem with this representation of the date. But that's not true for blind or
visually impaired users. When the screen reader announces "mar four" or "jul eight", it will be confusing.
Use the <time> element to provide clarity.
Unfortunately, not all popular screen readers support the element. VoiceOver
correctly reads out the date defined in the datetime attribute (tested with iPhone 8, iOS 15,
Safari). Sadly, it doesn't work with NVDA and TalkBack at the moment.
The picture element: Load images based on screen size
The <picture> HTML element
is an image container that enables you to offer alternative versions of an image for different display/device scenarios.
It contains one <img> element and usually several <source> elements.
Consider the following example:
<picture>
<source srcset="cat_lg.avif" type="image/avif" media="(min-width: 60rem)">
<source srcset="cat_md.avif" type="image/avif">
<source srcset="cat_lg.webp" type="image/webp" media="(min-width: 60rem)">
<source srcset="cat_md.webp" type="image/webp">
<source srcset="cat_lg.jpg" media="(min-width: 60rem)">
<img src="cat_md.jpg" alt="An adorable cat" loading="lazy" decoding="async">
</picture>
The type attribute specifies a MIME type for the resource defined in the srcset
attribute. In the example above, the first <source> element points to an image in the modern
AVIF format. The browser will pick this image if it's capable of rendering AVIF images.
Otherwise, it moves on to the next <source> element.
This allows modern browsers that support AVIF or WebP format to load a highly compressed, high-quality image. Older browsers can access the JPG version of the image instead.
The media attribute specifies a media query that the browser will evaluate. In the example we're
telling the browser that if the viewport width is wider than 60 rem it must use the large image. If the media query
evaluates to false, the browser skips it and evaluates the next <source> element.
Foto: © Ihsan Adityawarman / pexels.com
The srcset attribute offers another option for image optimization. You can also use it together
with an <img> element, as shown in the cute cat picture above. Its HTML code looks something like this:
<img
srcset="cat-480w.jpg 480w, cat-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="cat-800w.jpg"
alt="A sleeping cat with black-grey fur."
>
The srcset attribute defines a set of images we will allow the browser to choose between,
and what size each image is. The sizes attribute defines a set of conditions (e.g. screen widths)
and indicates what image size would be best to choose, when certain media queries evaluate to true.
If you want to delve deeper into the topic, I can recommend the following articles:
Markup key-value pairs with dl, dt and dd
Lists are one of the basic building blocks of HTML. Every web developer knows the HTML
elements <ul> and <ol> for
unordered
and ordered lists.
Yet few are familiar with their close relative <dl>.
The so called description list contains a list
of terms and descriptions that are defined with the HTML elements <dt>
and <dd>. Common uses are to display a glossary or metadata (a list of key-value pairs).
<dl>
<dt>Account Owner</dt>
<dd>Martina Musterfrau</dd>
<dt>Banking Institute</dt>
<dd>Musterbank</dd>
<dt>IBAN</dt>
<dd>AT12 3456 7891 2345 6789</dd>
</dl>
Why do I think this element is awesome? You guessed it! It conveys the content in a programmatic way that screen
readers can understand. But web developers also benefit from it. Think of the example above as a sequence
of <div> elements. Which code block is more readable and easier to navigate?
Semantic HTML makes code more readable!
Posted on