DEV Community

loading...
Cover image for 10 HTML Elements You Didn't Know You Needed

10 HTML Elements You Didn't Know You Needed

Emma Bostian ✨ on March 18, 2019

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 progra...
pic
Editor guide
Collapse
felipperegazio profile image
Felippe Regazio • Edited

Awesome Emma, thank you! I would like to add one of my favorites:

<details>
      <summary>Click To Open</summary>
      Hey, im natively collapsable. My content remains hidden till you click on Summary.
</details>
Enter fullscreen mode Exit fullscreen mode
Collapse
harryadney profile image
Martin Dimmock

Nice. Needs a polyfill though.

Collapse
felipperegazio profile image
Felippe Regazio

True. But nice yet ;P

Collapse
gitvitor profile image
Collapse
nans profile image
Nans Dumortier

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 !

Collapse
emmabostian profile image
Emma Bostian ✨ Author

I thought about adding that as well! Maybe I'll edit ;)

Collapse
joppedc profile image
JoppeDC

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

Thread Thread
emmabostian profile image
Emma Bostian ✨ Author

Hehe cool I'll do that thanks :)

Thread Thread
emmabostian profile image
Emma Bostian ✨ Author

I added the ones I could!

Collapse
fluffy profile image
fluffy

So, one big thing I'd mention on this article in general is that you're using images to show the code, which isn't very accessible. It would be much better to use fenced code blocks (three backticks); for example,

<blockquote cite="http://example.com/">
    It was the best of times, it was the worst of times.
</blockquote>

The code for the above being:

`​``html
<blockquote cite="http://example.com/">
    It was the best of times, it was the worst of times.
</blockquote>
``​`
Collapse
emmabostian profile image
Collapse
inkones profile image
Ines Kondor

Thanks a lot for the hint - is there an equivalent for this "trick" in HTML, please?

Collapse
fluffy profile image
fluffy • Edited

The three-backticks stuff is specific to Markdown, although it's usually handled by a library such as Pygments, which you can certainly use on its own as well.

