HTML5 Doctor » dt

The dl element

Mike Robinson — Thu, 03 Jun 2010 14:00:10 +0000

The

element existed in HTML 4, but it’s been repurposed in HTML5. Let the Doctor explain what’s changed and how it can be used.

It’s all in the description

In HTML 4,

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,

HTMLdescription list

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

to represent the term or name and

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

Example Uses

I’ve put together a couple of appropriate uses of

to get your creative juices flowing.

Glossary

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


  The article element
  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..
  ...
  
    Glossary
    
      RSS
      An XML format for aggregating information from websites whose
        content is frequently updated.
      Weblog
      Contraction of the term "web log", a weblog is a
        website that is periodically updated, like a journal

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

Metadata

) to one key (
). Multiple keys ( ) to a single value As mentioned above, a may map many keys ( ) to many values ( ). This means that one term might have multiple descriptions, or there may be multiple terms that mean the same thing. Related s should follow each other immediately before their descriptive . colour color 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. 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 . You can’t define “car” as one thing at the start of a and then define it again at the end of that same . If you have multiple descriptions for a single term, you should list both s directly under the same . Chips Strips of potato usually deep fried in fat. Commonly referred to as "french fries". A small fragment that has been broken off from a larger body (e.g. stone). What it should not be used for Dialogue was a suggested use for 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 , conversations have no specific markup element. Instead, the specification makes recommendations of how to mark up conversations. Summary The changes to 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 and to give context to this information. Where do you see yourself using 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! Related Posts: The article element A little more conversation with dialog HTML5 Doctor Glossary Aside Revisited Understanding aside Share and Save: The dl element originally appeared on HTML5 Doctor on June 3, 2010.
) to a single value

dd-details wrong again

Remy Sharp — Mon, 12 Oct 2009 12:00:57 +0000

You may recall that I blogged about legend not being so legend as the heading element for details or figure. After enough noise was made the spec was changed so that the heading and contents of these elements can now be marked up using the dt/dd combo.

Although not immediately obvious why it’s the right choice, it appeared to work for our needs…at first. Of course now, it’s been discovered that it’s actually a pretty bad idea.

How we got here

In short, details and figure solve a common design pattern and provide nice new semantic tags to solve that problem. A figure could be an image you’re referring to in an article or chapter of a book, and the details element allows the user to interactively show and hide the details of some piece of information.

Both elements can contain a heading element to label up the contents. For some reason, beyond this author’s understanding, these two elements, completely different in meaning, have been historically tied to using the same solution solve the problem how to markup the heading.

As I mentioned earlier, originally the proposed solution for the headings was to use the legend element, which proved to completely break in every browser (in new and interesting ways).

Skip forward to mid-September, and Jeremy Keith proposes that we solve the legend issue with the dt/dd combo, and Ian Hickson says:

That’s not a bad idea actually. Ok, done.

Before this was proposed there was lots of discussion about why we couldn’t introduce a new element to solve this problem, and Ian points out already 18 (or 22, I forget!) elements that represent some sort of heading. This is the argument for not introducing another new heading type element to solve the details and figure problem.

The problem with dt/dd

Ironically the problem isn’t with the dt part of the solution, it’s actually with the dd.

Dean Edwards (genius behind some very cool JavaScript and something that will soon blow your minds) has been testing these elements in detail and found a very serious issue with the dd in, guess what, IE6 & 7. I want to explain and draw attention to what Dean has found.

Styling a dd within details or figure (and probably other elements) bleeds to the next element.

By styling a dd red, and only the dd, here’s what it should look like (and does in IE8):

Where as in IE7 (and IE6), the red style bleeds in to the following p element (note the “this paragraph shouldn’t be red”):

