// Check the length of the history stack
console.log(history.length);

// Send the user agent forward
console.log(history.forward());

// Send the user agent back
console.log(history.back());

// Send the user agent back (negative) or forward (positive)
// by a given number of items
console.log(history.go(-3));

function clickHandler(e) {
  /* Snip... */

  // Add an item to the history log
  history.pushState(data, event.target.textContent, event.target.href);

  return event.preventDefault();
}

// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
  console.log('popstate fired!');

  updateContent(event.state);
});

// Store the initial content so we can revisit it later
history.replaceState({
  content: contentEl.textContent,
  photo: photoEl.src
}, document.title, document.location.href);

Pushing and Popping with the History API originally appeared on HTML5 Doctor on November 15, 2011.

<h1>My fantastic site</h1>
<h2>About me</h2>
<p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
<h3>What I do for a living</h3>
<p>I sell enterprise-managed ant farms.</p>
<h2>Contact</h2>
<p>Shout my name and I will come to you.</p>

<h1>My fantastic site</h1>
<h1>About me</h1>
<p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
<h1>What I do for a living</h1>
<p>I sell enterprise-managed ant farms.</p>
<h1>Contact</h1>
<p>Shout my name and I will come to you.</p>

<h1>My fantastic site</h1>
<section>
  <h1>About me</h1>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
  <section>
    <h1>What I do for a living</h1>
    <p>I sell enterprise-managed ant farms.</p>
  </section>
</section>
<section>
  <h1>Contact</h1>
  <p>Shout my name and I will come to you.</p>
</section>

<h2>HTML5 Doctor articles</h2>
<article>
  <h1>The section element</h1>
  <p>We doctors are a bunch of chums using HTML5 and writing about how we do it...</p>
</article>
<article>
  <h1>The article element</h1>
  <p>We’ve discussed a lot of new elements here at HTML5Doctor...</p>
</article>

<h1>HTML5 Doctor articles</h1>
<article>
  <h3>The section element</h3>
</article>
<article>
  <h3>The article element</h3>
</article>

<h2>HTML5 Doctor articles</h2>
<article>
  <h2>The section element</h2>
</article>
<article>
  <h2>The article element</h2>
</article>

<h6>HTML5 Doctor articles</h6>
<article>
  <h1>The section element</h1>
</article>
<article>
  <h1>The article element</h1>
</article>

<aside>
  <section>
    <h2>Twitter</h2>
  </section>
  <section>
    <h2>Recent comments</h2>
  </section>
</aside>

<aside>
  <h1>What you're saying</h1>
  <section>
    <h2>Twitter</h2>
  </section>
  <section>
    <h2>Recent comments</h2>
  </section>
</aside>

<article>
  <hgroup>
    <h1>Title goes here</h1>
    <h2>Subtitle of article</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

<h1>Top of the outline</h1>

<section>
  <h2>A heading in the outline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
  <h2>Another heading in the outline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
  <blockquote>
    <h1>This quoted heading will not appear in the outline</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </blockquote>
</section>

Document Outlines originally appeared on HTML5 Doctor on July 12, 2011.

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for use when there is no network connectivity. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an uncached page.

If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. By carefully considering the contents of your manifest file, you can offer a suitable web experience to a disconnected user.

CACHE MANIFEST
      
# This is a comment

CACHE:
/css/screen.css
/css/offline.css
/js/screen.js
/img/logo.png

http://example.com/css/styles.css

FALLBACK:
/ /offline.html

NETWORK:
*

CACHE MANIFEST

/css/screen.css
/css/offline.css
/js/screen.js
/img/logo.png

http://example.com/css/widget.css

CACHE MANIFEST

FALLBACK:
/status.html /offline.html

CACHE MANIFEST

FALLBACK:
/ /offline.html

CACHE MANIFEST

FALLBACK:
/images/avatars/ /offline_avatar.png

CACHE MANIFEST

NETWORK:
*

CACHE MANIFEST

NETWORK:
register.php
login.php

<!DOCTYPE html>
<html lang="en" manifest="/offline.appcache">
  // your html document
</html>

AddType text/cache-manifest .appcache

CACHE MANIFEST
      
# Version 9

CACHE:
/css/screen.css

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>

Go offline with application cache originally appeared on HTML5 Doctor on January 25, 2011.

