Skip to main content

Tabs

A tab is a division of the content on a webpage. 

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. 

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. 

The kinds of content that works best in tabs are, for example:

  • on a clinic or service page (a topic), subtopics such as: AboutPrepareFollow-up
  • on a general health information page about a disease or condition (a topic), subtopics such as: The basicsDiagnosisTreatment
  • on a clinical resource page for a health professional about a particular disease or condition (a topic), subtopics such as: Our program, Practice guidelinesOur team

Best practice

To follow PHSA style for tabs:

  • don't use only one tab; use tabs only 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.
example of tabs

SOURCE: Tabs ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2017 Provincial Health Services Authority.