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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • slsmag

    would love to see a real world example of using with CSS and/or javascript – say, to display the progress of an upload…

    • http://neonc0de.zz.mu/ Widy Graycloud

      yeah me too

    • Aurelio De Rosa

      Hi. the progress element has already a default style applied that you can easily see putting the example provided on a website like http://jsfiddle.net/

      About using JavaScript to change the value, something like document.getElementById(‘myProgress’).value = 0.7
      is sufficient.

  • mkeefecom

    Good list, examples would be 10x better though.

    • Aurelio De Rosa

      Hi. The article already has an example for each tag explained. What do you mean?

      • Nikolas

        I think he means about why you didn’t put REAL WORKING examples in this article. It’s kind a lazy to copy/paste examples to try it our self.

        • Aurelio De Rosa

          Well, I think those I provided are REAL examples. I’d use them in my website if they were a good fit for the situation. For example, take a look at the code of the output element, or the cite and q elements.

          The fact is that putting those code examples as a part of the markup of the page to show them “live”, would not cover all the cases. In fact, in this way you’re assuming the browser of the reader is able to display the elements which is not always the case (IE 8 and below are not capable of this). In addition, putting screenshots would not solve the problem because every browser has its own default style.

          • Nikolas

            C’mon, if we are reading this site, means that we are developers, and if we are developers, we are not using IE as main browser. And a little advise like “if you are using IE8 some examples will not work” will be helpful for those people (if exists).

          • http://danmathisen.com/ dmathisen

            Put a screenshot of what each looks like then. Now I either have to research 3rd parties to see what a meter element looks like, or I have to create a test html file to see. No one wants to do extra work when you can easily provide examples for us.

          • LouisLazaris

            Only two out of ten of these elements have any default styling that’s worth looking at. The other ones just have monospace font or small font, or no styling (like a “div”) which isn’t exactly visually ground-breaking.

            Also, it takes about three seconds to paste any of these examples into JS Bin or a similar app:

            http://jsbin.com/OPofiFed/1/edit?html,output

            :)

        • smumdax

          I agree with Nikolas. You’ve put the code, but you should have put “real” integrated example. It’s not a question of wether or not it would’ve work on everyone’s browsers… it would just make your article more complete. Simple as that. And with that, people might comment that this tag doesn’t work in this browser, or this other tag does this weird thing… You would be able to pull those helpful comments and update your article along the way, making it even more complete. It has nothing to do with coding. It has everything to do with the difference between writing a great article and a super-awesome-holy-article ;)

        • http://blog.brettski.com/ Brett Slaski

          How hard is it to put together a working example based on the basics provided here? I assume you know how to look up references for a tag’s functionality. The power of curiosity alone should have you scouring resources trying to figure out the ones which interest you the most. If you feel that the examples really add to this informative post, then post /your/ examples to share with others. Where has the motivation gone?

  • http://gadgeticworld.com/ Sandeep Panda

    Great work Aurelio.. :)

    • Aurelio De Rosa

      Thank you Sandeep.

  • Joakim Ottosson

    Thank you for a very good list!

    • Aurelio De Rosa

      Thank you very much Joakim. I’m glad you liked the article.

  • lukwe

    I think something is missing between (only scalars) and (very general) to express unit of measures in a proper, fully semantic way!

  • http://cerebrovasconcelos.tumblr.com/ Cerebro Vasconcelos

    I always used the small but without semantic goal

    • Aurelio De Rosa

      Hi Cerebro. Hopefully, after reading this article, you’re now aware of its new semantic meaning.

  • http://www.aljtmedia.com/ Lewis Theobald

    Brilliant article – some handy tips in there. One of the hardest adoptions I made 2 years ago moving to HTML5 was that of the tag. It felt so unnatural for it to only serve as a semantic property now. After all, small implies, it should be small. Sod the semantics on that one :-)

    • Aurelio De Rosa

      Hi Lewis. The fact that it has acquired a semantic meaning, doesn’t mean it’s now rendered as a normal text (ie same font size). In fact, most browsers (all?) render small tags with a smaller font size.

  • Mats Svensson

    Not one single example of anything at all on the entire page?

    What kind of half-assed lazy article is this?

    • Aurelio De Rosa

      What are you talking about? Each element has its example.

      • Andy Burne

        I think he means you show the code but not what it actually does. Would be nice to see it in action as it were.

    • LouisLazaris

      There are only two elements in this entire list that actually do anything. The article was more about semantics, and tag usage, not about visual display.

      Here is a JS Bin demo showing the meter and progress elements:

      http://jsbin.com/OPofiFed/1/edit?html,output

      Not really much to show there, other than the default way that the browser displays those elements. The only example in this article that could have used a demo was maybe the “output” element, which has some JavaScript. But this article isn’t really about JavaScript, so we didn’t think it was necessary.

      Like I said, it was all about the semantics, and tag usage, most of which don’t have much of anything to display by default.

  • http://jaf.ar.com/ Jafar

    People asking for examples are noobs.

    These are HTML Tags they have no visual ‘demo’ to them because they are markup tags. You have to add CSS to ‘SEE’ anything. Or javascript to make them ‘DO’ anything.

    Although browsers may have a default styling there is no reason to add examples because they would just be plain. WTF.

    Sheesh, talkin about lazy.

  • Nick Fletcher

    Awesome article man. I thought the examples were fine!

  • Aurelio De Rosa

    Hi Mihaela. The element has been removed in HTML5.

  • Guest

    dfn, cite, abbr,samp, kbd, etc tags are super bloody useless mate, vestiges of xhtml serve no useful value only to obsolete meta-text webcrawlers

    • buckthorn

      I disagree with you regarding the tag. I’ve heard from screen-reader users that the >abbr> tag is helpful to them, especially if it has a title attribute that expands the abbreviation. I think many developers have also used the tag for publication titles, although the correctness of this might be debatable.

  • http://mathiasbynens.be/ Mathias Bynens

    The <pre> example is incomplete: since you’re marking up code, you need to wrap the inner contents in <code> as well.

    • Aurelio De Rosa

      Hi Mathias. You’re right, I’ll fix it. Thank you for taking the time to comment.

      • http://mathiasbynens.be/ Mathias Bynens

        An example of using <pre> without <code> would be to mark up a poem for which the white space and formatting is important.

        • Aurelio De Rosa

          I always thought that was the role of :D

    • LouisLazaris

      @mathiasbynens:disqus

      Hey, Mathias, thanks for the heads-up on that. I think most people do it that way and I will make the change, but there is nothing that I can see in the spec that requires that. Both the W3C and the WHATWG spec say the following:

      “To represent a block of computer code, the pre element can be used with a code element.”

      So I don’t think it’s a hard-and-fast rule, but yeah, it’s probably better with those. Thanks for pointing that out.

  • Dean Hamack

    Thanks. I was curious how those meter examples would render. You saved me some time.

  • Aurelio De Rosa

    In fact I didn’t assert it.

  • Peter Herdenborg

    You say that ‘s main attribute is “for”, containing a space separated list of ids, yet the tag has not such attribute in your example. Otherwise, thanks for an interesting read.

    • Peter Herdenborg

      Hilarious that Disqus auto closes tags you put in comments, even though they are escaped, as you obviously can’t post arbitrary HTML.

    • Aurelio De Rosa

      Good catch! I’m going to fix it now.

  • AreaMan

    “HTML” is not an acronym. “HTML” is an abbreviation, or perhaps an initialism.

    “RADAR”, “NATO”, and “LASER” are acronyms. That is, they are abbreviations pronounced as if they were words.

    • LouisLazaris

      Ah, good catch. I’ll correct that wording, thanks!

    • Mr B

      HTML *IS* an acronym for Hypertext Markup Language. Geez, research before making stupid comments like that.

    • thisispete

      in other words not all abbreviations are acronyms but all acronyms are abbreviations.
      HTML is another type of abbreviation called an initialism, like FBI, DVD, etc where you pronounce each letter individually.

  • Ray Pittman

    Thanks for that. I always wonder why THEY don’t show the results of what they’re talking about, either as an image or as coded. Appreciate the effort.

  • RidleyO

    Thanks Aurelio – interesting read.

    It would be nice to have these set up on one or more sample output pages to see them “live” – or did I miss a link to this – will rescan the page

  • http://www.matthewsetter.com/ Matthew Setter

    Hey Aurelio, thanks for the write up. I’ve been, recently, looking for ways to improve my writing and this is it! What a great set of tags to use, which convey the correct semantic meaning.

    • Aurelio De Rosa

      Thank you Matthew