YOu can also use the <pre><code>...</code></pre> tag to preformat stuff although that won't do syntax highlighting and you'll need to convert < to &lt;. (Technically you only need <pre> but that's a visual tag while <code> is the semantic tag to say what the text represents.)

Thread Thread
inkones profile image
Ines Kondor

Thank you very much for your quick response.

Yes, it is the need to convert the angle brackets plus also keeping the indentation/readability intact that is kind of odd to do still "manually" in 2020. (Am sure there are online converters or we could write one ourelves, but still ... hoping for a more efficient way)

Collapse
jckuhl profile image
Jonathan Kuhl

HTML is easy, but you're right, there are a ton of useful tags out there that people aren't aware of. The <picture> tag is one I've never known about and it sounds like a very useful way to handle images in a responsive web page.

And HTML does start getting complex when you start thinking in terms of semantics and accessibility.

Collapse
genocideaon profile image
Pranat

Yes, a few people focus on semantics and accessibility. So, they say HTML is easy.

Collapse
desi profile image
Desi

I've never seen <wbr> before, that's super helpful!

Collapse
goodbytes profile image
goodbytes

Same here, thanks for that !

Collapse
chrishall78 profile image
Christopher Hall • Edited

Thanks for sharing! One thing to note though is that if you have to support older browsers like Internet Explorer, some of these tags are not supported there.

  • output
  • picture
  • meter
  • template
  • time

Edit: Instead of avoiding these tags, you can use them as part of a progressive enhancement strategy. However that is more complicated and takes more time to test.

Collapse
joeberetta profile image
Joe Beretta

I think we can start forget about IE, because even Microsoft want's en it up

Collapse
mingan profile image
Mingan

That would be very nice but it's still a looong way away. I just checked our numbers and IE is ~7% of our visitors. Almost all of them are IE11 which can be reasoned with somewhat. However, the numbers aren't going down at all.

Thread Thread
joeberetta profile image
Joe Beretta

Yeah, it's sad. But what if... What if just start campaign of ignoring IE?

Thread Thread
mingan profile image
Mingan

On what grounds? The fact that developers don't like IE has almost no weight as an argument. The users with IE are not just drive-by's on the public site but they are actual paying users. In order to drop IE11 support, the percentage has to drop to a level where the cost of potentially losing them outweighs the cost of maintaining IE11 compatible code. Since we're usually not doing anything too crazy it's not a huge problem to support IE11, it's just annoying to work with when a problem occurs.

Thread Thread
capsule profile image
Thibaut Allender

ignoring IE = ignoring users = ignoring customers = ignoring money. If you can afford it, do it, but that probably means you're running a charity.

Thread Thread
madhadron profile image
Fred Ross

There's a tradeoff. How much developer time does it cost to support IE, and how much revenue would you lose from not supporting it?

Or, if you are dealing with paying customers, tell them support is dropping, and tell anyone who screams and insists on the old browser that they have to pay for keeping support just for them. If they're just being ornery, they'll usually grumble and upgrade. If they are really stuck, they'll often pony up cash.

Collapse
berkmann18 profile image
Maximilian Berkmann

True, people who only used IE should have (at least) moved to Edge by now. There's little to no reasons as to why a user would still use IE.

Collapse
jrtibbetts profile image
Jason R Tibbetts • Edited

The of the output tag 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.

Collapse
aaronpowell profile image
Aaron Powell

I noticed that too but I'm guessing it's a font like Fira Code that has ligatures in it.

Collapse
fluffynuts profile image
Davyd McColl

Great stuff Emma. Would love to see browser support information. I know it's time-consuming to look up. I'm going to head off to MDN to look for myself, but I think the info would add something valuable to an already valuable article.

Collapse
emmabostian profile image
Emma Bostian ✨ Author

You should check out CanIUse!

Collapse
fluffynuts profile image
Davyd McColl

I don't have enough ♥'s. And some kind person wrote a cli client for it too: github.com/sgentle/caniuse-cmd

Thread Thread
fluffynuts profile image
Davyd McColl

I also see that blockquote can have cite as a child element -- and then the citation is displayed nicely for the user. I'm definitely going to use that sometime. Thanks again for the awesome article (:

Collapse
stephenmirving profile image
Stephen Irving

You can also write scss code and compile it to css with vendor prefixes added automatically for the browsers you tell the compiler to support, based on caniuse.com data. A lot of the new HTML5 elements can be supported with js polyfills and normalizer css too.

Collapse
capsule profile image
Thibaut Allender

I would avoid using the picture element in 2019. It's mostly a remanent from the first responsive images implementation. img now also has access to easier srcset and sizes attributes and has a smaller footprint. See ericportis.com/posts/2014/srcset-s... , especially part 2.

Collapse
fluffy profile image
fluffy

Yeah, came here to say the same thing – img srcset is supported everywhere, already gives you correct fallback "for free" (since you still declare a src attribute for that purpose), and provides all of the CSS query selector stuff in a much more compact, easily-parsed and easily-generated format. For example, the article's code would be captured as <img src="img_kitten.jpg" alt="Kitten" srcset="img_cat_fat.jpg 650w, img_cat_fluffy.jpg 465w">

Collapse
arvigeus profile image
Nikolay Stoynov

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! :)

Collapse
emmabostian profile image
Collapse
mornir profile image
Jérôme Pott

Thanks! Always good to get reminded of the variety of HTML tags.
I recommend checking this website out for a nice overview of all HTML tags:
htmlreference.io/

Collapse
programazing profile image
Christopher C. Johnson

Awesome post!

Just remember to check against caniuse.com

Collapse
wormss profile image
WORMSS • Edited

Time seems it will be useful for my work. We are looking into accessablity and that seems a top contender.

Thankfully unlike someone in these comments, we are able to ignore IE and have stated you are REQUIRED to have a modern browser.

Collapse
sarahatzing profile image
Hibs

What do you think is the difference between using <picture> versus <figure> for images and their captions? I've been using <figure> but now I'm reconsidering whether I should have been using <picture> instead this whole time 🤔

Collapse
alixbrunsperger profile image
alix brunsperger

Great article ! Thanks for the work and sharing =)

