10 HTML Tags You May Not Be Using

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 that represents a scalar measurement within a known range, or a fractional value.

Based on this element’s definition in the specification, 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:

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 . 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:

Or equivalently:

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 to specify the quote, and for the source. Note that until recently 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 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:

5. pre

The

 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:
1
2
3
4
5
6
7
8
9
<pre><code>
function sayHello(name) {
    for (var i = 0; i < 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  and . 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:
1
2
3
<samp><span>jdoe@mowmow:~$span> <kbd>ssh demo.example.comkbd>
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  element was only a presentational one, used to write words using a smaller font. In HTML5  has some semantic value. Now the  element represents text often found in small print like disclaimers, caveats, legal restrictions, or copyrights. An example of its use is shown below:
1
This article is offered to you by Aurelio De Rosa <small>Copyright © 2014small>
9. output
The 
 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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
);
_
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 , 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  tag, we can write:
1
<dfn>HTMLdfn> 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:
1
<dfn><abbr title="HyperText Markup Language">HTMLabbr>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 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).