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.
[code language="html"]
<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>
[/code]
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:
[code language="html"]
<footer>
<small>
Designed and developed by Simon Codrington.
</small>
<small>
© 2016 My Company - All rights reserved
</small>
</footer>
[/code]
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:
[code language="html"]
<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>
[/code]
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>:
[code language="html"]
<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>
[/code]
If you have a longer quote, or something more complex you can wrap it inside <blockquote>
[code language="html"]
<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>
[/code]
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).
Continue reading %Do You Know These Eight HTML5 Tags?%
by Simon Codrington via SitePoint
