How to create tabs in HTML

All web applications have some method of allowing the user to navigate to different sections of the application. Tabs are commonly used to achieve this.

svg viewer

Code

The following code snippet uses HTML, JavaScript, and CSS to create tabs:

Explanation

  • Lines 6-10 create the three buttons that act as tabs. All of them have an onClick handler associated with them.
  • Lines 12-22 create the content to be displayed once the tabs are clicked.
  • Lines 24-44 contain the JavaScript code for the clickHandle function, which is invoked when a tab button is clicked. The function sets the clicked tab to be ​active and displays its corresponding content.
New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved