1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What are these TABs called and how to code them in html?

Discussion in 'HTML & Website Design' started by JEET, Mar 14, 2023.

  1. #1
    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
     
    JEET, Mar 14, 2023 IP
  2. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #2
    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.
     
    Sumit_Singh, Mar 14, 2023 IP
    JEET likes this.
  3. Artisan

    Artisan Well-Known Member

    Messages:
    615
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    128
    #3
    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?
     
    Artisan, Mar 14, 2023 IP
    JEET likes this.
  4. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #4
    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
     
    JEET, Mar 14, 2023 IP
  5. Artisan

    Artisan Well-Known Member

    Messages:
    615
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    128
    #5
    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.
     
    Artisan, Mar 14, 2023 IP
    JEET likes this.
  6. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #6
    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!
     
    JEET, Mar 14, 2023 IP
  7. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #7
    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, Mar 16, 2023 IP
    JEET likes this.
  8. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #8
    @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):
     
    JEET, Mar 17, 2023 IP
  9. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #9
    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:
     
    Sumit_Singh, Mar 20, 2023 IP
    JEET likes this.
  10. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #10
    You can further modify the code, I just messed it up a little.
     
    Sumit_Singh, Mar 20, 2023 IP
    JEET likes this.
  11. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #11
    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
     
    JEET, Mar 21, 2023 IP
    Sumit_Singh likes this.