10 HTML Tags You May Not Be Using

Share this article

As a front-end developer you no doubt use HTML constantly and probably feel it doesn’t have any more unknowns. Nevertheless, the way it has evolved (in particular with the advent of HTML5) may surprise you at times. In this article, I’ll show you 10 HTML tags you may not be using or maybe even aren’t yet aware of that help to increase the semantics and maintainability of your web pages.

1. <meter>

At some point we may need to express a measure on a web page. It could be anything from the result of an exam to disk usage. HTML5 introduced a new element called <meter> that represents a scalar measurement within a known range, or a fractional value.

Based on this element’s definition in the specification, <meter> is not good to measure something like external temperature — because it doesn’t have a fixed range (you can define, it but it’s arbitrary). This element has several attributes. The most common ones are: value, min, and max. The first is used to indicate the measure, while the other two are used to specify the range. So, if you want to indicate that a hard disk of 500Gb has 300Gb occupied, you can write:

<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.

2. <progress>

From time immemorial, developers have created widgets to notify users of the progress of a download or task. Today there’s a native HTML5 tag for this called <progress>. It has two attributes: value (to specify the state of the progress) and max (to indicate the maximum value to reach). If the max value isn’t set, a range of 0-1 is assumed and value can be any float within this range. So, to show a progress bar for a task completed at 50% you can write:

<progress value="50" max="100">50%</progress>

Or equivalently:

<progress value="0.5">50%</progress>

The text inside the element is used as a fallback for older browsers. Generally, this element would not be used statically, but rather would be used in conjunction with JavaScript or CSS animations to indicate continuous progress.

3. & 4. <cite> and <q>

When writing, we often find ourselves quoting a book, an article, or person. On paper we usually use double quotes (“…”) to delimit the quote portion, along with the prepositions from or by to specify who we’re citing or from what source.

In HTML5 we have <q> to specify the quote, and <cite> for the source. Note that until recently <cite> could be used only to indicate a work’s title (book, article, film, etc.), not a person. However, this has been updated so that we can use it for ‘citing’ people too. The <q> tag has an attribute called cite that allows us to indicate the link to the source of the quotation.

Now for an example, let’s say that we want to cite a famous quote from Ezra Pound (my favourite quote). Using HTML, we would write:

We should fight for our rights because, as <cite>Ezra Pound</cite> said,
<q>If a man isn't willing to take some risk for his opinions, either his 
opinions are no good or he's no good.</q>

5. <pre>

The <pre> element allows us to show preformatted text as it appears in the source. What this means is that multiple whitespace characters won’t be collapsed into one (changing the default manner that browsers handle whitespace). This tag is ideal when you need to show a snippet of code because it helps preserve indentation. For example, in a page we may have something like this:

<pre><code>
function sayHello(name) {
    for (var i = 0; i &lt; 3; i++) {
        console.log('Hi ' + name + '!');
    }
}

sayHello('Aurelio');
</code></pre>

6. & 7. <kbd> and <samp>

If you’re a tech writer, you might often discuss tools and techniques that require the use of terminal or shell commands. So, chances are that you also want to show the result of these commands. This situation is the perfect fit for <kbd> and <samp>. The former represents a user input such as but not restricted to keyboard input. The latter represents a sample of the output of a program or a computing system. These elements works well with the previously presented pre element. An example of the use of these elements, similar to an example used in the spec, is the following:

<samp><span>jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
<span class="prompt">jdoe@demo:~$</span> _</samp>

8. <small>

Before HTML5, the <small> element was only a presentational one, used to write words using a smaller font. In HTML5 <small> has some semantic value. Now the <small> element represents text often found in small print like disclaimers, caveats, legal restrictions, or copyrights. An example of its use is shown below:

This article is offered to you by Aurelio De Rosa <small>Copyright © 2014</small>

9. <output>

The <output> tag represents the result of a calculation. Its main attribute is for, which contains a list of space-separated IDs of the elements that went into the calculation, or that otherwise influenced the calculation. This element is exactly what you need if you have a website that offers something like automobile pricing or life insurance quotes.

To see it in action, imagine there’s a widget on your company’s website where users can specify the amount to invest in your company in exchange for a certain percentage in return every year. Based on this situation, you may have a form, using the output element as shown below:

<form id="form-calculation">
   
  <label for="amount">Amount:</label> <input id="amount" type="number"/>
  <label for="percentage">Percentage:</label>
  <input id="percentage" type="number">

  <label for="years">Years:</label>
  <input id="years" type="number">

  <input type="submit" value="Submit">

  <label for="total">Total:</label>
  <output id="total" for="amount percentage years"></output>
