What do tabs look like?

Tabs look something like three index cards lying on top of each other.

The webpage opens to the first tab; when a different tab is selected, that tab is highlighted. When a tab is highlighted the content of that tab is visible and the content of the other tabs is hidden.

The content in the rest of the page (title, lead paragraphs, menu and right margin content) stays the same regardless of the tab that is open.

• How-Tos: Tabs
  

Why use tabs?

If you want to divide your topic into two or three subtopics, use tabs. Tabs reduce scrolling by layering the content. 

Below are some ways to use tabs:

• on a clinic or service page (a topic), subtopics such as: About, Prepare, Follow-up
• on a general health information page about a disease or condition (a topic), subtopics such as: The basics, Diagnosis, Treatment
• on a clinical resource page for a health professional about a particular disease or condition (a topic), subtopics such as: Our program, Practice guidelines, Our team

Best practice

To follow PHSA style for tabs:

• only use tabs if you need to divide your content into two or three subtopics
• make tab headings short and descriptive (one or two words only), and don't let tab headings go over two lines (use no more than 56 characters shared among the titles)
• use sentence case in tab headings
• don't repeat the tab heading in the tab body, unless the tab heading is a short version of a longer heading
• use headings (H2 to H4) to organize information inside the tab body content
• you can use accordions within a tab, but try to have a paragraph or two before the accordion
• if you need to divide your content into more than three sections, use accordions instead of tabs
• if you need to  provide content about the whole topic, put this in the short page content box (which appears above the tabs) or under the first tab (so the content is visible when the page is opened)
  

Example of tabs

The Images page on this website is a good example of tabs.