...

View Full Version : semantics of <dl> vs. <table>



rmedek
01-26-2005, 11:20 PM
Hey everyone,

So, I've got this look I want for a website I'm working on. The page has a list of bands, complete with a description and a photo. It'll look like this when it's done:
http://richardmedek.com/temp/dlexample.png
Now, the idea was to use a definition list to mark everything up, and slide everything into place, but the nature of <dt> doesn't let that happen, or at least any way I can figure out (<dt> doesn't contain its list items like other elements, and it's inline).

Of course, it could be said that a <dl> is nothing more than a two column table... and if that's the case, it'd be a piece of cake to style a table like this. So would a table be appropriate, or should I strive to get the <dl> styled the way I want it?

hemebond
01-26-2005, 11:40 PM
There's no reason you can't use a table for this. Make sure you structure the table correctly and then use CSS to modify the display of it. This page has examples of stylish tables (http://moronicbajebus.com/playground/cssplay/reformat-table/).

Graft-Creative
01-27-2005, 12:14 AM
Personally I'd try and go with a definition list for this - I dunno, I've been using definition lists quite a bit recently, and at times they can be the trickiest choice to decide on - so I understand the quandry.

I tend to look at tables as a way of cross-referencing information, like say......train timetables (or pub opening times even :p )

Instinct would tell me to go for a dl, whether it makes a blind bit of difference, I couldn't say.

Gary

rmedek
01-27-2005, 12:57 AM
Well, I agree with both of you so far.

If I was to code this without style, I'd go with a dl, it being a simple reference of band/description. But styling it is hell, because the only way to get the dt/dd to overlap is to use margins/padding and negative positioning/margins; it's killing my layout and making me type too many slashes when I try to describe it.

The original idea was to have the photo be a bg image of the <dt>, but if I use a table, I could argue that the photo is another piece of descriptive data, making it easier to justify a table. Then I can use position:relative and absolute to piece it all together.

It all boils down to my web nerdery, of course... how badly do I want clean code? :D

Graft-Creative
01-27-2005, 01:28 AM
It all boils down to my web nerdery, of course... :D

Heheh wasn't it you who started the recent debate on the br tag? :D Just kidding mate.

I think that if you read up on how tables are read logically by screenreaders etc, and format your tables accordingly - then a table could be a good option - after all, a list of bands, descriptions and photos doesn't exactly sound un-tabular.

Still, bands, descriptions, photos still sounds like a dl to me.

Pfffff who knows? The W3C haven't exactly been helpful on the subject of dl tags - even going so far as to suggest dl as a way of marking up dialogue (makes no sense to me?)



<dl>
<dt>Laurence Olivier</dt>
<dd>Once more into the breach dear friends, or close the wall with our English dead</dd>
</dl>


How can the actor be a definition term?

What's the sense in that?

Gary

jkd
01-27-2005, 01:48 AM
Look at this in Opera:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>definition list fun</title>
<style type="text/css">
/* Key style rules */
dl, dl * { margin: 0; }
dt { display: run-in; }
dt::after { content: "\A\A"; } /* the line-breaks */
dd { display: block; }

/* Your own style rules */
dl {
font-family: Verdana; font-size: small; display: block; width: 400px;
}
dt {
border-bottom: 1px dotted #000;
}
dd {
background-color: lightgrey;
outline: 1px solid darkgrey;
padding: 10px 50px 10px 10px;
}
</style>
</head>
<body>

<dl>
<dt>CSS</dt><dd>A styling language by the W3C to facilitate semantic markup.</dd>
<dt>XSL</dt><dd>An alternative styling language based on XML by the W3C.</dd>
<dt>SVG</dt><dd>A markup language for describing vector graphics by the W3C.</dd>
</dl>

</body>
</html>


It almost works in Safari too, except that Safari doesn't appear to understand content: "\A\A"; as two line breaks (neither does Mozilla, to be fair).

Notice that Gecko does not support display: run-in;, but with it, you can achieve exactly what you want (in Opera and Safari at least).

rmedek
01-27-2005, 03:16 AM
auuughhrhhrggb%#$#45$!!~#

That's so perfect, it's killing me. I can use it, it just won't work in the browsers I need to support (say, the ones every one uses).

I remember reading a bit on display:run-in at www.quirksmode.org, but I saw the huge list of browser incompatablity and gave it up pretty quick.

Here's (http://aztalentsource.com/temp/artists/)what I'm ending up with for now... the page is a work in progress but it seems to be coming together enough. (I should mention I haven't added any hacks for IE yet, that's coming last... so don't send tons of "hey, your site looks funny" posts just yet :D)

hemebond
01-27-2005, 03:29 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>51046</title>
<style type="text/css">
/*
2003 Seamus P. H. Leahy
You may take and improve upon this.
*/

/* The example of the styled table*/

body
{
font-family:sans-seif;
color:#0d161f;
}

table,
tbody,
tr,
td
{
display:block;
}

table,
tbody
{
display:block;
width:100%;
float:left;
}

tr
{
width: 400px;
padding: 5px 5px 5px 5px;
margin: 2px 100% 5px 0;

float: left;

border-width: 1px 3px 3px 1px;
border-style: solid;
border-color: #2B5074;

background-color: #F1F5FA;
}

thead
{
display: none;
}

tr > *{
padding: 0;
margin: 0;
}

/* I am using the :first-child as a way to style each column by itself*/
/* First column */
body table tr td:first-child
{
height: 1em;
padding: 0 .5em 0 .5em;
margin-bottom: 5px;

font-size: 130%;
letter-spacing: .1em;

border-width: 1px 2px 2px 1px;
border-color: #2B5074;
border-style: solid;

background-color:#D4E1EE;
}

/* Second column */
td:first-child + td
{
border-color:1px solid #2b5074;
float: right;
margin: 0 10px 10px 0;
}

td:first-child + td img
{
display: block;
}

/* Third column */
td:first-child + td + td
{
font-size: 90%;
font-weight: bold;
}
</style>

<style type="text/css">
dl,
dt,
dd
{
margin:0;
padding:0;
}
dl
{
width:400px;
color: #0d161f;
}
dt
{
height: 1em;
padding: .25em .5em .25em .5em;

font-size: 130%;
letter-spacing: .1em;

border-width:1px 3px 0 1px;
border-style:solid;
border-color:#2b5074;

background-color:#f1f5fa;
}
dt + dd img
{
float:right;
margin:0.25em .5em;
border:1px solid #2b5074;
}
dt + dd + dd
{
padding:.5em .5em 0 .5em;
min-height:100px;

border-width:0 3px 3px 1px;
border-style:solid;
border-color:#2b5074;

background-color:#f1f5fa;

margin-bottom:.5em;

font-size: 90%;
font-weight: bold;
}
</style>
</head>
<body>
<dl>
<dt>Title</dt>
<dd><img src="/images/1.jpg" alt=""></dd>
<dd>Description. blah blah blah blah blah blah</dd>

<dt>Title</dt>
<dd><img src="/images/1.jpg" alt=""></dd>
<dd>Description. blah blah blah blah blah blah</dd>
</dl>

<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Description</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Title</td>
<td><img src="/images/1.jpg" alt=""></td>
<td>Description. blah blah blah blah blah blah</td>
</tr>
<tr>
<td>Title</td>
<td><img src="/images/1.jpg" alt=""></td>
<td>Description. blah blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

rmedek
01-27-2005, 04:04 AM
Thanks, hemebond, that's an elegant solution to the dl issue...

Of course, it doesn't work in IE. I tried a version of the same approach but skirting the sibling selectors and got nowhere in particular, except drowning in classes and CSS. It might be worth it, though, if I can cough up an IE version.

]|V|[agnus
01-27-2005, 05:40 AM
<dt /> is not inline...

A definition list is the way to go here. The styling is really quite simple. I think you guys are way overthinking this one...

http://sethrasmussen.com/common/css/bands-using-dl.html

Also, the use of <dl /> for dialogue is very sensical. Don't take the names of the elements so literally. Think more about their relationship.

rmedek
01-27-2005, 07:26 AM
|V|[agnus']<dt /> is not inline...

A definition list is the way to go here. The styling is really quite simple. I think you guys are way overthinking this one...

http://sethrasmussen.com/common/css/bands-using-dl.html
I was just going by the w3c's line:

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
Maybe I read that wrong; anyhoo it doesn't matter 'cause it's not like it's hard to throw "dt {display: block}" in there somewhere.

The styling you are using makes sense, and is easy enough... it's just not quite the same style. The trick for me was making the dt align with the top of the image. The image in the dl wasn't information (in my opinion) it was embellishment. So I was attempting to make it a background image for the dt (where my id was applied) and move the dd up to where it needed to be. Semantically, I thought that made the most sense.

If I use the image inline (as I ended up doing), I have to think of it as information. So a table is cool, too, because of the structure (artist/description/photo). Yes?

]|V|[agnus
01-27-2005, 09:57 AM
Hmm, I'd not read that. All I know is, look at how the browsers render it. It is block-level by default in every browser I've seen.

As far as the consistency between your diagram, you didn't show the top of the image aligning with the top of the <dt /> element. Relative positioning will do the trick.

I've updated my example (http://sethrasmussen.com/common/css/bands-using-dl.html) with some additional styling to tie it together(and just look a little nicer). You could use pixel values if you wanted to be absolutely precise, though this looks great if you ask me and is more flexible to varying font sizes.

Edit: It occurs to me. I think there is some confusion about this statement:


The term is given by the DT element and is restricted to inline content.

I believe that refers to the content a <dt /> element may contain. This would make sense. :)

Double edit: And just for the sake of the semantics discussion, I don't really agree with the use of a table in this situation at all.

ronaldb66
01-27-2005, 10:23 AM
I don't really agree with the use of a table in this situation
Ditto; if you go for hard-line semantics, I can't see tabular data in it. Then again: can an image be regarded as a "term" in this context? Seems like HTML is simply lacking in proper elements here.

]|V|[agnus
01-27-2005, 10:26 AM
Well, the image isn't the term the way I've marked it up, and I don't think it should be either. It is describing the 'term', the band.

I mean, in a way it sort of is tabular data. A lot of data is. But the headings in this case are sort of implicit in the content here. A table is not needed to spell it out and rigidly organize it for purposes of analysis or anything.

HTML lacks a lot of description, of course, but it has a lot more than people tend to utilize as well.

rmedek
01-27-2005, 10:30 AM
Ditto; if you go for hard-line semantics, I can't see tabular data in it. Then again: can an image be regarded as a "term" in this context? Seems like HTML is simply lacking in proper elements here.

This is my major issue... I can't really see the image being a term (well, a description). I'd prefer to have it as a background image of either the dd or dt because, as I see it, there are only two REAL bits of data here: the band and the description (being the intro paragraph).

Styling the dl using background images is tricky (at least for me) because moving the dd up using relative positioning leaves a space below it the size of the dd. In some cases, as much as 100px, which is a lot. If I had a block level element around each defintion term I could use absolute positioning within each element.

I've got the tables for now, but I'd like to go with hard-line semantics; in this case, dropping the <img> tag in favor of the raw definition...

In a complete side note, this is the sort of conversation I've been trying to have with my musician-type friends and they all agreed Flash was cool, and could I make them a website that would play a kick-*** song when they clicked on it. Jesus. :D

]|V|[agnus
01-27-2005, 10:35 AM
<img /> is one of the more imperfect elements in HTML, but a lot of HTML is far from ideal. A definition list has more meaning, less weight, and more flexibility with your styling. Giving up all of that to avoid using the <img /> element doesn't seem worth it.

rmedek
01-27-2005, 11:36 AM
Ah hell.

Well, what can I say but that I agree... Okay, so the tables go and the dl comes back with an inline image.

I'm still not buying the fact that an image is an appropriate description of the term in this case, but I can see where it's more appropriate than organizing it as one third of tabular data.

One the one hand, it sucks having to redo this, but on the other the code is much cleaner. Somehow I don't think the actual client cares, though... :rolleyes:

]|V|[agnus
01-27-2005, 04:16 PM
One the one hand, it sucks having to redo this, but on the other the code is much cleaner. Somehow I don't think the actual client cares, though... :rolleyes:

Quite possible, of course. You do what you gotta do, but you know how I feel at least. :cool:

jkd
01-27-2005, 05:21 PM
A semantic curiousity, not necessarily a good suggestion:

<dl>
<dt>Band name</dt>
<dd><img src="bandpicture.jpg" alt="This band produced Awesome Album in 2004...blablabla"/></dd>
</dl>

Then in the CSS:

img::before { content: attr(alt); }


I wouldn't argue this, but some would, but the image itself could be considered a valid description of the band, and then you have the alt text to supplement it in case the image is not displayed. But we force it to be displayed, as it is helpful to visual users.

It's a little bizarre, but alt text is just as valid as normal text, and that includes the image all in the same element. Which may be easier to style. Then again, maybe not. Feel free to mess around with it.

]|V|[agnus
01-27-2005, 06:39 PM
That is an interesting approach, jkd. Though I don't think it's worth arguing either, since I feel alt is being used inappropriately here. The idea of alt, as I understand and agree with it, is to effectively mirror content embedded in the graphic, acting as a backup. This is not quite the same situation here. Your solution, to compare it against the other <dl /> approaches, seems to be effectively using alt to replace a <dd /> element.

jkd
01-27-2005, 08:48 PM
One could argue that the image implicitly embeds the description of the band. If I see an image of Beethoven, implicit associations are made to the various achievements of his career, which would simply be described by the alt text.

brothercake
01-27-2005, 08:54 PM
Maybe the picture and the description are both DD, seperately:


<dl>
<dt>Band name</dt>
<dd><img alt="Picture of band name" /></dd>
<dd>Fuller decsription of photo and band</dd>
</dl>

]|V|[agnus
01-27-2005, 08:57 PM
Agreed, jkd, but we both agree it's not worth arguing, so let's leave that one to the birds. ;)

Br0cake, that is exactly what I thought and did. Seems ideal to me.

hemebond
01-27-2005, 09:49 PM
For all those who think a table is inappropriate, think of a database. Think how this information would be stored in a database table. As for the image, these images are not merely decoration, they are a part of the content.

In fact, typing this out has made me realise a table is the better (more semantic) of the two choices.

]|V|[agnus
01-27-2005, 10:04 PM
For all those who think a table is inappropriate, think of a database. Think how this information would be stored in a database table. As for the image, these images are not merely decoration, they are a part of the content.

In fact, typing this out has made me realise a table is the better (more semantic) of the two choices.

That isn't a very clear or convincing argument at all. By your logic, tables would be nearly the only thing you'd ever need.

Regard my previous statement about the lack of a need for explicit table headers. That, amongst the several other things already stated, shows the considerable case against tables.

Not to mention the simple fact that even if you were so hell bent on stretching the semantics so your itchy table finger could get worked out, you're creating a ridiculous amount of extra styling work than is necessary.

I don't think the <dl /> case can be made any clearer. It's the better option here.

brothercake
01-27-2005, 10:52 PM
Well you know what ... when I was doing my phpBB hacks I was struck by a similar question - how to choose semantics when there are arguments for both alternatives. A lot of data which is in the form of name/value pairs can be equally represented as a definition list or a table - even if it's multi-column, since a DT can have any number of DDs

But does that mean a TABLE is the best representation? Not necessarily. I reserve tables for situations where it's the only viable, or obviously the best, choice, because definition lists are better usability for serial devices.

Despite the fact that a good quality reader like JAWS has a table reading mode, many readers don't - HPR, for example, simply linearises the table from top-left to bottom-right. It's hard to make sense of a table in HPR, and similarly hard in a small-screen device that doesn't have room for a full row.

But with a definition list, each value is linearly preceded by its name, so you never lose track of what relates to what. Therefore, if DL is appropriate, always use it in favour of TABLE, because it has better usability for serial devices.

]|V|[agnus
01-27-2005, 11:05 PM
|V|[agnus']I don't think the <dl /> case can be made any clearer. It's the better option here.

I stand corrected! Well met, Mr. Cake. :cool: The "3-column" suggestion is a bit too arbitrary for my tastes, though.

hemebond
01-27-2005, 11:30 PM
Despite the fact that a good quality reader like JAWS has a table reading mode, many readers don't - HPR, for example, simply linearises the table from top-left to bottom-right. It's hard to make sense of a table in HPR, and similarly hard in a small-screen device that doesn't have room for a full row.So what's the difference between these two examples
<dl>
<dt>Item 1</dt>
<dd>Image</dd>
<dd>Description</dd>
</dl>
<table>
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Image</td>
<td>Description</td>
</tr>
</tbody>
</table>apart from the amount of the code involved? Are you saying that some readers will read the table in a different order to the way it is coded?
But with a definition list, each value is linearly preceded by its name, so you never lose track of what relates to what. Therefore, if DL is appropriate, always use it in favour of TABLE, because it has better usability for serial devices.The definition term is repeated before each definition description is read?

mindlessLemming
01-28-2005, 02:28 AM
So what's the difference between these two examples
<dl>
<dt>Item 1</dt>
<dd>Image</dd>
<dd>Description</dd>
</dl>
<table>
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Image</td>
<td>Description</td>
</tr>
</tbody>
</table>apart from the amount of the code involved?


DL sounds like -- "Item 1 equals Image. Item one equals description"
I think the DT is re-stated for each DD, but I don't have time to load it up on our 'accessible' machine in the library. (how is it accessible if even staff have to book time to use the damn thing??! BLEH!)

table sounds like (in HPR or visually in Lynx) -- "Name, Image, Description. Item1, image, description"
Actually, I think HPR goes as far as stating that the <th>'s ARE in fact headers, but again, no time to test... :(
Bro'cake will know the full deal... :rolleyes:

rmedek
01-28-2005, 08:41 AM
A semantic curiousity, not necessarily a good suggestion:

<dl>
<dt>Band name</dt>
<dd><img src="bandpicture.jpg" alt="This band produced Awesome Album in 2004...blablabla"/></dd>
</dl>

Then in the CSS:

img::before { content: attr(alt); }



That's interesting... I agree with Seth here that it's not quite the most appropriate use in this situation, BUT... what a fantastic way to code a photo gallery, replacing "alt" with "title." That's another semantics discussion away, though...

I've been waffling between the two, table and dl, as I read through these, but I think the biggest issue dividing everything for me is if the image is a part of the description. Which, in this case, in my opinion, it isn't. The page is set up to provide a short intro paragraph of each band, so it makes sense to define the band and describe the band. What the band looks like is a bonus. Sometimes. Those honky tonk guys look pretty scary sometimes.

Now, a list of dates for example, is an excellent table: date, venue, band, info, etc. Every column can be cross referenced with each other for information-- When is the band playing? What venues have a show on Friday? What shows are charity events? etc. etc.

So as far as my particular problem goes, I think I could argue a use for tables but don't necessarily agree with it anymore. As Brothercake and Mindless put it, a table would "read" something like this (extreme paraphrasing coming up): item one- a band, a photo, a description. item 2- a band, a photo, a description. A list would "read" more like this: A band- looks like this. A band- plays this kind of music. Another band- looks like this. The other band- plays this kind of music.

Don't know if any of that made sense but it did at the time I typed it :D

rmedek
02-05-2005, 11:14 PM
Just an update to anyone who's reading this...

I had already finished the <table> method before I had my mind set to change everything to a <dl>, but in the interest of time I figured I'd tackle that after the site was done. So I get everything working nice, wrap it up, and then load up Virtual PC to start hacking though Internet Explorer, when I realized something very important I forgot. Besides the fact that I'm a dumb*** for forgetting this...

IE doesn't support <table> styles. D'oh! Okay, it does, but not very many. No border around the <tr>, no margins in between rows, and most importantly, no "display: block" for anything. &!%%$$###!@@!!!!!!!!!

So I had to recode it anyway using <dl>s, but at least I got it done...

Graft-Creative
02-06-2005, 12:03 AM
Wonder if a 'Semantic Web' forum would be a good idea? Would be useful to have all these discussions in one place?

Gary

rmedek
02-06-2005, 09:18 AM
I'd second that...

Semantics is a tricky, opinionated topic and it'd be great to see what the community thought about certain situations, like this one... at least, I know it certainly helps me grasp the concept.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum