HTML & CSS
Article

Do You Know These Eight HTML5 Tags?

By Simon Codrington

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.

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.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • redcrew

    Simon, thank you for the overview of the HTML tags; there are several tags I don’t use very often. I liked that you described not only the syntax, but included examples of their usage. The title says 8 HTML5 tags, but there’s only 6 tags described?

    • G. Hart

      See #4

    • simon codrington

      Howdy @redcrew:disqus .

      Thanks for reading my article.

      Basically inside of the 4th itemI put the Insertion, Deletion and Correction With , and elements. It makes more sense that they all sit in a related section.

      Thanks!

      • http://ubuntulinuxtipstricks.blogspot.com maco

        But then you put 2 tags into #3, making 9 tags total

  • Jean-Marc

    The “disabled” attribute in doesn’t do anything in Safari on iOS. I was still able to select an option in your demo. Same with the datalist.

    Great article otherwise!

    • simon codrington

      Thanks for that catch, I didn’t even notice. It seems to be a Safari specific thing where you can’t disable options at all.

      Thanks!

      • fredz117

        So, try walking your talk. Use the tags you were writing about! and make the catch work for everyone!

  • http://callmenick.com Nick Salloum

    A perfect use of `mark`, to me, seems like highlighting the queried keywords in a search results page. Neat article.

    • simon codrington

      Thanks mate glad you enjoyed the article :) Mark seems to be really great at highlighting areas of focus, especially in searches or context areas.

  • https://awontis.com/ Dan Awontis

    I liked that you used examples, so theory and practical part can meet while we are reading the article.

  • DanOwen

    Great. Thanks.

    • simon codrington

      No worries. Thanks for reading, Hopefully you found something useful :)

  • kiplog

    “The specification for the ‘small’ tag explains that this tag should be used to lower the importance of text or information.”

    While I like your interpretation of the small tag, the spec doesn’t appear to have any suggestion of using it to lower importance. I only mentions what you include about not using it to de-emphasize content that has been emphasized.

    This semantics stuff can really get way too subjective to argue about though.

    • Aurelio De Rosa

      Actually the explanation of the small tag here appears to be wrong. The specifications assert:

      “The small element does not “de-emphasize” or lower the importance of text”

      • simon codrington

        Hi there Aurelio. I double checked the spec just to be certain and the quote your referring to is in regards to elements that are already emphasised (like for example text that alwasy is wrapped inside an emphasis tag). The small tag won’t work on anything that already has emphasis.

        “The small element does not “de-emphasize” or lower the importance of text emphasized by the em element or marked as important with the strong element”

        https://www.w3.org/TR/html5/text-level-semantics.html#the-small-element

  • http://www.dfbgaming.com/ {dFb}eMac

    Yep! I’ve used them all. Good stuff.

    • simon codrington

      Thanks mate! Glad you enjoyed the article.

  • Dimitri De Vleeschauwer

    I don’t use these, but I use the oldskool div and span. Am I missing something? Why SHOULD I use these tags?

    • http://catplusplus.org.uk James

      apart from they might save you a tiny amount of CSS the main reason is that if your HTML content was being parsed by a third party reader, such as a web crawler, the tags have an additional meaning based on the role they play in the document, whereas span and div convey no meaning i.e. something is wrapped in because it’s less important, something has <cite> because it is a citation etc.

    • Jon Penland

      Semantics. Tags like , , , , etc have semantic meaning. Tags like and do not. It’s fine to use those when you’re grouping content purely for presentation purposes, but if you’re grouping content because it belongs together logically use a tag with semantic meaning. Web crawlers care about semantics, as do assistive technologies (screen readers, etc). And as the web continues to spill out of laptops and desktops and into wearables and other non-traditional devices the importance of using tags with semantic meaning will only grow.

    • simon codrington

      Hey there @dimitridevleeschauwer:disqus.

      I would say that you should use these tags only when they make sense to you.

      While most of them could be replaced with a span or div, if you use these you will give your page more semantic meaning. Basically helping the browser understand the meaning of these tags.

      Right now the browser lightly treats these elements, but there are multiple devices like screen-readers / assisted technologies that can use this semantic help to offer users a better experience (for example signifying when something is strong).

      Thanks again!

  • Ivar Tohvelmann

    This article seems to claim that gives all the valid options the same way a select or radio group. A more appropriate explanation would be that is a list of suggested values but does not restrict intput to anything else.

    • simon codrington

      Hi @ivartohvelmann:disqus good comment. Thanks for that.

      I could have been clearer that the datalist is literally just a ‘suggestion’ to the user on what to put and as long as it’s a valid type to match the field it all works.

      Thanks again!

  • Bruno Seixas

    Wasnt aware of some of the tags like mark or s, good stuff =)
    More point for SEO.

    • simon codrington

      Thanks for reading; Glad you found something useful :)

  • alexeiramone

    Datalist is Windows’ ComboBox and people wanted it since HTML 4 early drafts

  • http://alfy.me/ Ahmad Alfy

    Interesting for me was the q tag. No idea that it was inserting quotes automatically

    • brianary

      It can be inconsistent, or at least it used to be. Explicitly using the CSS “quote” property should make it reliable.

  • M S i N Lund

    I wonder if facebook will use these?

    Right now they use styled DIVs even for tags like .
    And that tag has been around for what, 25 years now?

    • simon codrington

      A good thought, but I think considering how huge they are, I can’t see them doing anything to rock the boat. Be great to see a better use of semantic tags from them :)

      • M S i N Lund

        They will probably just use DIVs, sprinkled with some broken buggy-ass javascript that emulates 10% of the original functionality.

        ….like they do now with text inputs =)

  • Tiago Celestino

    blockquote and q tags should be more use. Great article.

  • simon codrington

    Thanks @disqus_rtTWChycPR:disqus , glad you learnt something useful!

  • simon codrington

    Thanks for the feedback GreLI

    Using the ” tag with the ‘excludes tax’ example was meant to push your focus more on the price and less on the tax component (another example that might have been better would have been to use the small tag in a footer for legal information).

    In regards to the ‘‘ and ‘‘ tags, They are similar in that the del tag means the content is gone and was not replaced. The s tag is used for incorrect information which should be marked as inaccurate. This was one of the harder examples to illustrate clearly.

    Thanks again mate!

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.