How To Create Horizontal Tabs In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to create horizontal tabs in HTML, in html, today our topic is about how to give horizontal tab in html. There are many ways with the help of which you are able to give horizontal tab in html. Mostly, when you want to give tab in any tag.
By mostly tab is given by leaving a margin between words in html code by giving tabs. But, this did not works properly. When you open this code in browser, then a little tab is showed there.
Whereas the custom tab gets consumed. So, today our topic is about that how we are able to give horizontal tab in html.
Step By Step Guide On How To Create Horizontal Tabs In HTML :-
As, we already say that there are many ways with the help of which you are able to give tab. The most used methods by beginners is by using pre tag, but that’s not an appropriate way to give tab.
The method which is mostly used by professionals is by using  . This is the way with the help of which you are able to give tab in html.
Here, below we provide you a code in example you can go through this code to see how to use this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> this is tab you can use this for less tab </p> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create a paragraph in which we use  , we can as many tabs as you want. For increase in tabs, you have to add more numbers of   and if you want a little space, then you have to only add 2 or more   these. The full form of this is no blank space.
- You can give tabs as much as you want.
- The fact is that you can also use this anywhere in body. You can use this in p tag, heading tag and in between text line of heading, division as you want.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we specify the method in html that are used to give tab in html.
These attributes are only used to give tab between words, in next sessions, we will also tell you that how you are able to give tab or space between alphabets of a word also. I hope this tutorial on how to create horizontal tabs in HTML helps you.
About Ashish
