HTML & CSS
I'm putting some taxonomical terms in a list, together with a label of "tags", which I think would be best marked up in a definition list. The default output from the CMS (Drupal) is divs, so almost anything would be more meaningful.
But I'm not sure which order it should take. Would you say that "tags" is the definition and the categories are the terms to be defined? This makes more sense to me because "tags" describes the categories; not vice versa.
I might be over-thinking this a bit, but just put it down to curiosity as much as anything.
You look to have the <dd> and <dt> backwards.
A <dt> is effectively a "heading" for one or more <dd>s.
The default display of a <dl> has the <dt> in a larger font and the <dd> indented.
According to my reading of the spec, the order would not matter here. And it seems as valid to have one dd for more than one dt as it is to have one dt with more than one dd. For instance; blue and red (dt) are colours (dd).
My arrangement was deliberate, with one eye on simpler styling/position (just make them inline) and one on reading order.
While it's true that the DTD allows a
dd to appear in a
dl before the first
dt, it is semantically incorrect. A traditional
dl should contain 1-n groups, each of which should contain 1-n
dts with a term, followed by 1-n
dds which define the preceeding
dts in that group. When a
dt follows a
dd, it means that a new term is now being defined.
Also see http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/H40.html
Note, that a
dl is not strictly intended for objective definitions of words. Rather, the
dd is an elaboration on the
I agree with the others - semantically a <dt> should appear before its <dd> given that
dt = Definition Term
dd = Definition Description
It not so much the order as it is the SEMANTICS. A DT can correspond to multiple DDs or vice versa. you have to decide what you mean. HOWEVER, the DT comes first. Thing of it as a "faux list heading" only one level deep. Any DD under a DT( or group of DTs) will be assume to belong to that DT untill the next DT is reached.
The DT appears first because it is essentially the defining instance of the 'term' in question it defines the object the author is describing when it appears in a linear flow and the DD is loosely a description of the term hence comes later.
I think the last 4 posts say exactly the same thing
It's like when someone asks how to make a popup
We were just covering all possible bases to make sure it was clear why the DT logically appears first in the markup. Plus as to why popup windows should only be created via client-side scripting and not markup attributes.
We were just covering all possible bases...
Apart from the fact that, in a group effort to be right, you all missed the main part of my query and failed to answer it. Never mind.
Since the original code example is backwards way around regarding DT and DD that is probably why it didn't get answered how you expected. Perhaps a real example with the actual content might make it easier to visualise. Usually a heading many times is more than apt in many scenarios since DL gets regularly abused just because there is a loose association - as for Drupal I cannot help you there.
I will take another stab at this...
IF "Tags" is your only label.. then maybe that what got every one confused.
These are the possible TWO answers:
1) Assuming you intend to explain what each "tag" is:
<dd> The definition for foo would go here. DD can contain any other tags you need, including DIVs and Ps</dd>
<dd>Alternate definition, if needed</dd>
<dd>Yet another alternate definition, if needed</dd>
<dd> The definion for bar would go here.</dd>
<dd> The definion for etc would go here.</dd>
2) Assuming you DO NOT intend to explain what each tab is:
The really its just a regular old list with a header is the proper semantic to use.
So I guess, my answer to your question is the LABEL of a list in not part of the list. it is in fact a SEPARATE header. Hope I was closer this time.
The whole concept of "tags" makes zero sense to me. I'm pretty sure I've seen them... on Flickr etc. They don't seem to mean anything, have no relation to the image usually, so they just confuse me. Very likely something hip and awesome and I'm too old and stupid to figure it out.
It isn't semantic to use a definition list for tags anyway. Tags are not definitions. What you've described is essentially an unordered list with a heading. @dresden_phoenix has hit the nail on the head.
This topic is now closed. New replies are no longer allowed.