HTML5 tags: new and recycled

With HTML5, we see the introduction of a number of new tags to use in our documents, as well as explore different ways to use tags we are already familiar with. This post will look at the new, as well as the recycled.

Recycled tags

In HTML5, we see some familiar tags, but used in a different way to how they were originally intended. The following tags were originally designed for aesthetic purposes, but have been repurposed to fit the semantic aim of HTML5.

<small> tag

The <small> tag used to be used to decrease the size of text in pre-CSS days. In HTML5, it should be used for small print; for example, legal text or terms and conditions.

Markup:

<small>Insert text here</small>

<b> tag

The <b> (bold) tag was originally used to increase the weight of text. It should now be used to highlight text that is styled differently to the main body of text, but has no extra importance.

Markup:

<b>Insert text here</b>

The <strong> tag should instead be used to mark up text that has extra importance.

Markup:

<strong>Insert text here</strong>

These two examples may look identical, but the aim of the tags is to provide more semantics to a document, so they have different practical uses.

<i> tag

The <i> (italic) tag was originally used to make text italic. In HTML5, it should be used to mark up text that has “an alternate voice or mood”.

Markup:

<i>Insert text here</i>

To add emphasis to a piece of text, the <em> tag should be used instead.

Markup:

<em>Insert text here</em>

Again, these two examples may look identical, but they have different semantic uses, not stylistic ones.

<cite> tag

The <cite> (citation) tag has changed slightly; before, it was used to reference other sources, be that a person or another piece of work. In HTML5, it should only be used to reference the title of a work, not to reference people’s names.

Markup:

<cite>Insert text here</cite>

<a> tag

The <a> (link) tag hasn’t changed its function, but now we can place multiple elements within the tag, and they will all link to the source. We have always been able to do this in practice, but it hasn’t been valid. In HTML5 it is valid.

Markup:

<a href="linklocation">
	<p>This paragraph text links to the location</p>
	<img src="imagelocation.jpg" alt="This image also links to the location" />
</a>

New tags

Text-level elements

The elements listed below are elements which can be used inline on parts of text.

<mark> tag

This should be used to highlight the search term in a search result. It doesn’t add any importance to the word or phrase, just highlights it for the purpose of the search.

Markup:

<mark>Search term</mark>

<time> tag

The <time> tag can be used to mark up dates and times.

Markup:

Time

<time datetime="09:00">9am</time>

Date

<time datetime="1984-03-16">16th March 1984</time>

Time and date

<time datetime="1984-03-16T09:00">9am on 16th March 1984</time>

No ‘datetime’ attribute; the value must be placed within the tags

<time>1984-03-16</time>

Sectioning content elements

HTML5 does away with the need to use divs for everything, and provides us with some semantic structural elements to use.

<section>

The <section> tag is used to group together related content. A section tag can (and should) contain <header> and <footer> elements if they are needed.

Markup:

<section>
	<header>Insert header content here.</header>
    	<p>Insert main content here.</p>
    	<footer>Insert footer content here.</footer>
</section>

<header>

The <header> is a place to put introductory elements for a page or section, e.g. title and main navigation. In HTML5, a page can have multiple header elements.

Markup:

<header>Insert header content here.</header>

<nav>

The <nav> tag was created as a container for navigation elements. The element can be placed within the header if needed, which is where I would usually put it. A list can then be added inside the element to display the links.

Markup:

<nav>
	<ul>
        	<li><a href="#">Link 1</a></li>
        	<li><a href="#">Link 2</a></li>
        	<li><a href="#">Link 3</a></li>
    	</ul>
</nav>

<footer>

The <footer> element, like the header, can be used for the entire HTML document and also within a section. It should contain information about its containing element, so for a page footer it would contain copyright information etc. and within a section, it could have additional information about the section content.

Markup:

<footer>Insert footer content here.</footer>

<aside>

The <aside> element should contain information that relates to the main content (for example, pullquotes) but is separate. If it is removed, it shouldn’t detriment the rest of the page.

Markup:

<aside>Insert aside content here.</aside>

<article>

The <article> element should be used for news articles, blog entries, comments; anything that is syndicated. It should also be used for self-contained widgets. An article is a specialised form of the section element, and it too can contain a header and a footer. Multiple articles can be contained within a section, and vice versa, and they can be nested inside other articles (the same can also be said for sections). ‘Pubdate’ can be added into the time tag in articles to highlight the date and time of publication.

Markup:

<article>
	<header>Insert header content here.</header>
	<time datetime="2011-12-19" pubdate></time>
	<p>Insert main content here.</p>
	<footer>Insert footer content here.</footer>
</article>

<hgroup>

The <hgroup> element is used to group headings together. Only the first heading element will contribute to the document outline, so the second one is more of a tagline.

Markup:

<hgroup>
	<h1>Insert main header title here.</h1>
	<h2>Insert tagline here.</h2>
</hgroup>