Go to content
The Codest
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2022-10-04
Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Jacek Ludzik

Product Designer

3 Useful HTML Tags You Might Not Know Even Existed - Image

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for developers that work on increasing DX, but more importantly for end users. One of those a11y parts in HTML are semantic tags and that's what I'd like to cover here.

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.

<p>Geburtstags<wbr>kuchen</p>

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.

wbr compability table

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.

meter compability meter

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.

ins compability table

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.

/images/uploaded/interested_in_cooperation_.png)

Related articles

Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

4 Common Web Accessibility Issues to Know

The web is used by millions of different people everyday, one of our main goals as developers is to make the web accessible for everyone. This article will introduce some common web accessibility issues and ways to solve them.

Reda Salmi
Software Development

Hiring Developers Internally or Externally

Hiring internally or externally? It's an ultimate dilemma! Find out advantages of outsourcing or building an in-house team in the following article.

Grzegorz Rozmus
Software Development

Javascript Tools in Action

Discover some retrieving JavaScript tools to level up your programming game. Learn more about ESLint, Prettier and Husky!

Reda Salmi
Software Development

Learn More about Ruby on Rails with Pub/Sub

Pub/Sub can bring many benefits to the project – it can make the code clean, decouple services and make them easily scalable. Learn more about Pub/Sub in the following article and level up your project!

Michal Pawlak

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

Tech company specializing in scaling tech teams for clients and partners thanks to top-class development engineers.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.