How to Create Tabs with HTML

HTML is the backbone of the internet. Without it, you wouldn’t have any content. Of course, it takes a lot more than just HTML to create your typical web page, but it definitely builds the foundation for all of the other technologies that go into building a functional website.

One cool type of functional website uses the concept of tabs. Have you ever visited a website that seemingly loaded pages instantly upon clicking navigation buttons? It’s quite possible that the site used tabs to make that near-instant response happen.

Learn what HTML tabs are and how to add them to your website.

Table of Contents

• What are website tabs?
• HTML Tabs in Action
• How to Create Tabs with HTML

What are website tabs?

Website tabs are a clever way to show chunks of content on demand at the click of a button. What makes them clever, though, is how they can condense what would be multiple different web pages of content into just one page — without the “one page” part even being apparent to the user. Even more clever, however, is exactly how that is accomplished.

Although there are multiple approaches to this, the site often loads all the content from all the pages at once, then simply hides or displays certain information depending on which tab the user selects. It’s like a magic trick that allows for many single-page web applications to be possible.

In this guide, we’ll focus on the HTML part of the equation, though we’ll briefly touch on CSS and JavaScript as necessary. Some approaches exclude JavaScript, but this guide will use it for simplicity.

HTML Tabs in Action

Let’s take a look at an example of this concept working in action. In fact, this example might be surprising, as it’s something you’ve likely seen before. Behold, Gmail!

You’ll probably be very familiar with the above example, though you might not have realized that Gmail is using the concept of tabs to accomplish this behavior. This provides tremendous benefits for the user experience.

Instead of each part of the inbox being a separate web page, they are simply tabs on the same one, all loaded at once and waiting to be displayed at a moment’s notice.

Can you imagine if you had to wait for a new web page to load every single time you clicked one of those buttons? The result would likely be something that feels clunky.

Though largely beneficial, there’s one notable trade-off to using this technique. For example, though the tabs “Primary,” “Promotions,” and “Social” are being shown instantly upon getting clicked, they were all loaded simultaneously upon visiting the web page.

This can result in a longer load time upon visiting the web page. However, once past that initial load, everything else is ready to go at a moment’s notice.

How to Create Tabs with HTML

Now, onto the actual task of replicating this effect. As previously discussed, this approach contains HTML, CSS, and JS, though there are different ways to accomplish the same behavior.

1. Create a folder.

To start, create a folder that will contain the files for your site. Then, create empty .html, .css, and .js files inside.

The file names can be anything you want them to be, but keep the file extensions (.html, .css, .js) the same as shown above; otherwise, this will not work.

2. Set up the HTML.

Setting up the HTML itself is actually quite straightforward. We are going to set up a div element to contain our clickable button elements. Then, add a div element for each “page” that we are loading. Each of those respective div elements will then contain content.

These can contain whatever you want, but text elements will be used here for simplicity. See below for an example of how the HTML file might look:

Lines 4 and 32 are essential for linking the .css, .js, and .html files all together. These are necessary for the web page to have the basic content without any formatting or functionality.

The script element linking the .js file is on line 32 and not line 5 because it’s good practice to put the scripts at the end of the document. Otherwise, you risk having the script load before your HTML elements, which can break the functionality of your site.

Lines 6 and 13 are just comments for the reader or developer in order to provide context on what each section of code is for.

Lines 7-11 contain the buttons you will click on to display content on the page. Ignore the “tablinks” and “onclick” attributes for now. Just know that’s how we will refer back to these buttons when we get to the CSS and JavaScript portion of the guide.

Lines 14-17, 19-25, and 27-30 are all of the tabs, or pages of content, respectively. Each page of content is contained within its own div element, with h3, p, and a all containing some information to be displayed on the page.

Again, some simple text was used here, but you could put images or videos here. The “id” and “class” properties will again be how we reference these elements later on, specifically in the CSS portion.

Without the CSS portion, all of this HTML would look pretty plain at best and confusing to navigate at worst. So without further delay, let’s move on to the CSS, which is important for formatting and styling our above HTML.

3. Set up the CSS.

The CSS is important for styling and formatting the tabs and their content.  CSS property is also used to display or hide the content itself. Open up the CSS file and put in the following code:

As before, all of the lines entirely in green are comments meant to add context about each section for the reader or developer.

Lines 2-6 here will apply to all elements that have the “tab” class attribute back in the HTML file, which specifically refers to the div element on line 7.

Lines 9-17 will apply to all button elements that are children of elements with the “tab” class attribute. Again for specificity, this refers to the button elements on lines 7-10 of the HTML file in this guide.

Line 20 is special, as it uses a pseudoclass called “:hover” that all elements have by default. This makes it so that when your mouse hovers over any of the buttons referenced in lines 8-10 of the HTML file, it will apply the background color on line 21 to the element.

Line 25 will apply the styling from line 26 to any button with the “active” class. Currently, there are no buttons with such a class, but it will be added a bit later in the JavaScript portion of this guide. You want to separate the active tab from the inactive ones by making it look different to help users keep track of which tab they’re on.

Lines 30-35 will be applied to all elements that have the “tabcontent” class attribute. In our example, this refers back to the divs on lines 14-17, 19-25, and 27-30 from the HTML file.

Now, even with all of that HTML and CSS working together, your web page is still incapable of functionality. If you were to load this up right now, everything would be on the page all at once. To finish the process, you need the power of JavaScript.

4. Set up the JavaScript.

JavaScript is where all of the magic happens. It allows you to change things about your HTML and CSS upon events. In this case, your event will consist of clicking a button with your mouse. The contents of the JavaScript file look something like this:

The entire file is technically just one function called “openTab” which starts on line 1 and ends on line 20. It takes two arguments, “evt” and “tabName,” which refer to the event and name of the tab when clicked. The event, in this case, can be thought of as the mouse clicking on the button, and the tabName will refer to the id attribute of the HTML element we are trying to show.

As usual, the green text on lines 2, 5, 11, and 17 indicates a comment which provides context for the reader regarding the purpose of the code.

Lines 6-9 get an array of all elements containing the class name “tabcontent” and iterate through each one, setting their display property to “none” to hide them. Otherwise, we could end up in a scenario where all of the content would be visible at once when we only intend to show one tab at a time.

Lines 11-15 remove the “active” class name from the buttons in a similar fashion as before, making them all look the same again.

Finally, line 18 makes the content of the element visible. Earlier, the tabName argument passed was “About Me,” so this line of code will get the element with an id of “About Me” and change its display property to “block” so that it can’t be seen. Line 19 will add the “active” class name to the button clicked.

When all is said and done, open up the index.html file in any web browser, and you should have something like this:

Next Steps

Now that you’ve made it through to the end of this guide, you can keep building on top of everything that’s been covered. Not only did you learn about the HTML portion of tabs, but also some CSS and JavaScript magic along the way. These are invaluable skills that can be applied in many web projects going forward.