HtmlHow-ToBeginner · 3 min read

How to Create Tabs in HTML: Simple Tab Interface Guide

To create tabs in HTML, use a combination of button or a elements for tab headers and div elements for tab content. Use CSS to hide inactive content and JavaScript to switch visible tabs when clicked.

📐

Syntax

Tabs are made of two main parts: tab headers and tab content. Tab headers are clickable elements like button or a tags that let users switch tabs. Tab content is placed inside div elements, each representing one tab's content.

CSS is used to show only the active tab's content and hide others. JavaScript listens for clicks on tab headers and changes which content is visible.

html

<!-- Tab headers -->
<button class="tab-button" data-tab="1">Tab 1</button>
<button class="tab-button" data-tab="2">Tab 2</button>

<!-- Tab content -->
<div class="tab-content" data-tab="1">Content for Tab 1</div>
<div class="tab-content" data-tab="2">Content for Tab 2</div>

💻

Example

This example shows a simple tab interface with two tabs. Clicking a tab header shows its content and hides the other.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Tabs Example</title>
<style>
  .tab-button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #eee;
    margin-right: 0.25rem;
    font-size: 1rem;
  }
  .tab-button.active {
    background: white;
    border-bottom: 1px solid white;
    font-weight: bold;
  }
  .tab-content {
    border: 1px solid #ccc;
    padding: 1rem;
    margin-top: -1px;
    display: none;
  }
  .tab-content.active {
    display: block;
  }
</style>
</head>
<body>

<div role="tablist" aria-label="Sample Tabs">
  <button role="tab" aria-selected="true" aria-controls="tab1" id="tab1-btn" class="tab-button active" data-tab="1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="tab2" id="tab2-btn" class="tab-button" data-tab="2">Tab 2</button>
</div>

<div id="tab1" role="tabpanel" aria-labelledby="tab1-btn" class="tab-content active" data-tab="1">
  <p>This is the content of Tab 1.</p>
</div>
<div id="tab2" role="tabpanel" aria-labelledby="tab2-btn" class="tab-content" data-tab="2">
  <p>This is the content of Tab 2.</p>
</div>

<script>
  const buttons = document.querySelectorAll('.tab-button');
  const contents = document.querySelectorAll('.tab-content');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const tabNumber = button.getAttribute('data-tab');

      // Remove active classes and update aria-selected
      buttons.forEach(btn => {
        btn.classList.remove('active');
        btn.setAttribute('aria-selected', 'false');
      });
      contents.forEach(content => content.classList.remove('active'));

      // Add active class to clicked tab and show content
      button.classList.add('active');
      button.setAttribute('aria-selected', 'true');
      document.querySelector(`.tab-content[data-tab="${tabNumber}"]`).classList.add('active');
    });
  });
</script>

</body>
</html>

Output

A webpage with two tabs labeled 'Tab 1' and 'Tab 2'. Tab 1 content is visible by default. Clicking Tab 2 shows its content and hides Tab 1 content.

⚠️

Common Pitfalls

Not hiding inactive tab content causes all content to show at once.
Forgetting to update aria-selected and roles reduces accessibility.
Using non-semantic elements without roles can confuse screen readers.
Not managing active classes properly can cause tabs to not switch visually.

html

<!-- Wrong: All content visible -->
<div class="tab-content">Content 1</div>
<div class="tab-content">Content 2</div>

<!-- Right: Hide inactive content with CSS and toggle classes -->
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
</style>
<div class="tab-content active">Content 1</div>
<div class="tab-content">Content 2</div>

📊

Quick Reference

Use button elements with role="tab" for tab headers.
Use div with role="tabpanel" for tab content.
Use CSS to hide inactive content (display: none;).
Use JavaScript to switch active tab and content on click.
Update ARIA attributes for accessibility (aria-selected, aria-controls).

✅

Key Takeaways

Create tabs using buttons for headers and divs for content with proper roles for accessibility.

Use CSS to show only the active tab content and hide others.

Use JavaScript to switch active tabs and update ARIA attributes for screen readers.

Avoid showing all tab contents at once by hiding inactive ones with CSS.

Keep tab headers and content linked with matching data attributes or IDs.