CSS Tabs provide helpful navigation of websites. If you have multiple web pages on your site and you want to make sure the viewers to your site are able to easily navigate to your other pages, then this is for you.
CSS Tabs use both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects.
In this tutorial, I will take you through a lesson on creating different types of tabs in HTML, and I will also assist you in adding some creative design elements. All you need to start with is a simple code editor such as Notepad ++, which is free.
The Essentials of CSS and HTML Tabs
Build the Essential HTML Tab Page
Tabbed navigation uses navigation buttons (tabs) arranged together with the selected tab highlighted to know which web page you have landed on within the website.
Let’s start our HTML page and add in the basic foundation for the navigation tabs.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Navigation Tabs</h1>
<nav>
<ul>
<li><a href="biography.html">Biography</a></li>
<li id="selected"><a href="photography.html">Photography</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="shop.html">Shop</a></li>
</ul>
</nav>
</header>
<section id="content">
<p><!-- Creative content --></p>
<section>
</body>
</html>Next add in some CSS to define the <ul> and <li> within the navigation tab area.
| <!DOCTYPE html> <html> <head> <style type=text/css> nav ul { list-style: none; padding: 0; margin: 0; } nav li { display: inline; border: solid; border-width: 1px 1px 0 1px; margin: 0 5px 0 0; } </style> </head> <body> <header> <h1>Navigation Tabs</h1> <nav> <ul> <li><a href=”biography.html”>Biography</a></li> <li id=”selected”><a href=”photography.html”>Photography</a></li> <li><a href=”publications.html”>Publications</a></li> <li><a href=”shop.html”>Shop</a></li> </ul> </nav> </header> <section id=”content”> <p><!– Creative content –></p> <section> </body> </html> |
Adding in the CSS now further defines our inline (horizontal) tab area.
Add CSS Tab Padding
Now it’s time to add some padding to the tabs by adding a bit more CSS to your styles area.
nav li a {
padding: 0 10px;
}
Notice the difference that adding some CSS padding does for the layout.
Note that by adjusting the padding of the a element box, rather than the li element boxes has the advantage of making the whole width of the tab clickable.
Now add a border base for these tabs to rest on. This gives a better visual representation to the tabs themselves.
Define the Selected Tab
As you recall, there is the active tab in your CSS (<li id=”selected”>), which represents the tab of the page you are currently on. How will the user know where they are if the tab does not appear differently. Let’s make an active tab.
Because vertical padding in inline boxes doesn’t actually push anything out around it, you can simply add this:
#selected {
padding-bottom: 2px;
background: yellow;
}
Adding 2px of bottom padding gives the illusion that the tab is part of the content box area. And of course, providing a colored tab when selected, is going to stand out considerably for your viewer.
Add Rounded Edges to the Tab
Now to add some rounded edges to your tabs simply define the border radius.
Go back to your nav li CSS style area and add define the top left and top right border radius.
nav li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 5px 0 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
The result is as you would expect.
Final Note
As you can see, these meta tags in HTML are absolutely essential to assure that your web page is functioning correctly, identified correctly, and is able to be discovered through search engines.
In our previous discussions in the section “Define Keywords For Search Engines” we discussed the necessity of Search Engine Optimization (SEO) to assure that search engines can find your web site.
The purpose of a website is usually for sharing with a wide audience, and as such, you want to do what you can to assure that the audience can find you and have a great experience once they get there.
Where to Next?
This introduction to the CSS Tabs should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design. CSS Tabs can provide your web viewer with a nice set of options to explore when they reach your page.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>
