Eionet
Eionet’s software tools
Networking improving Europe's environment
Tabs on webpages
Tabs are a way to shorten a page. If you have a very long page that naturally partitions into sections. you can split it up and implement tabs. This lets the user click rather than scroll to get to the correct place on the page, and it delivers an overview of the main sections of the page as tab titles.
EUNIS does it correctly. This is a screen dump of the
factsheet
for the species Acrocephalus dumetorum:
From this principle follows:
- All pages that participate in the tab-menu must have the same tabs in the same sequence.
- The current tab must "stand out", as if it is on front.
- The tab-menu is not a way to indicate website structure. One can imagine a website consisting of a number of top-level folders. Tabs could be used to select one top-level folder, and then all pages under that folder has the tab highlighted. This is not allowed.
In Eionet we use the Sliding doors principle. We do not use the sliding door graphics. We have our own.
Example
<div id="tabbedmenu">
<ul>
<li id="currenttab"><span>Current</span></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
</ul>
</div>
<div id="tabbedmenuend"></div>
