HTML tab

The HTML tab is used to show multiple subjects in one place or to show more content in a very small space. HTML tab is a mixture of CSS and Javascript. Let’s learn how to make a tab in HTML.

Horizontal HTML Tab

If you want to create a Horizontal HTML Tab, then follow the example given below. Let’s know how to create horizontal tabs in HTML.

/ ***** Horizontal Tab in html ***** /

<div class="mainsection">
	<div class="tabs">
		<button class="mytablinks" onclick="days(event, 'Monday')" id="firstentery">Monday</button>
		<button class="mytablinks" onclick="days(event, 'Tuesday')">Tuesday</button>
		<button class="mytablinks" onclick="days(event, 'Wednesday')">Wednesday</button>
		<button class="mytablinks" onclick="days(event, 'Thursday')">Thursday</button>
		<button class="mytablinks" onclick="days(event, 'Friday')">Friday</button>
	</div>

	<div id="Monday" class="mytab">
		<h2>Today is Monday</h2>
	</div>

	<div id="Tuesday" class="mytab">
		<h2>Today is Tuesday</h2>
	</div>

	<div id="Wednesday" class="mytab">
		<h2>Today is Wednesday</h2>
	</div>
	
	<div id="Thursday" class="mytab">
		<h2>Today is Thursday</h2>
	</div>
	
	<div id="Friday" class="mytab">
		<h2>Today is Friday</h2>
	</div>
</div>

/ ***** CSS for html tab ***** /

.mainsection {
    background: red;
}
.mytab {
	padding: 8px 15px;
}
.tabs {
    background: green;
}
.tabs button.active {
	background-color: #00BCD4;
}
.tabs button {
    border: none;
	font-size: 18px;
    background: green;
    color: #fff;
    cursor: pointer;
    padding: 12px 20px;
}

/ ***** JavaScript for html tab ***** /

<script>
	function days(myevent, dayname) {
		var data, mytab, mytablinks;
		mytab = document.getElementsByClassName("mytab");
		for (data = 0; data < mytab.length; data++) {
		mytab[data].style.display = "none";
		}
		mytablinks = document.getElementsByClassName("mytablinks");
		for (data = 0; data < mytablinks.length; data++) {
		mytablinks[data].className = mytablinks[data].className.replace(" active", "");
		}
		document.getElementById(dayname).style.display = "block";
		myevent.currentTarget.className += " active";
	}

	document.getElementById("firstentery").click();
</script>

Vertical HTML Tab

If you want to create Vertical Tab, then follow the example given below.

/ ***** Vertical tab in html ***** /

<div class="mainsection">
	<div class="tabs">
		<button class="mytablinks" onclick="days(event, 'Monday')" id="firstentery">Monday</button>
		<button class="mytablinks" onclick="days(event, 'Tuesday')">Tuesday</button>
		<button class="mytablinks" onclick="days(event, 'Wednesday')">Wednesday</button>
		<button class="mytablinks" onclick="days(event, 'Thursday')">Thursday</button>
		<button class="mytablinks" onclick="days(event, 'Friday')">Friday</button>
	</div>

	<div id="Monday" class="mytab">
		<h2>Today is Monday</h2>
	</div>

	<div id="Tuesday" class="mytab">
		<h2>Today is Tuesday</h2>
	</div>

	<div id="Wednesday" class="mytab">
		<h2>Today is Wednesday</h2>
	</div>
	
	<div id="Thursday" class="mytab">
		<h2>Today is Thursday</h2>
	</div>
	
	<div id="Friday" class="mytab">
		<h2>Today is Friday</h2>
	</div>
</div>

/ ***** CSS for html tab ***** /

.mainsection {
    background: red;
}
.mytab {
	padding: 0px 20px;
	background: green;
	width: 85%;
	float: left;
	color: #fff;
	height: 205px;
}
.tabs {
	width: 15%;
	float: left;
	height: 222px;
}
.tabs button.active {
	background-color: orange;
	color:#fff;
}
.tabs button {
	font-size: 15px;
	display: block;
	background-color: red;
	width: 100%;
	border: none;
	cursor: pointer;
	outline: none;
	text-align: left;
	color: #fff;
	padding: 12px;
}
* {
	box-sizing: border-box
}

/ ***** JavaScript for html tab ***** /

<script>
	function days(myevent, dayname) {
		var data, mytab, mytablinks;
		mytab = document.getElementsByClassName("mytab");
		for (data = 0; data < mytab.length; data++) {
		mytab[data].style.display = "none";
		}
		mytablinks = document.getElementsByClassName("mytablinks");
		for (data = 0; data < mytablinks.length; data++) {
		mytablinks[data].className = mytablinks[data].className.replace(" active", "");
		}
		document.getElementById(dayname).style.display = "block";
		myevent.currentTarget.className += " active";
	}

	document.getElementById("firstentery").click();
</script>

HTML Tab Without JavaScript

If you want to create HTML Tab without using javascript, then you can use bootstrap for that. Keep in mind that you must have “bootstrap.min.css”, “slim.min.js”, and “bootstrap.min.js” files for this.

<div class="content demo1">
    <ul class="nav nav-row" role="tablist">
		<li class="tab-btn">
			<a class="nav-link active" data-toggle="pill" href="#tab1">Tab 1</a>
		</li>
		<li class="tab-btn">
			<a class="nav-link" data-toggle="pill" href="#tab2">Tab 2</a>
		</li>
		<li class="tab-btn">
			<a class="nav-link" data-toggle="pill" href="#tab3">Tab 3</a>
		</li>
    </ul>

    <div class="tab-content demo2">
		<div id="tab1" class="container tab-pane active">
			<h1>This is Tab 1</h1>
			<p>This is just dummy content</p>
		</div>
		<div id="tab2" class="container tab-pane fade">
			<h1>This is Tab 2</h1>
			<p>This is just dummy content</p>
		</div>
		<div id="tab3" class="container tab-pane fade">
			<h1>This is Tab 3</h1>
			<p>This is just dummy content</p>
		</div>
    </div>
  </div>

/ ***** Css for html tab ***** /

.nav-row{
  width: 40%;
}
.tab-content{
  position: absolute;
  width: 446px;
  background: #3ddaaf;
  color: #000;
  padding: 30px;
}
.tab-btn{
  width: 28%;
}
.nav-row .nav-link{
  text-align: center;
  background: #0eaf1b;
  color: #fff;
}
.content{
  padding: 20px;
}
.nav-row .nav-link.active{
  background: #e2dcdc;
  color: #000;
}

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With the u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is text formatting in HTML?
To make the text appear well, the text is formatted with a few HTML tags.

What is BR tag?
br tag is used to break the line.

What is the HTML code for bold?
You can use b tag and strong tag to bold your text.

What does </ B mean in HTML?
b tag means “bold”.

Note: All the examples you have seen inside this article have all been made by us and tested thoroughly. So you can use all these without any difficulty.

Related: 4 tremendous examples of HTML header