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!
Oldest comments (102)
Great article Emma, I would just have liked to see what the html elements look like, side by side with the code. This is just my preference though !
I learnt a lot, a I must admit I didn't know most of the tags you have presented. Thanks !
I thought about adding that as well! Maybe I'll edit ;)
This would definetly add to the already high quality of the article, i found myself typing most of these into an online editor to check what they look like :D
Hehe cool I'll do that thanks :)
I added the ones I could!
I've never seen
<wbr>before, that's super helpful!Same here, thanks for that !
Thanks Emma, nice post. I only knew about a couple of these before :)
I know that. What a boring arti... wait... that's interesting! Wow, I didn't knew I can do that!
My thoughts reading the article. Great job! :)
Thank you!
The
≤of theoutputtag blew my mind.I still lament the deprecation of the
<blink>tag.EDIT: Ah, that's because the opening element isn't
≤; it's=<, which is rendered in some typefaces with the single glyph.I noticed that too but I'm guessing it's a font like Fira Code that has ligatures in it.
I will definitely try to use these tags next time, thanks for sharing.
Thanks for this Emma, picture and wbr may come in handy in particular.
I don't think I can add the picture example on CodePen because I can't upload a local picture
No worries, just making me aware of the tag is good enough for me :)
Thanks again!
Thanks for sharing Emma 🤗
This is awesome
Thanks for sharing
I love how you included an image of the code for mobile users ❤️ (accessibility for everyone)
What a great read. Will definitely try out and use these elements!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.