Status: Unchanged

In HTML 4, the <div> element was defined to be a generic element for structuring a page. Although you can allude to the nature of its content by assigning id and class attributes with meaningful names, a <div> has almost no semantic meaning. The HTML5 definitionis basically the same as in HTML 4:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

<div> is literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together. It lies at the opposite end of the semantic spectrum from the new HTML5 structural elements.

* For those who haven’t encountered this term before, flow content elements are the same as HTML 4′s block-level content elements.

<div> vs semantic elements

The new semantic elements (<article>, <section>, and friends) justifiably capture a lot of <div>‘s territory, but <div> still has a place in the HTML5 world. You should use <div> when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container.

Ask yourself questions about your content: Is it part of the site’s navigation? Is the content secondary to its surrounding content? If this content were printed on a page with nothing else, would it make sense? You will need to evaluate your content carefully, thinking about what it is and pairing it with an appropriate element. I recommend taking a look at The Amazing HTML5 Doctor Easily Confused HTML5 Element Flowchart of Enlightenment to help you choose the right element for your flow content.

Example Uses

Below are a few examples of how you can still use <div> appropriately in your HTML5 sites.

Site Wrapper

While you can use the <body> element as a “natural” wrapper for site content, many people like to use <div> as top-level container for styling the entire site. This is an appropriate use of <div>, as a site wrapper has no meaning or purpose other than to aid styling.

<body>
  <div id="wrapper">
    <header>
      <h1>My Happy Blog</h1>
      <nav>
        <!-- ... -->
      </nav>
    </header>

    <!-- ... rest of site content ... -->
  </div>
</body>

Intro paragraph

If you want to style a particular block of content, like the intro to an article, <div> is a perfectly suitable element:

<article>
  <h1>Big announcement</h1>
  <div class="intro">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <p>Sed massa metus, molestie nec facilisis non, lobortis ac orci. Suspendisse porttitor laoreet mi, at laoreet dolor rhoncus non. Sed ut massa quis mi placerat iaculis non sit amet odio. Cras tempus urna vitae felis rutrum porta.</p>
  <p>Maecenas auctor lacus eget mauris tincidunt consectetur. Donec molestie malesuada ligula, sed feugiat massa consequat sit amet. Pellentesque orci metus, ultricies sit amet adipiscing eget, gravida fringilla dui. Vestibulum accumsan dui diam, eget venenatis urna. Sed eu lobortis justo. Aliquam erat volutpat. Aliquam erat volutpat.</p>
</article>

The first two paragraphs aren’t really that different from the rest of the article, but by wrapping them in a <div>, they can be styled to capture the reader’s attention and draw them into the article. Of course, if you only want to style the first paragraph, you could use a CSS selector like h1 + p {} or article p:first-child {}. But if you want to style an article’s first paragraph only sometimes, or you need the style to work in older versions of Internet Explorer, or (as in this case) you want style more than one paragraph, a wrapper <div> is the way to go.

Other uses for <div>

As previously stated, use of <div> will decline in favour of the new semantic elements. If you’re using lots of <div>s and only a few of the semantic elements in your HTML5 sites, then you’re really not taking advantage of what HTML5 has to offer.

That said, you may need to rely on <div> as you transition into the world of HTML5. For example, if many of your site’s visitors use Internet Explorer with JavaScript disabled, then you won’t be able to style the new elements for these users. A piece of advice we gave back in our article on how to use HTML5 in your client work right now was to use <div> with classes named after the new semantic elements, getting you to think about how you would use the new semantic elements without actually using them.

<div class="article">
  <div class="header">
    <h1>My blog post</h1>
    <p>An example using divs with classes instead of the new elements.</p>
  </div>
  <!-- ... content ... -->
</div>

<article>
  <header>
    <h1>My blog post</h1>
    <p>The same article but switched to the new elements.</p>
  </header>
  <!-- ... content ... -->
</article>

This makes it simple to switch to the new elements when it becomes practical (think “search and replace”).

Recap

You will certainly use <div> less often in HTML5 than you did in HTML 4, but it’s still a valuable element to have in your toolkit. Sure, it’ll be picked last for the team because everyone else is better, but it’ll be the best damn generic container element there is!*

Look at the more semantically valuable elements and consider whether your content would benefit from what they offer. Need help deciding? Take a look at some of these articles right here on HTML5 Doctor:

