Semantic tabs from dl / dt / dd without scripts

Most recently, I began to master the layout and was surprised to find that Google does not find a single ready-made solution for classic tabs from the list of definitions using only css.
And this is with the current trend of the Internet - semantics.



Under the cut one of the possible solutions.
')


The main feature of the markup is the “wrapper” wrapper:

<div id="wrap"> <dl> <dt id="ft"><a href="#tab1">TAB 1</a></dt> <dd id="tab1">tab1 content</dd> <dt id="st"><a href="#tab2">TAB 2</a></dt> <dd id="tab2">tab2 content</dd> <dt id="tt"><a href="#tab3">TAB 3</a></dt> <dd id="tab3">tab3 content</dd> </dl> </div> 

Without this, it is not easy to overcome the clipping of the outrigger buttons with the necessary overflow. Perhaps there are ways to get rid of this extra div with pseudo-elements or some other dances, but after today's torment I stopped at the current version.

Css without decorations looks like this:

 #wrap, dt { position: absolute; } dl { overflow: hidden; } dt { bottom: 100%; } dd, dl { width: 640px; height: 400px; } #st { left: 92px; } #tt { left: 184px; } 

It's all. A slightly embellished working version can be touched on jsfiddle
When positioning, note that the tab headers are outside the container.