HTML Tags Continued (colgroup, optgroup, hgroup, datalist, fieldset, meter, details, menu tags)

            
In this session you will learn the following tags (Click on the tag to view the code)
              
           

            

        

          

          
          

          

              

                  
              

          

          

          
          

<abbr> element in html


 Tag is used for displaying the contact information.





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
     
  </head>
  <body>
      <abbr title="Internet Web Programming">IWP</abbr>
  </body>
  </html> 


Output

image showing use of abbr tag in html




<address> - element in HTML



  address tags are used for displaying address information in italics. Code is given below






  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <body>
      Hello Welcome to my Webpage
     <address>
      Satish C J <br>
      Vit University <br>
      Vellore <br>
      India <br>
     </address>
     Thanks for Visiting my Webpage
  </body>
  </html>


Output

image showing use of address element in html




<caption> element in HTML



  <caption> is used for giving a caption to your table.  
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
      <style>
      table, th, td {
          border: 1px solid black;
          width: 200px;
        }
      </style>
  </head>
  <body>
      Hello Welcome to my Webpage
     <table>
      <caption>Marks of Students</caption>
      <tr><td>Satish</td><td>20</td></tr>
      <tr><td>Ram</td><td>30</td></tr>
     </table>
  </body>
  </html> 
 


Output

image showing use of caption tag




<code> element in HTML



 code tag is used for displaying computer code to the user 
 below
 
      



  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<body>
    Hello Welcome to my Webpage
   <code>
    class test
    {
        String name;
        String address;

        public static void test()
        {
            System.out.println("hello");
        }
    }
   </code>
</body>
</html>
 

  
Output

image showing use of audio tag




<colgroup> element in HTML



 colgroup is used for grouping columns in a table. The demo code is given 
 below
 
      



  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
      <style>
      table, th, td {
          border: 1px solid black;
          width: 200px;
        }
      </style>
  </head>
  <body>
      Hello Welcome to my Webpage
     <table>
      <colgroup>
          <col style="background-color: bisque;">
          <col span="2" style="background-color:aqua">
      </colgroup>
      <caption>Marks of Students</caption>
      <tr><td>Satish</td><td>20</td><td>Maths</td></tr>
      <tr><td>Ram</td><td>30</td><td>Physics</td></tr>
      <tr><td>Tom</td><td>40</td><td>Java</td></tr>
     </table>
  </body>
  </html>

  
Output

image showing use of audio tag






<datalist> tag in html 



  Supports auto complete feature with input tags. Demo code and ouput given below





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
    
  </head>
  <body>
      <form>
      Select your Subject
      <input list="subjects" name="subject" id="subject">
      <datalist id="subjects">
          <option value="Java">Java</option>
          <option value="Os">OS</option>
          <option value="Networks">Networks</option>
          <option value="DBMS">DBMS</option>
      </datalist>
      <input type="submit">
  </form>
  </body>
  </html>

  
Output

  image displaying the use of datalist tag in html




<dl> tag in html



  Creates a description list with the item name and description for the item.
 

 



  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<body>
   <dl>
    <dd>Car</dd>
    <dt>Has four Wheels</dt>
    <dd>Bike</dd>
    <dt>Has two wheels</dt>
   </dl>
</body>
</html>
  

    
Output

  image the use of dl tag in html




<del> tag in HTML



  del tag defines the content that has been deleted from the document. Demo code and output 
  is given below. 
   

 



  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<body>
  Satish teaches <del>Java</del> IWP
</body>
</html>  

  
Output

  image showing page with div tags




<details> element in html



  Provides the summary and for a paragraph. The code and output is given below.
   

  



  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<body>
  <h1>Welcome to my Webpage</h1>
  
  <details>
    <summary>Internet Web Programming</summary>
    <p>This is a subject where in you need to learn many languages</p>
  </details>
</body>
</html>   


Output

image showing the use of details tag in html




<fieldset> element in HTML



  <fieldset> tag is used for grouping elements. Code and output is shown below.
    

    



  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<style>
    #t1{
        width:300px;
    }
</style>
<body>
  <h1>Welcome to my Webpage</h1>
  <form>
  <fieldset id="t1">
    <legend>IWP Class Form</legend>
        <label for="username">Enter your Username</label>
        <input type="text"> <br>
        <label for="password">Enter your Password</label>
        <input type="password">
  </fieldset>
</form>
</body>
</html>
  

  
Output

  image showing using of fieldset tag in html




<figcaption> element in HTML 



  <figcaption> element is used for giving a caption to a figure. 
  Demo code and output is given below.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <style>
      #t1{
          width:300px;
          background-color: aquamarine;
      }
  </style>
  <body>
    <h1>Welcome to my Webpage</h1>
    <figure>
      <img src="matrix.jpg" alt="matrix image">
      <figcaption>Fig: Matrix</figcaption>
    </figure>
  </body>
  </html> 

  
Output

  matrix image the the caption matrix






<hgroup> element in HTML 



  <hgroup> is used for grouping heading and paragraph elements together.
  Demo code and output is given below.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <style>
      #t1{
          width:300px;
          background-color: aquamarine;
      }
  </style>
  <body>
    <hgroup>
    <h2>Internet Web Programming</h2>
    <p>You need to learn html ,css, javascript and php</p>
  </hgroup>
  </body>
  </html> 

  
Output

  image showing a page with breaks






<menu> element in HTML 



  <menu> is used for creating menus. Used as an alternative for UL tag.
 Demo code and output is shown below.
 





  alternative to ul tag
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <style>
      #t1{
          width:300px;
          background-color: aquamarine;
      }
  </style>
  <body>
    <menu>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </menu>
  </body>
  </html> 

  
Output

  image of menu is shown






<meter> element in HTML 



  <meter> is used for displaying a guage to the users.
  Demo code and output is given below.
 





  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML tutorial</title>
</head>
<body>
 <h1>Performance of students</h1>
  <label for="Satish">Satish</label>
  <meter id="s1" value="20" min="0" max="100"></meter>
  <label for="Mathew">Mathew</label>
  <meter id="s1" value="50" min="0" max="100"></meter>
</body>
</html> 

  
Output

  displaying a gauge using meter tag in html






<optgroup> element in HTML 



  <optgroup> is used for grouping choices in a drop down menu.
  Demo code and output is given below.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <body>
   <label for="countries">Select Your Country</label>
    <select name="countries" id="country">
      <optgroup label="Asia">
        <option value="India" selected>India</option>
        <option value="India">Pakistan</option>
        <option value="India">Srilanka</option>
      </optgroup>
      <optgroup label="North America">
          <option value="India">US</option>
          <option value="India">Canada</option>
          <option value="India">Mexico</option>
        </optgroup>
    </select>
  </body>
  </html>  

  
Output

  image showing the use of optgroup tag






<noscript> element in HTML 



  <noscript> element executes when the script tag is not running in systems 
  where scripts are disabled. Demo code and output is given below.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <body>
   <script>
        function test()
        {
           document.write("hello world");
        }
        test();
   </script>
   <noscript>
    Sorry the script is disabled in your system.
   </noscript>
  </body>
  </html>   

  
Output

  image showing hello world







<sup> and <sub> element in HTML 



  <sup>  element is used for superscripts and <sub> is used for subscripts in html.
  Demo Code and output is given below.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML tutorial</title>
  </head>
  <body>
   <h1>Performance of students</h1>
   what is X<sup>2</sup> and Y<sub>2</sub>
  </body>
  </html>  

  
Output

  image showing sentence with superscript and subscript in html