Tabs can be used on a website as a way of dividing content into meaningful sub-sections and can be used to prevent the need for multiple pages around a similar topic.
Tabbed content occupies less screen space so the user can intuitively and efficiently access relevant content.
- Do group related content into tabs
- Do arrange the tab labels in an order that makes sense to your user.
- Do write short tab labels using plain language. Tab labels should usually be one or two words as short labels are easier to read.
- Do follow the College style guide for capitalisation of headings when writing tab labels.
- Do keep content succinct and to the point, try using; lists, data graphics or short paragraphs of text.
- Do use pictures or videos to display visually appealing content within the tab.
- Don’t use tabs if users would need to see the content from multiple tabs simultaneously.
- Don’t just use tabs to reduce the page length, ensure the tab content is related.
- Don’t use all CAPS for tab labels.
- Don’t use incorrect heading sizes in the tab content. The College tab content area defaults to a H4.
- Don’t have more than one set of tabs on a page. A row of six tabs is the maximum allowed on the College website, if you need more tabs you can use an accordion as an alternative option.
Look at this example of a tab used in the correct format on the College website.
Find out how to build Tabs in Site Manager.
You may also find it useful to read our tips for using accordions because, on the main College website, tabs appear as accordions for mobile users.