• header
• footer
• aside
• article
• section
• figure
• nav

For more, check our article archive. And if all else fails, use a <div>!

* As it should be, it’s the only one apart from <span>. That said, if your content is just text, perhaps the oft-overlooked <p> would be more appropriate.

You can still use div originally appeared on HTML5 Doctor on July 13, 2010.

It’s all in the description

In HTML 4, <dl> was considered a “definition list”, containing groups of terms and their definitions. The terms and definitions were a many-to-many relationship: one or more terms to one or more definitions. The element was often misunderstood and therefore misused or not used at all in favour of more widely used and (perhaps) less semantic markup.

To address these issues, <dl>’s definition has been refined in HTML5 as a description list. From the spec:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

It maintains the many-to-many relationship between names and values. These groupings use <dt> to represent the term or name and <dd> for the description. Also note the last line of the quote, stating that a name should not be used more than once within a single <dl>.

Example Uses

I’ve put together a couple of appropriate uses of <dl> to get your creative juices flowing.

Glossary

<dl> can be used to mark-up a glossary of terms, although you must remember to use <dfn> to indicate that the word is defined here:

<article>
  <h1>The article element</h1>
  <p>An independent piece of content, one suitable for putting in an
    article element, is content that makes sense on it’s own. This yardstick
    is up to your interpretation, but an easy smell test is would this make sense
    in an RSS feed? Of course weblog articles and static pages would make sense
    in a feed reader, and some sites have weblog comment feeds..</p>
  ...
  <aside>
    <h2>Glossary</h2>
    <dl>
      <dt><dfn>RSS</dfn></dt>
      <dd>An XML format for aggregating information from websites whose
        content is frequently updated.</dd>
      <dt><dfn>Weblog</dfn></dt>
      <dd>Contraction of the term "web log", a weblog is a
        website that is periodically updated, like a journal</dd>
    </dl>
  </aside>
</aticle>

The example content is from our recent post on the article element. In the example, I plucked out the terms “RSS” and “weblog” and defined them in a handy glossary. Since this information is supplementary to the article, the glossary has been placed in an <aside>.

Metadata

<dl> is also appropriate for marking up content metadata, such as information about our article on how to use HTML5 in your client work right now.

<dl>
  <dt>Authors:</dt>
  <dd>Remy Sharp</dd>
  <dd>Rich Clark</dd>
  <dt>Editor:</dt>
  <dd>Brandan Lennox</dd>
  <dt>Category:</dt>
  <dd>Comment</dd>
</dl>

Since Remy and Richard contributed to that article, they are both listed as authors, showing the pairing of multiple values (<dd>) to one key (<dt>).

Multiple keys (<dt>) to a single value

As mentioned above, a <dl> may map many keys (<dt>) to many values (<dd>). This means that one term might have multiple descriptions, or there may be multiple terms that mean the same thing. Related <dt>s should follow each other immediately before their descriptive <dd>.

<dl>
  <dt lang="en-GB"><dfn>colour</dfn></dt>
  <dt lang="en-US"><dfn>color</dfn></dt>
  <dd>The visual result of light in their emission, transmission and/or reflection. This perception is determined by the hue, brightness and saturation of the light at a specific point. </dd>
</dl>

Here I have indicated that there are two different spellings of “colour” and grouped these terms to match them with the same description.

It is not appropriate, however, to use the same key multiple times within a single <dl>. You can’t define “car” as one thing at the start of a <dl> and then define it again at the end of that same <dl>. If you have multiple descriptions for a single term, you should list both <dd>s directly under the same <dt>.

<dl>
  <dt><dfn>Chips</dfn></dt>
  <dd>Strips of potato usually deep fried in fat. Commonly referred to as "french fries".</dd>
  <dd>A small fragment that has been broken off from a larger body (e.g. stone).</dd>
</dl>

What it should not be used for

Dialogue was a suggested use for <dl> in HTML 4, which was widely debated and often considered inappropriate. This application of the element is no longer recommended in HTML5, and the new definition of the element does indeed back this up. When marking up a conversation, you’re not describing the speaker, but rather stating what they said. With the demise of <dialog>, conversations have no specific markup element. Instead, the specification makes recommendations of how to mark up conversations.

Summary

