Do You Know These Eight HTML5 Tags?

As a web developer, you will probably take advantage of a whole range of different tags when putting together your next site build. Chances are high that you are already well versed in some of the commonly known tags introduced in HTML5 such as <article>, <header> and <footer>, however you might not be aware of some of the lesser known / edge case tags you could be taking advantage of.

Some of these tags are either brand new in HTML5 or have been repurposed from the HTML4 specification. Tags repurposed from HTML4 may look familiar, however they have been given new meanings and have had changes in how they should be used.

For each tag, we will go through what the W3C specification says and apply a practical example to showcase how you might use it. Let’s roll!

A Quick Word on Interpretation

While the W3C specifications are great for conceptual overviews, sometimes they lack practical examples, which makes it challenging when searching for the best way to use some of these tags.

You might have used some of these tags before — perhaps just not in the same way. There often are no hard and fast rules about what is considered good practice. The following are some examples of how I recommend treating and using these lesser known elements.

Key Takeaways

• Utilize the `` tag to highlight text that is relevant to the current user activity, enhancing visibility and focus on specific parts of a webpage.
• Employ the `` tag to denote text of lower importance, which helps in reducing the visual impact of less critical information on your web pages.
• Use `` for short inline quotations and `

  ` for longer excerpts, ensuring semantic accuracy and enhancing the readability of quoted text.

• Implement ``, ``, and `` tags for marking additions, deletions, and corrections in text, which is especially useful in editing or version control scenarios.
• Organize multiple options within a `` dropdown using `` to categorize and simplify user choices, improving form navigation and user experience.

1 – Contextual Highlighting With <mark>

The specification for the <mark> tag says that this tag should be used to denote “relevance” or “scrutiny”.

“Relevance’ is hard to describe. Elements and text are relevant when we are performing an activity and they are useful to us at that moment (or could be useful in the future).

For example, if you searched a site with the keyword “jQuery” and several articles showed up, you could wrap the resulting matches inside the <mark> tag. The purpose of the mark tag is to say to the browser “hey, this thing right here is relevant to what you are doing”.

Practical Examples

We can use the mark tag for highlighting content that is relevant. To illustrate, consider the following scenario:

We are on a page called “Cheapest Holiday Packages” and it shows us a grid of holiday packages sorted by price range. It starts off from the cheapest at the top to the most expensive at the bottom.

For the top level holidays, the price itself could be highlighted with the <mark> tag because we have come to this page for cheap holiday deals and these are the cheapest the page has to offer — they are the most relevant.

<section class="deal-list">
  <article>
    <h2>Vanuatu Cruise</h2>
    <p><mark>$499</mark>- 5 Nights</p>
    <p>A relaxing cruise around the southern most 
    parts of Vanuatu</p>
  </article>
  <article>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>$649</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet and 
    entertainment</p>
  </article>
  <article>
    <h2>Pacific Island Hiking</h2>
    <p>$1199 - 5 Nights</p>
    <p>Hike your way though several pacific islands 
    on this exercise focused holiday</p>
  </article>
</section>

See the Pen Mark Tag Example by SitePoint (@SitePoint) on CodePen.

For the first two results, the price (which is what we are focused on) is wrapped within the <mark> tag. However the third result — which is much more expensive — isn’t marked as it isn’t as relevant as the others.

Best Practices and Considerations

While people generally associate this tag with a quick way to style something, that isn’t correct. It should not be used just for styling purposes, you should be another element like a <span> for that.

Do not use this tag to denote textual importance or to highlight strength — that is what the <strong> tag should be used for. Use <mark> when you want to pinpoint something of relevance to the current user.

As a side note for accessibility, mark highlights are shown by the browser when using Windows High Contrast mode, so it works well in that regard too.

2 – Lower Importance With <small>

You have probably used the <small> tag before. It does exactly what you think it would do, which is make your text smaller. While browsers might make your text smaller, that is actually a byproduct of using the small tag, rather than its semantic meaning.

The specification for the <small> tag explains that this tag should be used to lower the importance of text or information. Browsers interpret this by making the font smaller so it has less visible impact.

