Tabs are a row of labels, like the dividers in a ring binder, that switch what appears in a single area of the page. Click "Ingredients" and you see ingredients; click "Reviews" and the same space shows reviews. Only one panel is visible at a time, and the page itself does not reload.
How tabbed content works
All the panels are usually in the page from the start, and JavaScript hides every panel except the selected one. Clicking a label swaps which panel is shown and marks that label as active, usually with an underline or a filled background. Some sites load a panel's content only when its tab is first opened, which saves work if most visitors never look.
The accessible pattern, described in the W3C's ARIA Authoring Practices, gives the row role="tablist", each label role="tab" and each panel role="tabpanel". Keyboard users press Tab to reach the row and the arrow keys to move between labels. Without that markup, screen reader users hear a list of unrelated buttons and may never know hidden content exists. See ARIA for how those roles work.
An example from a product page
A shop selling hiking boots has a lot to say about each pair: description, sizing guide, materials and care, delivery and returns. Stacked one after another, that is a long scroll. Grouped into four tabs under the product photos, shoppers jump straight to the sizing guide, which is the one many of them came for.
Tabs, not navigation
Tabs switch views within one page. The menu at the top of a site sends people to different pages and belongs in the navigation bar. Styling site navigation to look like tabs is fine, but behaviourally the two are different: a tab should not change the URL in a way that loses the rest of the page.
Do you need tabs?
Tabs suit content that is parallel and that people compare or pick from, like plans, product details, or menus for lunch and dinner. On phones, a row of tabs runs out of width quickly, so many designs switch to an accordion on small screens. If visitors need to read everything in order, plain headings on one page are better than either.
Common tab mistakes
- Hiding the one thing everyone needs. Prices or delivery costs tucked in a third tab get missed. Put critical facts in the default panel.
- Too many tabs. Once labels wrap onto two lines or scroll sideways, the pattern stops being scannable.
- Vague labels. "More" and "Info" tell people nothing. Name what is inside.
- No visible active state. If the selected tab looks like the others, people lose track of what they are reading.
- Content only loaded on click with no fallback. If the script fails, the panel stays empty.
Related terms
- Accordion: the vertical, mobile-friendly alternative.
- ARIA: the roles that make tabs work with screen readers.
- Information architecture: deciding which content belongs together.
- UI design: the wider practice tabs belong to.