Why are tabs using dl and dd?

[jurriaan]

Is this a semantically correct way to do this?

The current HTML for tabs looks like this:

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
...

Is there a reason for using definitions for the tabs? To me this doesn't make much sense.

And also, according to the HTML specs a dl should contain zero of more of this:

one or more dt elements, followed by one or more dd elements

So it looks like it is invalid HTML

[natb19]

Yeh, I was wondering this to...

[voku]

... also the "Magellan"-example in the doku use dl / dd? But it also running with ul / li ...

magellan-doku: http://foundation.zurb.com/docs/components/magellan.html
magellan-ul-li example: http://www.moelleken.org/Lebenslauf/tpl_lebenslauf13

[kelicia]

yeah - really don't like it. see issue #797 too.

[jurriaan]

Tabs don't work with ul / li, didn't know about issue #797 and #1603, maybe the first one can be reopened and this one closed?

[AliceFox]

I'm downgrading because I really question some of these choices. Features removed (deep linking), unnecessary tags required (data-reveal), and I understand wanting to simplify sections even if I liked them but this is just bizarre. I did appreciate that there was a little less CSS this time around, I think Foundation would benefit from a less styled version, but it's back to version 4 for me.

[smileyj68]

We found in practice the sections element was great for quick prototyping and an unholy disaster for actual production work (the enforced styling was way too rigid). Our belief at this juncture is that the tabs / accordion elements combined with either visibility classes or Interchange provide a more robust albeit wordier solution.

I am interested to hear about other ideas for this – it was not an easy decision. As far as tabs are concerned they should be built from UL not DL elements, and we'll be adjusting that in the near future (for a number of elements, actually, by removing the specific tag dependency).

[guymeyer]

"(for a number of elements, actually, by removing the specific tag dependency)."

/me presses imaginary like button.

[smileyj68]

Okay, this will be removed and switched to an agnostic, class-based implementation for 5.3.

[kelicia]

Hoorah!

[andrewcroce]

I would add my support for removing any dependency on specific tags. Any progress on this?

[smileyj68]

Working on it. So many things to do girl. It's on the list.

[ctalkington]

@smileyj68 would be good to make mixins for like tab-container, tab-element etc. so that one can support other structures in cases where you are styling a site that already has the tab output with builtin js.

[smileyj68]

Okay, for now: you can now use the tab component with DLs, ULs, or really any elements at all as long as you put the .tabs class on the container and .tab-title on each immediate child. Boom, baby. 0608559

[pixeline]

very smacss, thanks!

[kelicia]

Awesome!!