One of the most important aspects in which HTML is used worldwide is visual design. HTML controls the way your web pages and websites look to the general public and that is why its program offers impeccable customizing mechanisms that help the programmer design the best-looking web page. One of the most used elements of web design that not only makes the website faster to load but also makes it much more accessible is the HTML tab. Without any further ado, let us jump straight to how we can build our very own tab in HTML.
Table of Contents
What are HTML tabs?
Tabs in HTML are typical placeholders for more information without cluttering the screen. You may have seen tabs in almost every website that you may have visited. However, if you are still struggling to recall what a tab looks like, refer to the following image:
As you can see from the image above, the placeholders for more information on ‘Home’, ‘Pricing’, and ‘About’ are what we know and refer to as a tab in HTML.
As mentioned earlier, these tabs are very easy to build, as you can create multiple tabs in a matter of minutes. If you hover your mouse pointer over a particular tab, it will change color to indicate that it is clickable, and proceed to stay highlighted if we click on that tab. Let us now learn how to create these tabs.
How to create an HTML tab?
In order to create functional tabs in your HTML program, you will need to make use of CSS as well as JavaScript along with your HTML code. If you are a beginner, this may seem like a lot, but it is, in fact, very easy to learn. In this article, we will be teaching you how to create tabs in two ways, one being a very rudimentary tab layout that is perfect if this is your very first attempt, and the other one will involve a little more work.
Contrary to what you may assume, HTML tabs are not created using any specially designated tag. They are built using the ‘list’ tags. We then modify this unordered list to make our tabs. In addition to this, programmers make extensive use of the ‘button’ tag. Let us look at how we can make tabs with both methods.
HTML tab with <button> tag:
You can follow the below examples to see how we can use the button tags to make a tab in HTML.
1. HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML Tabs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<!-- Links to the tabs -->
<div class="tab">
<button class="tablinks" onclick="openCode(event, 'HTML')">HTML</button>
<button class="tablinks" onclick="openCode(event, 'C++')">C++</button>
<button class="tablinks" onclick="openCode(event, 'Python')">Python</button>
</div>
<!-- Body of the tab -->
<div id="HTML" class="tabcontent">
<h3>HTML</h3>
<p>You can learn more about HTML here.</p>
</div>
<div id="C++" class="tabcontent">
<h3>C++</h3>
<p>You can learn more about C++ here.</p>
</div>
<div id="Python" class="tabcontent">
<h3>Python</h3>
<p>You can learn more about Python here.</p>
</div>
<body>
<script src="script.js"></script>
</body>
</html>2. CSS Code:
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Give different styles to the clickable buttons*/
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 12px 14px;
transition: 0.3s;
}
/* Assign colors to the tabs if they are hovered upon */
.tab button:hover {
background-color: #ddd;
}
/* Add a active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Assign a style to the content of the tab */
.tabcontent {
display: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-top: none;
}
3. JavaScript Code:
function openCode(evt, codeName) {
// All variables must be declared
var i, tabcontent, tablinks;
// Hide all elements with class="tabcontent"
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Select all elements with class="tablinks" and remove the "active" class
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Display the current tab, and add an "active" class to that displayed button that opened the tab
document.getElementById(codeName).style.display = "block";
evt.currentTarget.className += " active";
}
OUTPUT:
Let us now look at one more example with more customization to add to your visual design. For this example, we will be using
HTML Tab Example:
1. HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML Tabs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding:20px">
<h1 class="title">Planets</h1>
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="DisplayPanel (0,'#00FFFF')"> Mercury</button>
<button onclick="DisplayPanel (1,'#EEEBD9')"> Venus</button>
<button onclick="DisplayPanel (2,'#0000FF')"> Earth</button>
<button onclick="DisplayPanel (3,'#FF0000')"> Mars</button>
</div>
<div class="tabPanel">Mercury: Content</div>
<div class="tabPanel">Venus: Content</div>
<div class="tabPanel">Earth: Content</div>
<div class="tabPanel">Mars: Content</div>
</div>
<script src="script.js"></script>
</body>
</html>2. CSS Code:
.title{
font-family: sans-serif;
color: #dc2d5e;
text-align: center;
}
.tabContainer{
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer{
height: 15%;
}
.tabContainer .buttonContainer button{
width: 25%;
height: 100%;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-family: sans-serif;
font-size: 18px;
background-color: palevioletred;
}
.tabContainer .buttonContainer button:hover{
background-color: mediumvioletred;
}
.tabContainer .tabPanel{
height: 85%;
background-color: grey;
color: white;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
3. JaveScript Code:
var tabButtons=document.querySelectorAll(".tabContainer .buttonContainer button")
var tabPanels=document.querySelectorAll(".tabContainer .tabPanel")
function DisplayPanel (panelIndex, colorCode){
tabButtons.forEach(function(node) {
node.style.backgroundColor="";
node.style.textcolor="";
});
tabButtons[panelIndex] .style.backgroundColor=colorCode;
tabButtons[panelIndex] .style.color="white";
tabPanels.forEach(function(node) {
node.style.display="none";
});
tabPanels[panelIndex].style.display="block";
tabPanels[panelIndex].style.backgroundColor=colorCode;
}
DisplayPanel (0,'#00FFFF');OUTPUT:
And there you have it. Now you know how to create and customize your own tabs in HTML.