3 Useful HTML Tags You Might Not Know Even Existed

Front-end developers have to be closely familiar with HTML tags since this is their natural environment on a daily basis. I bet all of you know some basic tags such as <header>, <section>, <footer> and so on. But, for example, did you know that you can suggest a word-break moment using just HTML, without CSS?

WBR

Let’s assume you’re working on some website or app for a German client. As you know, German words can be reeeaally long. So you have the design with some text content you have to reproduce in code and this content has to break in very specific moments. Here comes the <wbr> tag to help you.

Geburtstagskuchen

That’s it! With such a simple tag, you can manipulate text contents as you wish.

But what about browser support? Well, it’s pretty good, to be honest. Most browsers will understand this tag, but Opera on Android and Safari on iOS might have problems.

METER

Imagine you’re building a disk storage manager app. You need to somehow show in UI how much storage is still available, and you really want to make it as accessible as possible. This is just a perfect use-case for the <meter> tag. It’ll just you only the value within a defined range. Another cool thing about this tag are its attributes:

• low → when the current value is lower than the set low value, the meter’s bar will become red;
• optimum → when the current values is higher than optimum attribute value, the meter’s bar will become green;
• high → when high value is lower than maximum and higher than optimum value, the meter’s bar will be orange. Otherwise, it’ll be green.

You might also know a similar tag, which is progress. So, what’s actually the difference between them? The progress tag should be used for ongoing tasks. In other words, use the progress tag when you deal with a specific task. With the meter tag, it should be used to show disk or memory usage. Another difference is that the meter tag isn’t supported by IE and that it is actually the only disadvantage of this tag.

DEL and INS

Have you ever wondered how to build an accessible indicator of deleted and added parts of content (diff in GitHub or email notifications from Jira when the ticket has been updated)? You just need to wrap the deleted content with the<del>tag. For example: <del><p>Just deleted content</p></del>. To show just the added part of the content, you can use the<ins> tag in exactly the same way. This tag offers also two attributes:

• cite → uri of a resource that explains why this part has been added;
• datetime → data and time of the change.

There are, of course, much more useful tags in HTML . I highly recommend using all of them when it’s possible and appropriate. Your clients and app users will thank you for such an approach. Be careful though, because some tags might be deprecated. You can always make sure that a less common tag you want to use is still valid and has good support in MDN documentation.