Hi, To understand this, please take a look at this google search: https://www.google.com/search?q=book+plot+the+road Basically, when we search things like: "book plot some book name" then google search page shows a tabbed like structure on the top of the page, with tabs like, "summary", "overview", etc. How do I make these tabs in html? Is it possible to make these without the use of any graphics? Thanks
Hi JEET The little tabs that appear on Google search results, such as "overview," "reviews," "summary," and "quotes," are generated by Google algos based on the information available for the search query. For example, if you are searching for a book, Google's algorithm will look for information about that book, such as a summary, reviews, quotes, and other relevant information, and then present those options in the form of tabs at the top of the search results page. If you want your own content to appear in these tabs, you need to provide Google with the relevant information in a structured way, through schema markup on your website. This markup helps Google understand the different elements of your content and present them in a way that is useful to users. However, keep in mind that Google's algorithm is complex and constantly changing, so there is no guarantee that your content will appear in these tabs even if you provide the relevant information.
These tabs are the simple SPAN tags with the suitable CSS styles. You may read about the CSS styles at this web site. https://www.w3.org/Style/CSS/Overview.en.html Have you read the question?
Thanks @Artisan But I already know what CSS is. What I want to know is, how to code those tab like html pages in my own website. What will be the html and css code? Is there an online tutorial for that, or some sample code I can work with? Thanks
Here is the tutorial with the examples. https://www.w3schools.com/cssref/css3_pr_border-radius.php https://www.w3schools.com/cssref/tryit.php?filename=trycss3_border-radius https://www.w3schools.com/cssref/playdemo.php?filename=playcss_border-radius https://www.w3schools.com/cssref/tryit.php?filename=trycss_play_border-radius These examples use the DIV tags, while Google uses the SPAN tags, so that the tabs are in one line.
Thanks @Artisan I also found a tutorial while browsing the links you gave. This one: https://www.w3schools.com/howto/howto_js_tabs.asp Turns out that I am already doing something similar on my websites, minus hiding the tabContent divs. I am instead loading content from those tabContent divs into another empty div of mine, the empty div is just below the buttons. Thanks for helping!
Sorry, JEET, I read your question wrong. Thanks, Artisan for correcting me. Here's the sample code <div class="search-filters"> <ul> <li class="active"><a href="#">All</a></li> <li><a href="#">News</a></li> <li><a href="#">Images</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Maps</a></li> </ul> </div> HTML: .search-filters { display: flex; align-items: center; justify-content: center; margin: 20px 0; } .search-filters ul { display: flex; list-style: none; padding: 0; margin: 0; } .search-filters li { margin-right: 10px; } .search-filters li a { display: block; padding: 5px 10px; border-radius: 5px; background-color: #f2f2f2; color: #333; text-decoration: none; } .search-filters li.active a { background-color: #4285f4; color: #fff; } Code (CSS):
@Sumit_Singh Thanks for the code. I will try that. Right now I am doing it like below, but in my case screen readers are not reading the button as "tab", only reading it as "button", while in case of google, the screen readers are reading it as "overview tab", "books tab", etc: <p> <button onclick=" document.getElementById('contentDIV').innerHTML = document.getElementById('div1').innerHTML "> Show DIV1 data </button> <button onclick=" document.getElementById('contentDIV').innerHTML = document.getElementById('div2').innerHTML "> Show DIV2 data </button> </p> <div id="contentDIV"></div> <div id="div1" style="visibility: hidden;"> Some content here </div> <div id="div2" style="visibility: hidden;"> content of div2 here </div> Code (markup):
You have taken a button instead of a list as I have in my code so you need to write custom CSS to make it a tab. As I have made some changes in my code according to your need. <!-- Online HTML, CSS and JavaScript editor to run code online. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Browser</title> </head> <style> .search-filters { display: flex; align-items: center; justify-content: center; margin: 20px 0; } .search-filters ul { display: flex; list-style: none; padding: 0; margin: 0; } .search-filters li { margin-right: 10px; } .search-filters li { display: block; padding: 5px 10px; border-radius: 5px; background-color: #f2f2f2; color: #333; text-decoration: none; } .search-filters li.active { background-color: #4285f4; color: #fff; } </style> <body> <div class="search-filters"> <ul> <li onclick="document.getElementById('contentDIV').innerHTML = document.getElementById('div1').innerHTML">All</li> <li onclick="document.getElementById('contentDIV').innerHTML = document.getElementById('div2').innerHTML">News</li> <li>Images</li> <li>Videos</li> <li>Maps</li> </ul> </div> <div id="contentDIV"></div> <div id="div1" style="visibility: hidden;"> Div 1 All </div> <div id="div2" style="visibility: hidden;"> Div 2 News </div> <script src="script.js"></script> </body> </html> HTML:
Thanks, actually, I needed to add attribute role="tab" in the button, to make it a tab button. Thanks for the code, it helped a lot. Thanks