![dd styled in IE7](

What’s more, if you look back at the screen shots you can see the last paragraph says “Contents of first

”. The result of that test is being generated by the following JavaScript:

document.getElementsByTagName('dd')[0].innerHTML

Notice how in IE7, the contents of the first dd’s innerHTML is empty.

The problem here is that:

IE7 and below can’t style a dd properly without it breaking and the style bleeding in to adjacent elements.
JavaScript, randomly, can’t see the contents of the dd.

Is there hope?

There is a hack that fixes this issue. It’s pretty mad, but it does fix the styling issue. However the side effects from this hack are outright unacceptable and are so serious I would argue that the hack solution itself is a bug.

The hack is over at the public-html of W3.org, and involves stuffing an open object tag just before we close the head tag.

This isn’t a clean solution for including in HTML by hand, authors won’t remember or might get it wrong, so it needs to be perhaps automated as part of the HTML5 enabling script, right? It would have to be inserted using document.write() as the last part of the head element.

Dean went on to test this, and he found:

There is a nasty side effect though. As you mentioned the document.write() should be the last thing in the . If there are any scripts following the document.write() then they are not executed.

The really freakin’ important bit:

If there are any scripts following the document.write() then they are not executed

So, to answer the question: is there hope? No, not for the dd/dt combo. It can’t be styled properly and hacks will break JavaScript.

We want the details

We, as authors, want to make use of details and figure today. Waiting for IE7 to fall out of circulation before we start using these elements (as it’s been proposed a number of times on the IRC channel and mailing boards) is outright not going to happen. IE6 & 7 are going to be around for a good more number of years, certainly IE7 (IE6 has at least another 5 years in the beast).

We are going to start enabling the details interactive UI pattern using JavaScript whilst we wait for vendors bake it in to the browser, so the final proposed markup needs to work in all the browsers, including IE6 and IE7.

What are our current options?

Give new meaning to an existing element (as we’ve already tried to), legend, label and dt/dd have been tried, tested and failed. What else could we use?
Repurpose one of the existing new elements (keeping in mind that the dt/dd was repurposed so it should be a consideration).
Create another heading element to solve this problem.

The problem is that the conversation seems to have lost steam (or certain Dean was starting to see the conversation go in circles). If you want to see these two elements make it the final spec, and correctly, head over to either the IRC channel or the mailing list, and get heard.

Reference links

Dean’s original details test (my modified tests to fire the innerHTML on load: details, figure)
Litmusapp browser screenshots of the results: details, figure
whatwg mailing list thread: September, October
Related Posts:

Share and Save:

dd-details wrong again originally appeared on HTML5 Doctor on October 12, 2009.

September HTML5 spec changes

Remy Sharp — Thu, 17 Sep 2009 12:00:20 +0000

September being one month before the HTML5 spec goes to last call in October, there’s been a few significant changes to the HTML5 spec that we wanted to briefly share with our patients.

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:


 
 
Exhibit B. The Rough Copy trailer.

`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:

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

A little more conversation with dialog

Mike Robinson — Wed, 12 Aug 2009 13:57:12 +0000

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.


  Sam
  Knock, Knock.
  Eric
  Who's there?
  Sam
  Justin.
  Eric
  Justin who?
  Sam
  Justin time for dinner!

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.


  @akamike, 13 minutes ago
  Where is a good place to eat in town?
  @brucel, 11 minutes ago
  @akamike Have your tried The Swine's Flu pub lunches?
  @Rich_Clark, 11 minutes ago
  @akamike If you like seafood, try the restaurants at the waterfront
  @jackosborne, 9 minutes ago
  @akamike What @brucel said, or there are lots of good bakeries on the high street.
  @spambot148, 4 minutes ago
  @akamike Gain 1000 followers in 5 minutes!

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.

HTML5 Doctor » dt

The dl element

It’s all in the description

Example Uses

Glossary

The article element

What it should not be used for

Summary

dd-details wrong again

How we got here

The problem with dt/dd

Is there hope?

We want the details

Reference links

Related Posts:

September HTML5 spec changes

Clarification over section and article

footer now works like header

details and figure saved

aside has better examples

Dropped Elements

Ch-ch-changes

Related Posts:

A little more conversation with dialog

Defining dialog

Enough talk, let’s get practical

Marked Up Humour

A Twitter Conversation

Wrapping up

Related Posts:

Clarification over `section` and `article`

`footer` now works like `header`

`details` and `figure` saved

`aside` has better examples