This tag should be used to denote low importance when it comes to content or information. Information of low importance is generally used in the footer of a website or in a sidebar (away from the main content of the page).

Practical Examples

Overall your usage of the <small> tag should say to the browser — “This content right here isn’t really important in the grand scheme of things”. For example, in the footer you could use this for your legal attribution and copyright:

<footer>
  <small>
    Designed and developed by Simon Codrington.
  </small>
  <small>
    &copy; 2016 My Company - All rights reserved
  </small>
</footer>

You can even use the <small> tag inside regular content to denote that the content is not as important as the content surrounding it. For example, in a product listing you could include the legal disclaimer “Excludes tax” near the price of a product as follows:

<section>
  <article>
    <h3>Woolen Llama Print Jumper</h3>
    <em>$65.99</em><small> - Excludes tax</small>
    <p>
      A warm, woolly jumper made from 100% llamas.
      You will love the warmth.
    </p>
    <button>Add to cart</button>
  </article>
</section>

See the Pen Small Tag Example by SitePoint (@SitePoint) on CodePen.

Overall if you want to make something have a perceived lower importance use <small>. Don’t just use it to control the size of elements.

Best Practices and Considerations

You cannot lower the importance or emphasis of content that has been affected by the <strong> or <em> tags. Styling the <small> tag might affect its visual look (depending on the browser), but it will not affect its semantics.

3 – Quotations With <q> and <blockquote>

While you might use a styled <div> or <span> to enclose your quotes, a better way is to use either the <q> or <blockquote> tags. Both of these are meant to be used for external quotations (when you are quoting something), but they differ in how you should use them.

According the spec, the <q> tag should be used to define a “short inline quotation” of text.

The <blockquote> tag on the other hand should be used for large spans of text.

In practice, you should be using the <q> tag for smaller quotes and using <blockquote> for everything else. Keep in mind that these are for quotes or resources only, they should not be used just for stylistic purposes (use spans for that).

Practical Examples

Lets look at how we can use both of these tags.

If you have a small quote, use <q>:

<div class="big-banner">
  <h2>Try our latest sandwich!</h2>
  <p>Come and try our latest, biggest and tastiest
  sandwich. John Smith told us <q>he hasn't eaten 
  anything as good in his whole life!</q></p>
</div>

If you have a longer quote, or something more complex you can wrap it inside <blockquote>

<div class="motivational-quote">
  <blockquote 
    cite="http://bit.ly/1pbvjsL">
      Infuse your life with action.
      Don't wait for it to happen.
      Make it happen. Make your own
      future. Make your own hope.
      Make your own love. And
      whatever your beliefs, honor 
      your creator, not by passively 
      waiting for grace to come down 
      from upon high, but by doing 
      what you can to make grace 
      happen... yourself, right now,
      right down here on Earth.
    <cite>Bradley Whitford - Author</cite>
  </blockquote>
</div>

For the above example we’ve wrapped a long quote withing the <blockquote> tag and supplied both the cite attribute (the link to the resource) and the <cite> tag (explaining what this resource is).

Best Practices and Considerations

Both of these quote elements can support the cite attribute and the cite element.

The cite attribute specifies the URL of the related resource itself (e.g. a link to the website where this quote came from). The cite tag should be used to specify the title of the work. There is some debate as to how the cite attribute and the <cite> tag should be used but overall I’ve always found using them like this works just fine.

4 – Insertion, Deletion and Correction With <ins>, <del> and <s>

The <ins>, <del> and <s> tags are useful when you are using dealing with content that has been changed or whose relevance has been updated.

The <ins> tag defines text that has been recently added to a document — it represents new content. You would use this tag to mark text that has been added or whose relevance has been updated within your content.

The <del> tag defines text that has been removed from the document, it represents deleted content. Even though it signifies deleted content, it still physically exists in the document as a record of what has been removed.

These two tags support two optional attributes — the cite attribute for linking to a resource that explains this change and also the datetime attribute for when this occurred. The datetime must be a valid datetime string which unfortunately isn’t very easy to understand. You can cheat and use a timestamp generator if you’re in a rush.

These attributes are useful for when you want to provide context to your additions or deletions. You might see this within update logs and revision lists where an author lists all of their changes and provides details as to why these changes happened.