The changes to <dl> are fairly minor, but the new definition should clear up confusion and enable developers to use it more appropriately. You can use this element to represent key-value pairs semantically and couple it with other elements like <details> and <aside> to give context to this information.

Where do you see yourself using <dl> in HTML5? Perhaps details about a downloadable file? Or are you going to give your more technical blog articles a glossary? Let us know in the comments!

The dl element originally appeared on HTML5 Doctor on June 3, 2010.

For your convenience, we’ve put together a list of events where we’ll be speaking and even the ones we’re simply attending. Read on for some of our upcoming HTML5 appearances.

We’ll continue to maintain this page with new listings, so check back often. Otherwise you might miss us!

Run an event? Get in touch!

If you organise an event or workshop and would like us to speak (or you’d just like to see us there), then we’d love to hear from you.

HTML5 Doctor Speaking and Training Appearances originally appeared on HTML5 Doctor on April 16, 2010.

Aside redefined

When we previously discussed aside in “Understanding Aside“, its definition suggested that it should be used for content tangentially related to the content surrounding it, such as related reading links and glossaries. It did not appear to be an appropriate element for holding secondary content related to the site as a whole, typically known as a “sidebar”.

From the comments here and elsewhere, you can see this definition was not accepted by developers. The spec writers listened, and aside is now acceptable for secondary content when not nested within an article element.

Examples of aside in two different contexts

With the new definition of aside, it’s crucial to remain aware of its context. When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).

The two uses of aside can be best illustrated with an example:

<body>
  <header>
    <h1>My Blog</h1>
  </header>
  <article>
    <h1>My Blog Post</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!-- Since this aside is contained within an article, a parser
      should understand that the content of this aside is directly related
      to the article itself. -->
      <h1>Glossary</h1>
      <dl>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dl>
    </aside>
  </article>
  <aside>
    <!-- This aside is outside of the article. Its content is related
    to the page, but not as closely related to the above article -->
    <h2>Blogroll</h2>
    <ul>
      <li><a href="#">My Friend</a></li>
      <li><a href="#">My Other Friend</a></li>
      <li><a href="#">My Best Friend</a></li>
    </ul>
  </aside>
</body>

Conclusion

The aside element can now represent secondary content when used outside of an article. Keep in mind that aside — and, more generally, secondary content — does not necessarily mean “sidebar”. The style of the content should not dictate the use of the element. For content that is not the primary focus of an article (or page) but is still related to the article (or page), aside is what you need, regardless of its visual design.

Aside Revisited originally appeared on HTML5 Doctor on October 28, 2009.

As always, the defining text passed down to us in the specification:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Both uses are aimed at drawing attention to what is relevant to the user. mark can provide a very useful aid to the user with appropriate styling.

Examples

Search Results

A prime example of how to use mark today is to highlight the term a user has searched for. Many search engines already do this using other methods to mark the text, which shows the need for this new element.

<h1>716,000,000 search results for the query "<mark>HTML 5</mark>"</h1>
<section id="search-results">
  <article>
    <h2><a href="http://en.wikipedia.org/wiki/HTML_5"><mark>HTML 5</mark> - Wikipedia, the free encyclopedia</a></h2>
    <p><mark>HTML 5</mark> is the next major revision of <mark>HTML</mark> ("hypertext markup language"), the core markup language of the World Wide Web. The WHATWG started work on the ... <a href="http://en.wikipedia.org/wiki/HTML_5">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://dev.w3.org/html5/spec/Overview.html"><mark>HTML 5</mark></a></h2>
    <p>A vocabulary and associated APIs for <mark>HTML</mark> and XHTML. Editor's Draft 16 August 2009. Latest Published Version: http://www.w3.org/TR/<mark>html5</mark>/; Latest Editor's ... <a href="http://dev.w3.org/html5/spec/Overview.html">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/"><mark>HTML 5</mark></a></h2>
    <p>Multiple-page version: http://whatwg.org/<mark>html5</mark>; One-page version: http://www.whatwg.org/specs/web-apps/current-work/; PDF print versions: ... <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://html5gallery.com/"><mark>HTML5</mark> Gallery | A showcase of sites using <mark>HTML 5</mark> markup</a></h2>
    <p>A showcase of sites using <mark>html5</mark> markup, with twin primary aims to help web designers and developers of how to implement <mark>html5</mark> into their sites now, ... <a href="http://html5gallery.com/">Read more</a></p>
  </article>
