How to Create Horizontal Tabs in HTML: 3 Easy Steps

Creating horizontal tabs in HTML is an effective way to organize content on a webpage. Tabs allow users to navigate between different sections without reloading the page, enhancing user experience and improving content presentation.

In this tutorial, we will guide you step-by-step on how to create horizontal tabs using HTML, CSS, and JavaScript. We will also discuss ways to customize them to fit your specific design requirements.

How to Create Horizontal Tabs in HTML

Step 1: Add HTML

The first step is to create the HTML structure for the tab buttons and content sections. Each section will be hidden by default and revealed when its corresponding button is clicked.

<div id="Home" class="tabcontent">
  <h1>Home</h1>
  <p>Welcome to our website! Explore our content and learn more about us.</p>
</div>

<div id="Services" class="tabcontent">
  <h1>Services</h1>
  <p>We offer a variety of services to cater to your needs.</p>
</div>

<div id="About" class="tabcontent">
  <h1>About Us</h1>
  <p>Learn more about our mission, vision, and values.</p>
</div>

<div id="Contact" class="tabcontent">
  <h1>Contact</h1>
  <p>Get in touch with us for more information.</p>
</div>

<button class="tablink" onclick="openTab('Home', this, '#FF5733')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openTab('Services', this, '#33FF57')">Services</button>
<button class="tablink" onclick="openTab('About', this, '#3357FF')">About</button>
<button class="tablink" onclick="openTab('Contact', this, '#FF33A8')">Contact</button>

Explanation of the HTML Code:

This HTML structure is designed to create a tab-based navigation system that allows users to switch between different sections without reloading the page.

1. Tab Content Sections (<div class="tabcontent">):

Each <div> represents a different tab content section. These sections are initially hidden and are displayed when their corresponding tab button is clicked.

• <div id="Home" class="tabcontent">: This is the content area for the “Home” tab.
• <div id="Services" class="tabcontent">: This is the content area for the “Services” tab.
• <div id="About" class="tabcontent">: This is the content area for the “About Us” tab.
• <div id="Contact" class="tabcontent">: This is the content area for the “Contact” tab.

Each section contains:

• An <h1> tag that acts as the title.
• A <p> tag that provides relevant information.

2. Tab Buttons (<button class="tablink">):

Each <button> represents a clickable tab that displays its corresponding content when clicked.

• onclick="openTab('Home', this, '#FF5733')": Calls the openTab function, which displays the “Home” section and changes the button’s background color to #FF5733 (orange-red).
• id="defaultOpen": Ensures the “Home” tab is opened by default when the page loads.
• Similar buttons exist for “Services,” “About,” and “Contact,” each calling openTab() with their respective tab IDs and colors.

3. Interaction Mechanism:

When a user clicks a tab button:

• The openTab() JavaScript function is triggered.
• It hides all tab content sections (class="tabcontent").
• It displays only the selected tab section by matching its id.
• The background color of the clicked button changes to provide a visual indicator.

Step 2: Add CSS

We will now style the tab buttons and content sections to create an appealing layout. The styles ensure a clean and user-friendly interface.

/* Style the tab buttons */
.tablink {
  background-color: #444;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
  transition: background-color 0.3s;
}

/* Change background color of buttons on hover */
.tablink:hover {
  background-color: #666;
}

/* Set default styles for tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
  border-top: 2px solid #ddd;
  font-size: 18px;
}

/* Style each tab content individually */
#Home {background-color: #FF5733;}
#Services {background-color: #33FF57;}
#About {background-color: #3357FF;}
#Contact {background-color: #FF33A8;}

Explanation of the CSS Code:

The CSS styles define the appearance of the tab navigation system, including the tab buttons and the tab content sections.

---

1. Styling the Tab Buttons (.tablink)

.tablink {
  background-color: #444;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
  transition: background-color 0.3s;
}

• background-color: #444; → Sets the default background color of the tab buttons to dark gray.
• color: white; → Ensures the button text is white for better contrast.
• float: left; → Aligns the buttons horizontally, making them appear as tabs.
• border: none; & outline: none; → Removes the button border and default outline to create a sleek design.
• cursor: pointer; → Changes the cursor to a pointer when hovering over the buttons.
• padding: 14px 16px; → Adds space inside the button for better readability.
• font-size: 17px; → Sets the text size inside the buttons.
• width: 25%; → Ensures each tab button takes up an equal portion of the available space (4 buttons → 25% each).
• transition: background-color 0.3s; → Adds a smooth transition effect when the button color changes.

---

2. Hover Effect for Buttons

.tablink:hover {
  background-color: #666;
}

• background-color: #666; → Changes the button background to a lighter gray when hovered over.
• This provides visual feedback to users.

---

3. Styling the Tab Content (.tabcontent)

.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
  border-top: 2px solid #ddd;
  font-size: 18px;
}

