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
[...] This post was mentioned on Twitter by Queiroga, Alain. Alain said: Une première approche des onglets en HTML5: http://bit.ly/7tNc6P [...]
excellent demo
[...] HTML5 Tabs: a first touch A quick article on how to use HTML5 to create tabs in your layout! [...]
Hey, I got a question. How can I put multiple tab sections on a single site?
I mean like this:
-section with tabs with content
-another section with tabs with different content
The problem is if I duplicate de html5 tab code, When I change between the tabs in one section, all the other tabs on the web disappear… why?
How can I solve this?