</section>
<nav>
  <ol>
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>...</li>
  </ol>
</nav>

View a live example

Any instance of “HTML 5″, and even simply “HTML”, has been marked as relevant to the user’s search. This can help the user see how relevant their search results are, so they can pick the best results for what they need. When implementing this in a language like PHP, you can use functions like str_replace() or some clever regular expressions to find the search term within your output and wrap mark around each instance.

Quotes

In all the brilliant things that have been said, there is always a chance that someone will come back to scrutinize parts in the future. These pieces of text or speech may not have had any importance when they were original formed, and hence not been given such emphasis, but now have attracted particular interest by a another party. mark can be used in quotations to highlight such text.

<p>Mike once said:</p>
<blockquote><p>Google won't last, <mark>they will fail</mark> at search and advertising as nothing will topple Yahoo.</p></blockquote>
<p>Of course, we now know he was wrong. Google has not failed, they excelled in search and online advertising, making them a very profitable company.</p>

Here I have quoted myself, highlighting where I was wrong in my original statement and then immediately correcting this error in the following paragraph.

Differences from strong and em

Previously, you may have used em and strong for adding emphasis or importance, respectively, to portions of text. mark differs from these two as it is used purely for highlighting the relevance of a piece of text to the user and/or page’s content. In the past you may have used em and strong for this purpose, which was arguably valid at the time due to the lack of a better element, but the introduction of mark simply means their use will be more strict.

Use strong when you need to indicate the importance of a piece of text, such as an error or warning message, and em should be for adding emphasis to text, stressing words to adapt the meaning of a sentence.

Final Thoughts

The addition of mark to HTML is welcome, preventing stretching the definitions of strong and em too thin. There are many practical uses of mark in the world today, particularly for search and educational articles like tutorials. Put your highlighter pens down and start using mark to highlight relevant text (it’s better for your screen!).

Disclaimer: I have nothing against Google, this was merely a fictitious example vaguely related to the use of mark in search. Long live Google?

Draw attention with mark originally appeared on HTML5 Doctor on August 18, 2009.

Defining dialog

The HTML 5 specification defines dialog as follows:

The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

That’s a lot of different types of dialogue that can be marked up. A dialog element contains the dt element for a speaker’s name, and dd for what they said. That’s right, dialog borrows two elements from dl to pair up a speaker and what they say. The definition of a dl itself has changed in HTML 5 to become an association list, pairing names (dt) with values (dd). dialog uses this in a similar way, pairing a name of a speaker with whatever they said.

This means that the dt is the source (speaker) of what is within the following dd, and the dd contains a quotation from that source. Therefore, dialog does not require the use of cite, blockquote or q. The only time a q would be appropriate within dialog would be if what one person said contained a quotation from someone else. It is also possible to use p within a dd, should you need to mark-up large responses as paragraphs.

Also, despite the fact both dialog and dl share dt and dd, a dialogue should never be marked up with a dl. However, appropriate uses of dl is beyond the scope of this article and will be revisited in a separate article.

Enough talk, let’s get practical

Marked Up Humour

My first example is very straight forward. Using dialog, I will mark up a hilarious “Knock, Knock” joke.

<dialog>
  <dt>Sam</dt>
  <dd>Knock, Knock.</dd>
  <dt>Eric</dt>
  <dd>Who's there?</dd>
  <dt>Sam</dt>
  <dd>Justin.</dd>
  <dt>Eric</dt>
  <dd>Justin who?</dd>
  <dt>Sam</dt>
  <dd>Justin time for dinner!</dd>
</dialog>

Note that two people are in this conversation, Sam and Eric. Their names are marked up with dt and what they said is placed in dd. Wrap it all up in a the fresh dialog, and you have a semantically marked up conversation!

Once your sides have stopped splitting, I’d like to direct you to something a little more complex: how Twitter can take advantage of dialog.

A Twitter Conversation

Twitter is a prime example of where dialog can be used in the real world. When a user posts a tweet, other users can reply by starting their tweet with @username, where username is whoever they are responding to.