I am curious about one thing, with the tag picture, does that load every image on the first load of the page, or only the one needed according the media query ?

Collapse
emmabostian profile image
Collapse
ahmid profile image
Ahmid-RA • Edited

template IS WRONG! appending a template is inconsequential. template.content is what you want to "append. Template is just a declarative way to create a documentFragment. THEORETICALLY correct. But net result is zero. developer.mozilla.org/en-US/docs/W...

Collapse
emmabostian profile image
Emma Bostian ✨ Author

Lol well you could've been a little nicer about it..

Collapse
ahmid profile image
Ahmid-RA

What did I say that was false? I contribute to open source daily. And when you're wrong they tell you you're wrong. No malice. Just truth. If I didn't explain or show HOW to correct the wrong. THEN i'm an asshole. Do remember intent rarely plays out well in comment section.

No good deed goes left unpunished... ¯_(ツ)_/¯

Perhaps shouldn't have used caps in retrospect? I'll take accountability for that.
Enjoy your Sunday Emma :-)

Thread Thread
dev_anna profile image
Anna

You can be honest and still have good manners. It's not that difficult.

Collapse
brennanyoung profile image
Brennan Young

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

Collapse
adam_cyclones profile image
Adam Crockett

I have always thought that audio and video are well known and blockquote too but I guess it's all relative? The others have rare but valid use cases. A11y will benefit from the above in proper usages, thanks for sharing.

Collapse
parthchokshi profile image
Parth Chokshi

Loved wbr tag! Never knew about that. So useful!

Collapse
daveskull81 profile image
dAVE Inden

Awesome post. It is a great reminder of what can be done with purely HTML. I think that sometimes many (including myself) get caught up with how to implement things using Javascript that we can forget what HTML is capable of doing on its own and that we don’t have to over complicate things.

Collapse
jjtowle profile image
Jason Towle

Thanks for this Emma, picture and wbr may come in handy in particular.

Collapse
emmabostian profile image
Emma Bostian ✨ Author

I don't think I can add the picture example on CodePen because I can't upload a local picture

Collapse
jjtowle profile image
Jason Towle

No worries, just making me aware of the tag is good enough for me :)

Thanks again!

Collapse
djpandab profile image
Stephen Smith

What a great read. Will definitely try out and use these elements!

Collapse
sivaraam profile image
Kaartic Sivaraam • Edited

Seems the rendering of the needs improvement in Firefox for Android. I had no idea it was a scroll bar.

This is how it was rendered: thepracticaldev.s3.amazonaws.com/i...

Collapse
rolandixor profile image
RolandiXor (Roland L. Taylor)

Thanks! There are few of these that I never heard of - time to experiment!

Collapse
cristiano profile image
cristiano

This is great! Don’t know how I’ve missed the output tag as I find my self having all these outputs in my prototypes and I just place them in paragraphs or divisions. No more 😆

Collapse
parshirahul profile image
Rahul Parshi

Out of 10 tags I had used only

Blockquote tag
that to while commenting on your 6 tips for productivity article 😁😁😁
Collapse
maxart2501 profile image
Massimo Artizzu

I would mention <dialog>, although its support isn't great. I have an article brewing about it 🤫😄

Collapse
mike_hasarms profile image
Mike Healy

This is great.
I'm excited about the prospect of doing some art directed cropping with the <picture> element, but it does open up a can of worms when it comes to CMS or dynamic data sources.

Collapse
ianmarkind profile image
Ian Markind

Really good information, thanks!

Collapse
_justirma profile image
Irma Mesa

Totally didn't know some of these existed. The progress and output tags were the most interesting to learn about.

Collapse
lauragift21 profile image
Gift Egwuenu

Thanks for sharing Emma 🤗

Collapse
danx16 profile image
danx16

thank you for your helpful post.

Collapse
maxwell_dev profile image
Max Antonucci

Like many here, I'll definitely be keeping that wbr tag in mind. It could have saved from a lot of past headaches!

Collapse
briandesousa1 profile image
Brian De Sousa

Great article! I have been working with HTML for so many years and several of these were news to me. I really appreciate the side-by-side CodePen examples too.

Collapse
apyman profile image
Adeniyi

