Post
Ask Question

Using &ltfigure&gt, &ltdetails&gt and &ltarticle&gt tag in HTML5

Introduction 

 
Here in this article, I am going to describe "figure", "details" and "article" tag in Html 5. Now we will discuss each Tag one by one.
 

figure Tag

 
This concept enables a flexible way to embed images on the website.
 

What is Figure Tag in Html 5?

 
In Simple terms "This tag hold set of images as single specific content, and delivers the content to the user with much better look and feel".
 
So, let's get it started off now!!!
 
Step 1: The Complete Code of Figure.html looks like this:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.         <title>templates</title>  
  7.         <meta name="description" content="" />  
  8.         <meta name="author" content="Vijay" />  
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  10.         <link rel="shortcut icon" href="/favicon.ico" />  
  11.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  12.     </head>  
  13.     <body>  
  14.         <div>  
  15.             <header>  
  16.                 <h1 align="center" style="font-family: Verdana; color: Gray">Figure and FigCaption</h1>  
  17.             </header>  
  18.             <div style="font-family: Verdana; font-size: 22">  
  19.                 <p>  
  20.                 Question Arises:   
  21.                     <b>What is Figure Tag ?</b>  
  22.                 </p>  
  23.                 <p style="color: Blue">  
  24.                 In Simple terms "Figure tag hold images as a single specific content, which represents website look and feel good"</p>  
  25.             </div>  
  26.             <div>  
  27.                 <center>  
  28.                     <table>  
  29.                         <tr>  
  30.                             <td>  
  31.                                 <figure style="font-family: Verdana; font-size: 22;">  
  32.                                     <img src="/C:\Users\Vijay\Documents\Toggle0.png" alt="hello" width="300"  
  33. height="450"/>  
  34.                                     <figcaption style="text-align: center">Figure 1:  
  35.                                         <b> ToggleSwitch</b>  
  36.                                     </figcaption>  
  37.                                 </figure>  
  38.                             </td>  
  39.                             <td>  
  40.                                 <figure style="font-family: Verdana; font-size: 22">  
  41.                                     <img src="/C:\Users\Vijay\Documents\Toggle1.png" alt="hello" width="300"  
  42. height="450"/>  
  43.                                     <figcaption style="text-align: center">Figure 2:  
  44.                                         <b> ToggleSwitch On</b>  
  45.                                     </figcaption>  
  46.                                 </figure>  
  47.                             </td>  
  48.                         </tr>  
  49.                     </table>  
  50.                 </center>  
  51.                 <p style="text-align: center; font-family: Verdana; font-size: 22">  
  52.                 I hope this article is useful for you...I look forward for your comments and feedback. Thanks Vijay Prativadi</p>  
  53.             </div>  
  54.             <footer>  
  55.                 <p style="text-align: center; color: Silver; font-family: Verdana; font-size: 22" >© Copyright by Vijay Prativadi</p>  
  56.             </footer>  
  57.         </div>  
  58.     </body>  
  59. </html>  
Step 2: The Output of the Application looks like this:
 
figuretag1.gif
 

details Tag

 
This concept expresses the good look and feel for the website.
 

What is Details Tag in HTML 5?

 
In Simple terms "This tag provides an additional amount of information or hit that is required to process some operation by the user. It can be viewed or hidden by user".
 
So, I think we all are now good to go and implement this concept.
 
Step 1: The Complete Code of Details.html looks like this:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.         <title>templates</title>  
  7.         <meta name="description" content="" />  
  8.         <meta name="author" content="Vijay" />  
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  10.         <link rel="shortcut icon" href="/favicon.ico" />  
  11.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  12.     </head>  
  13.     <body>  
  14.         <div>  
  15.             <header>  
  16.                 <h1 style="text-align: center; color: Gray">Details tag - HTML 5</h1>  
  17.             </header>  
  18.             <div style="font-family: Verdana; font-size: 22">  
  19.                 <details>  
  20.                     <p>Question Arises:   
  21.                         <b>What is Details Tag - Html 5</b>  
  22.                     </p>  
  23.                     <p style="color: Blue">In Simple terms "This tag provides an  
  24. additional amount of information or hit that is requried to process some operation by the user. It can be viewed or hidden by user "</p>  
  25.                     <p>  
  26.                         <ul  
  27. style="color:Red">  
  28.                             <li>This Tag is only Supported in Google Chorme Browser!!</li>  
  29.                         </ul>  
  30.                     </p>  
  31.                 </details>  
  32.             </div>  
  33.             <div style="text-align: center; font-family: Verdana; font-size: 22">  
  34.                 <p>  
  35.                 I hope this article is useful for you....I look forward for your comments and feedback....  
  36.                 Thanks Vijay Prativadi</p>  
  37.             </div>  
  38.             <br>  
  39.                 <footer>  
  40.                     <p style="text-align:center;color: Silver; font-family: Verdana; font-size: 22">© Copyright by Vijay Prativadi</p>  
  41.                 </footer>  
  42.             </div>  
  43.         </body>  
  44.     </html>  
Step 2: The Output of the Application looks like this:
 
detailstag2.gif
 

article Tag

 
This concept made life easier and customizable way of working.
 
So, I think we all are now good to go and implement this concept.
 
The Complete Code of Article.html looks like this:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.         <title>templates</title>  
  7.         <meta name="description" content="" />  
  8.         <meta name="author" content="Vijay" />  
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />  
  10.         <link rel="shortcut icon" href="/favicon.ico" />  
  11.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
  12.     </head>  
  13.     <body>  
  14.         <div style="font-family: Verdana; font-size: 22">  
  15.             <header style="text-align: center; color: Gray">  
  16.                 <h1>Welcome to HTML 5 Article Application</h1>  
  17.             </header>  
  18.             <div>  
  19.                 <article id="article1">  
  20.                     <p>Question Arises:   
  21.                         <b>What is an Article Tag ?</b>  
  22.                     </p>  
  23.                     <p>In Simple   
  24.                         <b>"This tag is used to display some information on website, blogs, forums and many more"</b>  
  25.                     </p>  
  26.                     <ul>  
  27.                         <li>When to Use Article Tag ?  
  28.                             <ul>  
  29.                                 <br>  
  30.                                     <li style="color:Blue">This Tag is used when you want to deliver some interformation to the user, whereby representing it across sites, forums, blog etc... </li>  
  31.                                 </ul>  
  32.                             </li>  
  33.                             <br>  
  34.                                 <li> Advantages of Article Tag ?  
  35.                                     <ul style="color:Blue">  
  36.                                         <br>  
  37.                                             <li>This tag provides flexible way to share the content across Sites, forums and so on... </li>  
  38.                                             <li>This tag is compatible with most of browsers</li>  
  39.                                         </ul>  
  40.                                     </li>  
  41.                                 </ul>  
  42.                                 <br>  
  43.                                     <p style="text-align:center"> I hope this article is useful for you...I look forward for your comments and feedback....Thanks Vijay Prativadi</p>  
  44.                                 </article>  
  45.                             </div>  
  46.                             <footer style="text-align: center; color: Silver">  
  47.                                 <p>© Copyright by Vijay Prativadi</p>  
  48.                             </footer>  
  49.                         </div>  
  50.                     </body>  
  51.                 </html>  
The output of the application looks like this:
 
articletag3.gif
 
articletag4.gif


Similar Articles
MVC Corporation
MVC Corporation is consulting and IT services based company.