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.
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:
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:
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:
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:
<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:
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
<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:
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:
<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:
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
dfnelement 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:
In this case, we’ve defined the term HTML, which is an acronym. So, we could enhance our markup further by writing:
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 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
Web & App Developer