</form>
<script>
function calculateTotal(amount, percentage, years) {
   for(var i = 0; i < years; i++) {
      amount += amount * percentage / 100;
   }

   return amount;
}
document.getElementById('form-calculation').addEventListener('submit', function(event) {
      event.preventDefault();

      document.getElementById('total').textContent = calculateTotal(
         Number(document.getElementById('amount').value),
         Number(document.getElementById('percentage').value),
         Number(document.getElementById('years').value)
      );
   },
   false
);
</script>

10. <dfn> (The icing on the cake)

Before talking about this element, I want to confess something. When I decided to write this article, I started thinking about what tags to include. When I arrived at the 9th tag in my list, I thought it would have been nice to add something special as a conclusion. So, I decided to scan the list of HTML5 tags and here is my reaction.

Now that you know how I stumbled upon <dfn>, we can move on and describe this tag. The dfn element allows us to define a term. In its simplest form, it contains the term you want to define, and then wrap it with a paragraph, a description list group, or a section containing the definition. To understand the concept, let’s say that we’re writing a page where we’re describing HTML, and we want to define it. To do that using the <dfn> tag, we can write:

<dfn>HTML</dfn> is the primary language for marking up web content.

In this case, we’ve defined the term HTML, which is an abbreviation. So, we could enhance our markup further by writing:

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the primary language for marking up web content.

To choose what is the term defined, the standard specifies a priority list made of 3 points. The priority goes to anything specified in the title attribute of the <dfn>tag. Then, we have whatever is defined in an abbr element child of dfn (as shown in the second example). The last priority goes to the text of the dfn element (as shown in the first example).

In Conclusion

In this article we’ve discussed a number of HTML tags that are less used, and often forgotten. I suggest you read the complete list of HTML tags available from time to time. In this way you’ll refresh your knowledge of semantic elements, and maybe you’ll find a surprise along the way (as I did with the <dfn> tag).

Frequently Asked Questions (FAQs) about HTML Tags

What are some of the most commonly deprecated HTML tags?

Deprecated HTML tags are those that have been phased out of use in favor of more modern and efficient alternatives. Some of the most commonly deprecated tags include

, , , , and . These tags are no longer recommended for use in HTML5, the latest version of HTML, because they do not adhere to the principle of separation of concerns, which states that HTML should be used for structure, CSS for presentation, and JavaScript for behavior.

Why should I avoid using deprecated HTML tags?

Using deprecated HTML tags can lead to several issues. Firstly, these tags may not be supported by all browsers, especially newer ones, leading to inconsistent rendering of your webpage. Secondly, deprecated tags often lack the flexibility and functionality provided by their modern counterparts. Lastly, using deprecated tags can make your code harder to maintain and update in the future.

What are some alternatives to deprecated HTML tags?

HTML5 provides several alternatives to deprecated tags. For instance, instead of using the

tag to center content, you can use CSS properties like text-align or margin. Similarly, the tag can be replaced with CSS properties like font-size, font-family, and color. The and tags can be replaced with the CSS properties text-decoration-line: line-through and text-decoration-line: underline, respectively.

Are there any HTML tags that are completely useless?

The term “useless” is subjective and depends on the specific needs of your project. However, some tags like , ,

, , , and are considered outdated and unnecessary in modern web development because their functionalities can be achieved more efficiently with CSS.

What is the difference between deprecated and obsolete HTML tags?

Deprecated tags are those that are discouraged from being used because they have been replaced with better alternatives, but they still function in browsers. On the other hand, obsolete tags are those that have been completely removed from the HTML specification and may not function in browsers.

How can I check if an HTML tag is deprecated or not?

You can refer to the official HTML5 specification provided by the World Wide Web Consortium (W3C). This document lists all the current HTML tags and their statuses. Alternatively, you can use online resources like MDN Web Docs, which provide up-to-date information about HTML tags.

What happens if I continue to use deprecated HTML tags?

If you continue to use deprecated HTML tags, your webpage may not render correctly in all browsers, especially newer ones. This can lead to a poor user experience. Additionally, your code may become harder to maintain and update in the future.

Can I use HTML5 and deprecated HTML tags together?

While it’s technically possible to use HTML5 and deprecated HTML tags together, it’s not recommended. Mixing modern and deprecated code can lead to inconsistencies and make your code harder to maintain. It’s best to stick to the current HTML5 standards for the most efficient and future-proof code.

Are there any tools to help me update my deprecated HTML tags?

Yes, there are several tools available that can help you update your deprecated HTML tags. For instance, HTML Tidy is a utility that can help you clean up your HTML code and replace deprecated tags with their modern counterparts.

How can I learn more about HTML5 and its new tags?

There are many resources available to learn about HTML5 and its new tags. Websites like MDN Web Docs, W3Schools, and SitePoint offer comprehensive tutorials and guides. Additionally, there are many online courses available on platforms like Coursera, Udemy, and Codecademy.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

htmlsemantic markuptags
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week