HTML5 have a new, very convenient element section which is used to separate content. I tried to implement tabs using this element, because the standard solution on unordered lists (UL) or definition lists (DL) is not semantic, because the tab is not associated with his content area. Finally, one evening I did the first version, “quick and dirty”, but I tried.

So, let’s see the result: HTML5 tabs demo

These tabs have some drawbacks (fixed content area height and some others), so I accept suggestions for improvement (professionals will understand what I mean, when they’re look the sample code).

Updated at 24 dec 2009

В HTML5 есть очень удобные семантичные элементы section, которые используются для разделения контента.
Я попробовал реализовать с их помощью табы, так как стандартное решение на списках UL не является семантичным. В итоге, за вечер был сделан первый вариант, что называется “быстро и грязно”, но я старался.

Итак, смотрим демо: HTML5 tabs demo

Принимаю предложения по улучшению, так как табы имеют некоторые недостатки (профессионалы поймут о чем я, когда посмотрят код примера).