• color: white; → Sets the text color inside each tab content to white.
• display: none; → Hides all tab content sections by default. The JavaScript function will reveal the active tab.
• padding: 50px; → Adds space around the content for better readability.
• text-align: center; → Centers the text inside each tab content.
• border-top: 2px solid #ddd; → Adds a subtle border at the top to visually separate the content from the buttons.
• font-size: 18px; → Increases the text size for readability.

---

4. Individual Tab Background Colors

#Home {background-color: #FF5733;}
#Services {background-color: #33FF57;}
#About {background-color: #3357FF;}
#Contact {background-color: #FF33A8;}

• Each tab content section has a distinct background color for differentiation:
  • Home → Orange-red (#FF5733)
  • Services → Bright green (#33FF57)
  • About → Deep blue (#3357FF)
  • Contact → Pink (#FF33A8)
• This helps users quickly identify different sections.

---

Step 3: Add JavaScript

The following JavaScript function will control tab switching, ensuring a smooth user experience.

function openTab(tabName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  document.getElementById(tabName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Open the default tab on page load
document.getElementById("defaultOpen").click();

JavaScript Explanation

This JavaScript function enables the tab-switching functionality for the horizontal tabs. It ensures that only one tab’s content is visible at a time while updating the appearance of the tab buttons accordingly.

---

1. Function Declaration

function openTab(tabName, elmnt, color) {

• openTab(tabName, elmnt, color) → This function is called when a tab button is clicked.
• tabName → The ID of the tab content that should be displayed.
• elmnt → The button element that was clicked.
• color → The background color that should be applied to the clicked button.

---

2. Hiding All Tab Content

var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}

• document.getElementsByClassName("tabcontent") → Retrieves all tab content <div> elements.
• for loop → Iterates through each tabcontent element.
• tabcontent[i].style.display = "none"; → Hides all tab content sections by setting their display style to "none".

---

3. Resetting Tab Button Colors

tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
  tablinks[i].style.backgroundColor = "";
}

• document.getElementsByClassName("tablink") → Retrieves all tab buttons.
• for loop → Iterates through each tab button.
• tablinks[i].style.backgroundColor = ""; → Resets the background color of all buttons.

---

4. Displaying the Selected Tab

document.getElementById(tabName).style.display = "block";
elmnt.style.backgroundColor = color;

• document.getElementById(tabName).style.display = "block"; → Displays the clicked tab’s content.
• elmnt.style.backgroundColor = color; → Changes the clicked button’s background color to the specified color.

---

5. Automatically Opening the Default Tab

document.getElementById("defaultOpen").click();

• document.getElementById("defaultOpen") → Finds the tab button with id="defaultOpen".
• .click(); → Simulates a click event on the default tab to display it when the page loads.

---

Additional Customizations

To make our tab system even more interactive and user-friendly, we can incorporate animations, responsive design, and the ability to add more tabs easily.

---

1. Adding Fade-in Animation for a Smoother Transition

By default, when switching tabs, the content changes instantly. We can enhance the user experience by adding a fade-in animation to make the transition smoother.

CSS for Fade-in Effect

/* Add fade-in animation */
.tabcontent {
  animation: fadeEffect 0.5s ease-in-out;
}

@keyframes fadeEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}

How It Works

• The animation: fadeEffect 0.5s ease-in-out; rule applies a fade-in effect to all tab content.
• The @keyframes fadeEffect animation smoothly increases the opacity from 0 (hidden) to 1 (fully visible) over 0.5 seconds.

---

2. Making the Tabs Responsive for Smaller Screens

For smaller screens, we should adjust the layout so that the tabs stack vertically instead of being displayed in a row.

CSS for Responsive Tabs

@media screen and (max-width: 600px) {
  .tablink {
    width: 100%; /* Stack buttons vertically */
  }
}

How It Works

• The @media rule applies styles only when the screen width is 600px or smaller.
• The .tablink { width: 100%; } rule makes each tab button take up the full width, creating a stacked layout instead of a horizontal row.

---

3. Adding More Tabs Easily

You can extend the number of tabs by duplicating the existing code structure for both HTML, CSS, and JavaScript.

Example: Adding a “Portfolio” Tab

Updated HTML

<div id="Portfolio" class="tabcontent">
  <h1>Portfolio</h1>
  <p>Check out our latest projects and work samples.</p>
</div>

<button class="tablink" onclick="openTab('Portfolio', this, '#FFC300')">Portfolio</button>

Updated CSS

#Portfolio { background-color: #FFC300; }

No Changes are Needed in JavaScript!

Since the JavaScript function openTab() dynamically selects tabs based on the provided id, no modifications are required in the script.

---

Conclusion

By following these steps, you have successfully created horizontal tabs in HTML. This tab system enhances user experience by allowing seamless content navigation without reloading the page. You can customize the styles, colors, and animations as needed for your website.

Try implementing this and experimenting with different designs, animations, and additional features to make it more interactive and visually appealing!