The <s> tag is similar but instead defines text that is no longer correct. This is used to signify to the browser that the wrapped text is not relevant anymore and is usually followed by its replacement text (for example, new content wrapped inside the <ins> tag). This tag often renders as strike-through text to show that it’s no longer relevant. You should not use this just for stylistic purposes though (you can do this easily enough with <span> instead).

Practical Examples

Imagine that you have a list of changes to a plugin you are developing. On your release log page you could outline your latest updates using the <ins> tag and attributes.

<h2>Latest Changes</h2>
<p>Outlined below are the latest changes</p>
<h3>Version 1.X branch</h3>
<ins 
  cite="http://www.johnsmithsblog/changes/1-0-1.html" 
  timestamp="2012-08-09T15:15:00+00:00">
    Version 1.0.1 - August 2012
</ins>
<br/>
<ins 
  cite="http://www.johnsmithsblog/changes/1-0-2.html" 
  timestamp="2012-11-15T06:15:00+00:00">
    Version 1.0.2 - November 2012
</ins>
<br/>
<h3>Version 2.X branch</h3>
<ins 
  cite="http://www.johnsmithsblog/changes/2-0-0.html" 
  timestamp="2013-01-17T02:50:00+00:00">
    Version 2.0.0 - January 2013
</ins>
<br/>

Another example that showcases how you can use the <del> tag is inside a note taking app. This tag should be used when content no longer exists at all (and isn’t being replaced).

<ul class="to-do-list">
  <li>
    <del datetime="2015-12-03T13:21:32+00:00">
      Pick up the groceries
    </del>
  </li>
  <li>
    <del datetime="2015-12-03T15:15:00+00:00">
      Collect the kids from school
    </del>
  </li>
  <li>
    Cook dinner
  </li>
  <li>
    Work on fancy side projects
  </li>
</ul>

See the Pen Del Tag Example by SitePoint (@SitePoint) on CodePen.

You can see that two of our tasks have been completed so they have been wrapped with the <del> tag. This shows to the user (and the browser) that the content no longer exists. We supplied both with the datetime attribute as it is actually a handy piece of data to keep considering we are tracking task completion.

The <s> tag is best used for when content has been removed and then updated, for example when correcting documents:

<article class="news-item">
  <h1>WordPress 4.4 Updates</h1>
  <section class="summary" aria-label="Summary">
    WordPress 4.4 (code-named 
      <s cite="https://codex.wordpress.org/Version_4.4">
        Bobby Brown
      </s> Clifford Brown) was released 
      to the public on the 8th of December 2015.
  </section>
  <section class="main-content" aria-label="Main Content">
    <p>There were several changes in V4.4 
    including the following</p>
    <ul>
      <li>
        New default theme - 
        <s>Twenty Fifteen</s> 
        Twenty Sixteen
      </li>
      <li>
        Responsive image support (image elements 
        in the content now support display based 
        rendering)
      </li>
      <li>
        Additional embed object support such as 
        Cloudup, Reddit Comments etc
      </li>
    </ul>
  </section>
</article>

See the Pen S Tag Example by SitePoint (@SitePoint) on CodePen.

In the above example, we have corrected several pieces of information, citing a reference URL inside our <s> tag where possible.

5 – Organising Options With <optgroup>

This tag is one of the oldest, but oddly enough it’s still overlooked by developers.

The <optgroup> tag is used within the <select> form control tag to help categorize the various <options> elements.

If you have dozens (or hundreds) of options inside your select field, having the ability to categorize them into a local format is really handy.

The <optgroup> tag must be inside the <select> element and contains two attributes — label, which acts as the visible label seen when the list is opened and disabled which when used ensures none of the options inside of it can be selected.

The optgroup itself can’t be selected and can’t be styled (at least not in any cross browser compatible way).

Practical Example

The <optgroup> element works great in any situation when you’re using the <select> tag. For example consider a dropdown list of computer price ranges on an e-commerce site.

<label for="comp-price-filter">
  Select the price range of your next computer
