Basic HTML5 Metadata Tags - dummies

By David Karlins, Doug Sahlin

In addition to page structuring elements like headers, footers, articles, sections, and asides, other HTML5 tags are available to enhance SEO yet play a somewhat different role. These HTML5 tags, such as address or date, operate in a more narrow sphere, enclosing and identifying content types within another tag.

How to assign figures and captions

The figure and figcaption elements identify a figure or associated caption, respectively. And as with HTML5 elements in general, assigning these elements to content helps content aggregators and indexing programs (like search engines) interpret your page content and make it more accessible.

You might, for example, have a figure element wrapped around both an image and the caption (figcaption).

How to tag date and time

Date and time information can be enclosed in HTML5 <time> tags. For example, if your web page is promoting a show at a club at midnight next Saturday night, you can use the <time> element to make that information more available to young people using their mobile devices to search for something to do this weekend.

You can use a time element anywhere in a web page — in the middle of an article in an aside, or even in a footer (you might do that, for instance, if you announce in your page footer that an upcoming event is at midnight).

The basic syntax for the time element is


Time is indicated with a 24-hour clock. So, in the preceding example, 14:30 represents two o’clock in the afternoon. Six a.m. is 06:00, noon is 12:00, six p.m. is represented with 18:00, and so on.

Here’s how you might use the time element in context:

<p>The fun starts at 11 at night!<time>23:00</time>. Be there!</p>

When you use the time element, you can use the datetime parameter to the actual date and time, as shown in the following example:

<p>Save the date! New Year's Eve <time datetime="2009-02-18"></p>

If you combine a date and time, a “T” character is used to separate the date from the time, as in the following example:

<p>Mark your calendar: 11PM on New Year's Eve!
            <time datetime="2013-12-31T11:00"></time>.</p>

How to use the address element

The address element in HTML5 is used to signify either a physical or virtual address. For example, you can enclose your site’s URL within an address element. Or, use the address element to demarcate an e-mail address. The address element follows traditional physical address logic and order, as in 1 Times Square, New York, NY, 10036.

An address element can, and often will, be embedded in a footer element, but you can use it anywhere. To define content as an address, simply enclose it in open and close address tags.

The following example shows an address element within a footer:

(c) 2013, Emstrand Graphics<br>
<address>1 Times Square, New York, NY 10036</address>