I’ve heard the sentiment “HTML is easy” more times than I can count. And while I would agree that HTML is perhaps easier to learn than other programming languages, you shouldn’t take it for granted.
HTML is a powerful markup language which can be used to give our web applications structure and provide powerful accessibility benefits, but only when used appropriately.
Thus, today we’ll discover ten HTML elements you might not have known existed in the hopes that you can create more accessible, and structurally-sound web applications.
If you'd like to learn more about HTML, you can visit the W3Schools for more HTML elements.
Audio
The <audio> tag defines a sound, such as music or other audio streams. There are three currently supported file formats: MP3, WAV, and OGG.
Blockquote
The <blockquote> tag specifies a section that is quoted from another source.
Output
The <output> tag represents the result of a calculation. You can use the plus sign and equal symbol to indicate that the first and second input values should be “outputted” to the output tag; you can denote this with a for attribute containing the ids of the two elements to combine.
Picture
The <picture> tag allows you to specify image sources. Instead of having an image which you scale up and down depending upon the viewport width, multiple images can be designed to fill the browser viewport.
The picture tag contains two different tags: one or more <source> elements and one <image> element.
The source element has the following attributes:
-
srcset(required): Defines the URL of the image to display -
media: Accepts any valid media query that you might define within CSS -
sizes: Defines a single width value, a single media query with width value, or a comma separated list of media queries with a width value -
type: Defines the MIME type.
The browser uses the attribute values to load the most appropriate image; it uses the first <source> element with a matching hit and ignores the subsequent source elements.
The <img> tag is used to provide backwards compatibility if a browser doesn’t support the element or if none of the <source> tags match.
Progress
The <progress> tag represents the progress of a task.
The <progress> tag is not a replacement for the <meter> tag, thus components indicating disk space usage or query result relevance should use the <meter> tag.
Meter
The <meter> tag defines a scalar measurement within a defined range, or a fractional value. You can also refer to this tag by the name “gauge.”
You can use the <meter> tag to display disk usage statistics or to indicate the relevance of search results.
The <meter> tag should not be used to indicate progress of a task; these types of components should be defined by a <progress> element.
Template
The <template> tag contains content that is hidden from the user, but will be used to instantiate HTML code repeatedly.
Using JavaScript, you can render this content with the cloneNode() method.
Time
The <time> tag defines a human-readable date or time. This can be used to encode date and times in a machine-readable manner so that user agents can add birthday reminders or scheduled events to the user’s calendar. Additionally, this allows search engines to produce “smarter” search results.
Video
The <video> tag specifies a movie clip or video stream. The supported formats include MP4, WebM, and Ogg.
Word Break Opportunity
If you have a long block of text, or a long word, you can use the <wbr> tag to specify where in a body of text it would be ideal to break. This is one way to ensure the browser, upon resize, doesn’t break your text in a strange spot.
I hope these ten HTML elements gave you some new tools to build awesome applications!
Latest comments (103)
Thank you!
There is another one I was not aware of until recently:
<kbd>: developer.mozilla.org/en-US/docs/W...No you not mentioned the other ones please refer this for more extra
thewebuniverse.blogspot.com/
I'm surprised by how many of these I was only vaguely aware, granted I'm not really a webdev. Thanks for the well written intro.
A couple of additional comments from an accessibility perspective:
Output is treated by most user agents as a "live region" by default. Spec does not require this, but that's how it works IRL. That means that screen readers will announce whatever text nodes are inside the output.
Audio and Video - please remember captions and (for video) audio descriptions. These are just as important as the video sources. Apart from accessibility concerns, video without captions will fail to reach its full communicative potential, or even be skipped in situations where people have the sound off. (e.g. sneaking a look at your social media feed during a meeting or presentation, or on public transport). Captions multiply reach enormously.
With the time element, the datetime attribute is really important for screen readers, so that they know whether to announce 00:00 as "midnight" or "zero minutes, zero seconds" or whatever. For elapsed time (rather than 'clock' time) prefix the datetime value with an uppercase P, such as
Thank you very interesting
Good job! I've used wbr a couple of months ago for the first time.
Looking forward to use the meter and progress.
Thank you soo much Emma!
This article has some great information and you explain everything in a great well, it is saved here so I can always come back and check in case I forgot.
really amazed by the
<template />tag.Thank you Emma
Good stuff, thanks! 👍
Hi!
Emma,
Can I reprint the translation into Chinese and share it with Chinese developers?
I will point out the source and author.
Sure thank you! :)
Oh man... template, output and wbr. My new toys to play with
Hi,
I hope to get your consent to translate and shared with Chinese developers, I will indicate the source and author.
Thanks for this. Didn't know wbr existed :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.