<dialog>
  <dt><a href="http://twitter.com/akamike">@akamike</a>, <time datetime="2009-08-11T12:35:54">13 minutes ago</time></dt>
  <dd>Where is a good place to eat in town?</dd>
  <dt><a href="http://twitter.com/brucel">@brucel</a>, <time datetime="2009-08-11T12:37:56">11 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> Have your tried The Swine's Flu pub lunches?</dd>
  <dt><a href="http://twitter.com/Rich_Clark">@Rich_Clark</a>, <time datetime="2009-08-11T12:38:04">11 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> If you like seafood, try the restaurants at the waterfront</dd>
  <dt><a href="http://twitter.com/jackosborne">@jackosborne</a>, <time datetime="2009-08-11T12:40:02">9 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> What <a href="http://twitter.com/brucel">@brucel</a> said, or there are lots of good bakeries on the high street.</dd>
  <dt><a href="http://twitter.com/spambot148">@spambot148</a>, <time datetime="2009-08-11T12:45:16">4 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> Gain 1000 followers in 5 minutes!</dd>
</dialog>

View a live example

Here, I have marked up an example of a conversation on Twitter, with users replying to the original speakers tweet. Once again, each person has had their name marked up in a dt but also uses the new time element to define the time of the tweet. In the new definition of dt, there is an example of using time this. Finally, the content of each tweet is placed in a dd. This shows how dialog could be used today in even some of the most popular services on the web.

Wrapping up

dialog is quite an easy element to grasp, and you’ll quickly find yourself marking up conversations, chat logs and more with this new element. As seen with the Twitter example, there is scope to add extra value to dialogue used in the real world. Now, go forth and have conversations knowing that you can easily mark them up in HTML 5!

A little more conversation with dialog originally appeared on HTML5 Doctor on August 12, 2009.

First, a look at how the HTML 5 specification defines <aside>:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

What can often trip-up someone reading the specification is the use of the word “sidebar”. I will go into detail about this later in the article, for now you should be aware that what is said there might not quite mean what you first think. Content within an <aside> should be stand-alone information that is related to the article in context. If your <aside> content meets this requirement, then you have a useful element to not only semantically wrap that content but to even hook CSS styles on.

How strict should this relationship be? Very. Good <aside> content examples include pull-quotes, a glossary or even related links.

Example Uses

As suggested in the specification, a pull-quote is an excellent example of a piece of content that is separate from the main article body but still related. Points of interest highlighted.

<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

For more about the <header> element see Richard’s article, “The <header> Element.

On a styled web page or, more common, in a printed article this would be represented visually as a highlighted quote to the side of the main article. This <aside> is related to the content but does not need to be part of the article body as it can be understood without the extra information, or in this case without the duplicate quote.

Another example would be a glossary of terminologies used in an article:

<article>
    <header>
        <h1>Web Technologies</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>A set of standards for styling documents presented on the
            World Wide Web.</dd>
            <dt>PHP</dt>
            <dd>A server-side scripting language suited to dynamic HTML document
            generation for the web.</dd>
            <dt>JavaScript</dt>
            <dd>A client-side scripting language used for manipulating HTML documents
            within a browser.</dd>
        </dl>
    </aside>
</article>

Incorrect use of <aside>

It is easy to confuse this element for something it isn’t, and as mentioned earlier the definition of <aside> can trip-up a few developers. The most common misconception of how this element should be used is for the standard sidebar. While there is usually a degree of relation between sidebar content and the content in an article, it is not enough to be considered fit for an <aside>. Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an <aside>.

In the definition of <aside> it is key to note that it refers to sidebars in printed media, such as a magazine or leaflet. A “sidebar” in a magazine might contain additional notes on the article in context, translating this to HTML 5 would consider this an <aside>. If the printed article on PHP had an ad for “Superior, Cheap, Web Hosting” as a sidebar, this would not be classified as an <aside>. In such cases, look at other elements for more semantic mark-up.

Closing Thoughts

Like any HTML element, when used correctly the <aside> element can be very useful in semantically marking-up page content. An <aside> can be used to enhance an article with additional information, or highlighting parts that the reader may find interesting. Asides are stand-alone, non-essential as part of an article but when used correctly it can be an extra level of information for your content. Don’t try to force content into an <aside>, if it’s not tangentially related to the article then it shouldn’t be there. HTML 5 offers many new elements to mark-up your web pages, use them wisely.

Understanding aside originally appeared on HTML5 Doctor on June 19, 2009.