Clarification over section and article

The spec has been clarified to help authors correctly choose between when to use section and when to use article, and Bruce’s section post has also been updated.

footer now works like header

This was a big one and causing confusing to people coming to HTML5 for the first time. Originally you couldn’t include a nav element inside a footer, or a section.

Now the spec has been changed to match the header element.

details and figure saved

Instead of using legend, which didn’t work, Jeremy suggested (although slightly tongue in cheek) to use dt for the title and dd for the body. Ian Hickson agreed, and it’s in

Example:

<figure>
 <dd><video src="ex-b.mov"></video>
 <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
</figure>

aside has better examples

The documentation has been updated to specify better examples of how the aside element can be used.

Better examples help us authors understand how it can be used.

Dropped Elements

The following elements have been dropped from the HTML5 spec (though bb and datagrid were some time ago, and datagrid has been postponed rather than dropped entirely):

• dialog
• bb
• datagrid

Ch-ch-changes

We’ll be posting in more detail about some of these changes, and as further changes come out of the editing process we’ll no doubt keep you all up to date, either via our Twitter account (which you should follow) or feel free to let us know too!

Share and Save:

<a rel="nofollow"  href="http://twitter.com/home?status=September%20HTML5%20spec%20changes%20-%20http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Twitter"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;bodytext=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Digg"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Sphinn"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://reddit.com/submit?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes" title="Reddit"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://delicious.com/post?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;notes=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="del.icio.us"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes" title="StumbleUpon"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://technorati.com/faves?add=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Technorati"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.netvibes.com/share?title=September%20HTML5%20spec%20changes&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Netvibes"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/netvibes.png" title="Netvibes" alt="Netvibes" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.facebook.com/share.php?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes" title="Facebook"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;annotation=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Google Bookmarks"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.friendfeed.com/share?title=September%20HTML5%20spec%20changes&amp;link=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="FriendFeed"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://news.ycombinator.com/submitlink?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes" title="HackerNews"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/hackernews.png" title="HackerNews" alt="HackerNews" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;source=HTML5+Doctor+helping+you+implement+HTML5+today&amp;summary=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="LinkedIn"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.newsvine.com/_tools/seed&amp;save?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;h=September%20HTML5%20spec%20changes" title="NewsVine"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/newsvine.png" title="NewsVine" alt="NewsVine" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes&amp;s=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Tumblr"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/tumblr.png" title="Tumblr" alt="Tumblr" class="sociable-hovers" /></a>

<br/><br/>

September HTML5 spec changes originally appeared on HTML5 Doctor on September 17, 2009.

Less action, more conversation. That’s how that Elvis song went, right? OK, perhaps not. Regardless, the new dialog element introduced in HTML 5 is all about marking up the conversation, and it uses a couple of elements you may have already heard of. Sure, it’s a little less action than something like audio, but it is still a useful element to semantically mark up many forms of dialogue.

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!

Share and Save:

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