</label>
<select 
  class="price-filter" 
  name="comp-price-filter" 
  id="comp-price-filter">
  <optgroup label="Low End">
    <option value="100-300">$100 - $300</option>
    <option value="301-500">$301 - $500</option>
    <option value="501-700">$501 - $700</option>
  </optgroup>
  <optgroup label="Middle Range">
    <option value="701-1200">$701 - $1200</option>
    <option value="1201-1600">$1201 - $1600</option>
  </optgroup>
  <optgroup label="High End">
    <option value="1600-2500">$1600 - $2500</option>
    <option value="2501-3200">$2501 - $3200</option>
  </optgroup>
</select>

See the Pen pyzgJG by SitePoint (@SitePoint) on CodePen.

Here’s an example where you can use the disabled attribute to disallow a range of options (though there’s nothing really stopping people from just removing this attribute from the <optgroup> so don’t rely on it for validation).

In the below example, you shouldn’t be able to select anything within the ‘West Coast – Australia’ optgroup.

<label for="vacation-dest">Vacation Destinations</label>
<select name="vaction-dest" id="vacation-dest">
  <optgroup label="East Coast - Australia">
    <option value="NSW">
      New South Wales
    </option>
    <option value="QLD">
      Queensland
    </option>
    <option value="TAS">
      Tasmania
    </option>
    <option value="ACT">
      Australian Capital Territory
    </option>
    <option value="VIC">
      Victoria
    </option>
  </optgroup>
  <optgroup disabled label="West Coast - Australia">
    <option value="WA">
      Western Australia
    </option>
    <option value="NT">
      Northern Territory
    </option>
    <option value="SA">
      South Australia
    </option>
  </optgroup>
</select>

See the Pen Optgroup Tag Example 2 by SitePoint (@SitePoint) on CodePen.

6 – Predefined Options With <datalist>

One of the great things about the <select> element, along with the radio / checkbox input types is that it restricts your users to a set of predefined choices.

You can now use the <datalist> element to define the list of valid choices for your various <input> tags. This component is slightly different on various browsers, but the common way it works is by showing a small drop-down arrow to the right of the field indicating that this field has options. When selected usually the options will fold down and show themselves. The user can start typing and the options will highlight if they partially match (for example, writing “Chr” inside a field that has “Chrome” as an option will narrow down the option list to show it).

This element is still emerging but overall it works well.

Practical Examples

If you wanted to provide a list of URL’s that the user could select from, you could create a <datalist> and connect it to your <input> as follows.

<label for="favourite-sites">
  Select your favorite website!
</label>
<input 
  type="url" 
  name="favourite-sites" 
  id="favourite-sites" 
  list="site-list"/>
<datalist id="site-list">
  <option value="http://www.google.com.au">
  <option value="http://www.reddit.com">
  <option value="http://www.sitepoint.com">
</datalist>

This will let you constrict your inputs to just a few values.

See the Pen Datalist Tag Example by SitePoint (@SitePoint) on CodePen.

Notes and Considerations

The datalist itself will perform validation based on the type attribute for the <input> element. For example, if you have chosen to use type="email" and then supply a <datalist> element to it, the options inside this list must conform to inputs of type “email”. It has a level of smart processing that should make it easier for you to control values automatically.

The <datalist> tag is fairly well supported, however Apple have decided not to support this element at all (on both desktop and on iOS). Microsoft supports this from IE10 onwards (with no support on mobile IE). When support isn’t available the <input> element should fall back to its normal input mode.

One word of warning — This component can be a bit buggy. For example, if you mark the input as required and do not enter a value, the form will stop any processing until you select a value (just as you expect). However, if you manually type in a value (even if it isn’t correct) and press submit this won’t trigger an error — nothing will happen (it does not flag an error as you may expect it to).

Wrapping It All Up!

Hopefully you’ve picked up a useful element or two from this article and going forward you can use them in your upcoming sites!

Overall, a lot of the semantics of using these elements are very much up in the air. Some groups will insist that you need to use X element in Z ways for it to be the ‘right way’. Several of these elements are still evolving and will require you to interpret how best to use them.

We’re always keen on input, so if you know of any infrequently used helpful tags we’d be keen to hear how you’ve used them.

Frequently Asked Questions (FAQs) about HTML5 Tags