Introduction

HTML is the internet's foundation. Without it, you wouldn't have any material. While creating a standard web page requires much more than HTML, HTML provides the groundwork for all other technologies used to make a working website. The idea of tabs is used on a stylish and useful website. When you clicked on a navigation button on a website, did pages load instantly? The website may have employed tabs to provide such an almost instantaneous response.

What are Webpage Tabs?

Website tabs are a creative approach to displaying sections of material on demand with the touch of a button. What makes them brilliant is how they can compress what would otherwise be numerous web pages of material into a single page—without the "one-page" component being visible to the user. Even smarter is how this is achieved.

Although there are other techniques, the site often loads all the material from all the pages and then conceals or shows certain information based on which tab the user picks. It's like a magic trick that enables various single-page web apps to be created.

In this tutorial, we'll concentrate on HTML, although we'll briefly mention CSS and JavaScript as needed. Some techniques avoid JavaScript, but this article will utilize it for simplicity.

HTML Tabs in Practice

You may click inside and enlarge each box to get additional details. Each box has its tab. Think about how frustrating it would be to wait for a fresh webpage to load each time you click one of those boxes. Something that seems clumsy is the outcome. Rather than overburdening the viewer with text and images, this arrangement enables you to fit a lot of information into a single web page.

Despite its overall benefits, this method has one significant drawback. For instance, the tabs labeled "Primary," "Promotions," and "Social" load concurrently when a user visits the website, even though they appear when clicked. As a consequence, the website may take longer to load. All other components, however, are instantly operable after the first load.

How to Utilize HTML to Make Tabs

And now for the real challenge: emulating this effect. As was previously explained, this solution uses HTML, CSS, and JS, although several approaches are available to achieve the same functionality.

1. Make a folder first

Make a folder with the files for your website to get started. Then, within, create an empty. html,css, and.js files.

Changing the file extensions (.html,.css, or.js) from what is displayed above will not function. The file names may be whatever you want them to be.

2.Configure HTML.

It's rather easy to set up the HTML itself. Our clickable button components will be contained in a div element that we will build up. Next, add a div element for every "page" we are loading. The content will subsequently be contained in each of those individual div components.

You may put whatever you want in them, but for the sake of simplicity, we'll use text components. Here's an example of what the HTML file may look like:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tabbed Page</title>

    <style>

        .tab-container {

            display: flex;

        }

        .tab {

            padding: 10px;

            cursor: pointer;

            background-color: #f0f0f0;

            margin-right: 10px;

        }

        .tab-content {

            display: none;

            padding: 10px;

            border: 1px solid #ccc;

        }

        .active-content {

            display: block;

        }

    </style>

</head>

<body>

<div class="tab-container">

    <div class="tab" onclick="openTab('tab1')">Tab One</div>

    <div class="tab" onclick="openTab('tab2')">Tab Two</div>

    <div class="tab" onclick="openTab('tab3')">Tab Three</div>

</div>

<div id="tab1" class="tab-content active-content">

    <h2>Content for Tab One</h2>

    <p>This is the content for Tab One.</p>

    <p>Feel free to add any additional content here.</p>

</div>

<div id="tab2" class="tab-content">

    <h2>Content for Tab Two</h2>

    <p>This is the content for Tab Two.</p>

    <p>You can customize this tab with your content.</p>

</div>

<div id="tab3" class="tab-content">

    <h2>Content for Tab Three</h2>

    <p>This is the content for Tab Three.</p>

    <p>Replace this with your content as needed.</p>

</div>

<script>

    function openTab(tabId) {

        // Hide all tab contents

        var tabContents = document.getElementsByClassName('tab-content');

        for (var i = 0; i < tab contents.length; i++) {

            tabContents[i].style.display = 'none';

        }

        // Remove the 'active-content' class from all tabs

        var tabs = document.getElementsByClassName('tab-content');

        for (var i = 0; i < tabs.length; i++) {

            tabs[i].classList.remove('active content);

        }

        // Show the selected tab content and mark it as an active

        document.getElementById(tabId).style.display = 'block';

        document.getElementById(tabId).classList.add('active content);

    }

</script>

</body>

</html>

Unless you are utilizing a platform like Code Pen, HTML, and CSS files must be merged using a link> element contained within the 'head> section of the article. Adding a <script> element at the end of your document is necessary for your JavaScript code to communicate with the HTML. These elements are necessary for the website to include essential information without any styling or functionality.

The CSS link may appear in the following manner:

That is an example of how a script element may be written:

Ensure that your code includes a concluding script element that references the file. If not, you run the risk of your script loading before your HTML components, which can prevent your website from running correctly. This scenario will directly embed the JavaScript code into the HTML file. To access the website's content, click the links in lines 9–13.

For now, disregard the "tab" and "onclick" attributes. Just be aware that when we reach the area of the course that covers CSS and JavaScript, that is how we will refer back to these buttons. Represent all of the tabs or pages of material, respectively. Each material page is included inside its div element, as well as an H2 and a paragraph tag to be shown on the page. Again, this was just basic text, but you could add images or videos. We shall again refer to these things using the "id" and "class" attributes in the future, especially in the CSS section.

With the CSS portion, all of this HTML would seem quite simple at best and easier to navigate. Without further ado, let's go right to the CSS, which is essential for formatting and styling the HTML above.

3. Set up the CSS

The style and formatting of the tabs and their contents depend on the CSS. To show or conceal the content itself, utilize the CSS attribute.

The page's body is styled in lines 1-6. In this instance, we're using it to specify the font across the page and style its backdrop.

The HTML tab buttons' placement on the page is styled in lines 8–12. That is known as the tab container. Here, we are centring the tabs on the page by using justify-content and margin-top.

Specifically, lines 10, 11, and 12 pertain to the div element. Lines 14–18 apply to all elements containing the "tab" class attribute in the HTML file.

Utilizing the tab class element, create an HTML tab

Each tab's content is impacted by lines 20–22. The display property has been set to none, as you can see. Users now have to click on the buttons to access the tab content since this stops it from loading when the page loads. The contents of all three tabs would load automatically on the page if this attribute weren't present.

A sample of a tab code in HTML

Once pressed, the tab button is styled according to lines 24–26. Although you may change the background color attribute to any other color you like, I've picked a dark green to indicate that the button was clicked.

The real HTML tab content will be styled on lines 28–30. As the material will show up automatically after the button has been pressed, I've set the display attribute to block. To further customize your tab content, you may add more characteristics below.

Your web page remains functional despite all that HTML and CSS collaboration. All the content would load once on the page if you were to load it now. You will need JavaScript's capabilities to complete the operation.

FAQ

1. Can elements other than the tag with the target attribute be utilized?

The tags may be used with the target property. But unlike the tag, its use with these tags does something distinct.

2. Is target="_blank" required when utilizing the rel="noopener" attribute?

Using the rel="no opener" property is advised to increase security and shield visitors from potentially dangerous websites, even if unnecessary.

3. Can the target property be used to open a link in a particular tab or window?

A unique name for the new tab or window may be specified using the target property. For instance, using target="codedamnWindow" will cause the link to open in a new window or tab called "codedamnWindow." If there is already a tab or window with that name, the link will open in that tab or window simultaneously.

Conclusion

In conclusion, you may improve the user experience of your website visitors by opening links in new tabs with ease by utilizing the HTML target element. You can build safe and user-friendly websites by knowing the many values the target property might take and the significance of the rel="no opener" element. Additionally, JavaScript may be used to achieve the same functionality if necessary.

← Prev Next →

HTMLs Tutorial

HTML5 Advance

Misc