interesting reminder this one. Keep it up

Collapse
_darrenburns profile image
Darren Burns

Thanks Emma, nice post. I only knew about a couple of these before :)

Collapse
vjnvisakh profile image
Visakh Vijayan

Really cool ... I didn't know about the template tag. Will definitely use it in my next code. Thank you.

Collapse
smonff profile image
🌌 Sébastien Feugère ☔

really amazed by the <template /> tag.

Collapse
newfrontendweekly profile image
Newfrontendweekly

Hi!
Emma,
Can I reprint the translation into Chinese and share it with Chinese developers?
I will point out the source and author.

Collapse
emmabostian profile image
Emma Bostian ✨ Author

Sure thank you! :)

Collapse
boceto1 profile image
Jean Karlo Obando Ramos

Great article. Thanks

Collapse
pwbo profile image
Paul Wellner Bou

Thank you!
There is another one I was not aware of until recently: <kbd>: developer.mozilla.org/en-US/docs/W...

Collapse
ar10642 profile image
Andrew Richardson

This is great, thank you.

Collapse
islam profile image
Islam Sayed

Thank you for the good article. , , , , and are new to me.

Collapse
codestuff2 profile image
Adam Whitlock

Great article!

Another lesser known element I discovered a bit ago is the
Super simple way to make a pure html "accordion" of sorts
codepen.io/moose62712/pen/MEqGxd

Collapse
snydez profile image
snydez

cool!
thank you for this tip

Collapse
joeberetta profile image
Joe Beretta

Thanx for all these tags) and personally, would be thankful if you'll tell more about

Collapse
isalevine profile image
Isa Levine

so handy--i'm diving into rails and catching up on html as i go, and this is super-helpful!

Collapse
roine profile image
Jon de M

Browser support next to each html element would be great

Collapse
treddson profile image
Taylor Short

Thanks for the article! Always important to be as semantic as possible

Collapse
ofirmeg profile image
Collapse
dylanesque profile image
Michael Caveney

So useful, I had no idea existed!

Collapse
lewiscowles1986 profile image
Lewis Cowles

Oh man... template, output and wbr. My new toys to play with

Collapse
yashkumartiwari profile image
yash kumar tiwari

No you not mentioned the other ones please refer this for more extra

thewebuniverse.blogspot.com/

Collapse
sesay profile image
sesay

amazed , with the break tag . and the progress tag ;)

Collapse
rifaimartin profile image
Rifai Martin

there are still many that I don't know about HTML :D hahaha

Collapse
aaronkrohn profile image
Aaron • Edited

Thanks for this. Didn't know wbr existed :)

Collapse
jin2 profile image
jay-j

Thx :) Output tag is awesome!

Collapse
mohdule profile image
Mohannad Salah

This is awesome
Thanks for sharing

I love how you included an image of the code for mobile users ❤️ (accessibility for everyone)

Collapse
pwnchaurasia profile image
Pawan Chaurasia

didn't knew html has some pretty cool stuff to. and most of them I never used.

Collapse
alicesos profile image
Alice-sos

Hi,

I hope to get your consent to translate and shared with Chinese developers, I will indicate the source and author.

Collapse
uddeshjain profile image
Uddesh

I will definitely try to use these tags next time, thanks for sharing.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
emmabostian profile image
Emma Bostian ✨ Author

Oh shoot.. I copied the wrong examples from my notes. I have updated them all and included a link to W3 schools in the intro :) Thanks!

Collapse
vladimir_dev profile image
vladimir.dev

Good stuff, thanks! 👍

Collapse
fborges42 profile image
Fábio Borges

Good job! I've used wbr a couple of months ago for the first time.
Looking forward to use the meter and progress.

Collapse
sbateswar profile image
Stanley Bateswar

Thank you Emma

Collapse
oneguycoding profile image
Steeve McCauley

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.

Collapse
pachicodes profile image
Pachi 🪐 (she/her/ela)

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.

Collapse
prince98215927 profile image
Prince

Thank you very interesting

Collapse
annalizasolivio profile image
Anna Liza Solivio

Nice article, I started using some of these, thanks for sharing Emma