Tabs are perfect for single-page web applications or for web pages capable of displaying different subjects. We all use tabs when designing websites -- a website may have many tabs to provide different information to users. In HTML, tabs are created like they are buttons. Look at the implementation below to understand it further. 

# Code




<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.content {
  display: none;
  
}
</style>
</head>
<body>
<center>

<h1> Click on following tabs to view content </h1>

<div class="tab">
  <button class="reference" onclick="opentab(event, 'tab1')">Tab 1</button>
  <button class="reference" onclick="opentab(event, 'tab2')">Tab 2</button>
  <button class="reference" onclick="opentab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="content">
  <h3>Tab 1</h3>
  <p>Welcome to Tab number 1</p>
</div>

<div id="tab2" class="content">
  <h3>Tab 2</h3>
  <p>Welcome to Tab number 2</p> 
</div>

<div id="tab3" class="content">
  <h3>Tab 3</h3>
  <p>Welcome to Tab number 3</p>
</div>
<center>

   
</body>
</html> 


codemirror

In the code above, we use the `reference` id to refer to the tab. Tab content can be viewed as part of the id having `tab1`, `tab2`, and `tab3`, respectively. Once we have successfully defined the references and their specific content, we use simple JavaScript to manipulate the output to our preferences. Whenever any tab is clicked, the `opentab` function is called, which takes data and links from the tab using their `id` and uses the `active` module to ensure that only specific information of that tab is displayed. 

How to add tabs in HTML

Tabs organize web content on single-page applications using button-like HTML elements and JavaScript for dynamic display.