<div id="tags-wrapper">
 <h2>Example of Audio Element</h2>
 <div id="audio-player">
  <p>Pls play the audio</p>
  <div>
    <audio controls src="https://codedrizzle.com/wp-content/uploads/2021/12/leopard7.mp3">
       <p>Your user agent does not support the HTML5 Audio element.</p>
    </audio>
  </div>
 </div>

<!-- audio tag with alternative source element -->

  <div id="audio-player-2">
  <p>Pls play the audio(example with source element)</p>
  <div>
  <audio controls>
   <source src="https://codedrizzle.com/wp-content/uploads/2021/12/leopard7.mp3"></source>
  </audio>
  </div>
 </div>

<!-- example of blockquote element -->

 <h2>Example of blockquote Element</h2>
<div>
  <figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>“The only real prison is fear, and the only real freedom is freedom from fear.”</p>
    </blockquote>
    <figcaption>—Aung San Suu Kyi</figcaption>
</figure>
  
</div>
<!--Example of time element  -->

 <h2>Example of time Element</h2>
 <div>
    <p><time datetime="2021-07-25">July 25,2021</time></p>
    <p><time datetime="06-25">June 20</time></p>
    <p><time datetime="2017-W40">40th week of 2017</time></p>
    <p>The programme will start in <time datetime="PH2">2 hours</time>     </p>
    <p><time datetime="2020-03-15T9:20.00">9.20am on March15, 2020</time></p>
 </div>

  <!--Example of progress element  -->

   <h2>Example of progress Element</h2>
 <div>
  <label for="comp-progress">your progress in this task:</label>
  <progress id="comp-progress" max="100" value="40">40%</progress>
 </div>

  <!--Example of meter element  -->

 <h2>Example of meter Element</h2>
 <div>
  <label for="rain">chances of rain:</label>
  <meter id="rain"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="74">65%
  </meter>
 </div>


  <!--Example of abbr element  -->

 <h2>Example of abbr Element</h2>
<div>
  <p>First of all to learn code you have to learn HTML and after that to style the HTML elements you should learn CSS</p>
</div>
<div>
  <p>First of all to learn code you have to learn <abbr title="HyperText Markup Language">HTML</abbr> and after that to style the HTML elements you should learn <abbr title="Cascading Style Sheets">CSS</abbr></p>
</div>

  <!--Example of wbr element  -->

 <h2>Example of wbr Element</h2>
<div id="wbr-paragraphs">
  <p>Loremipsumdolositametconsecteturadipiscingelit</p>
  <p>Loremipsumd<wbr>olos<wbr>itametco<wbr>nsecteturadip<wbr>iscingelit</p>   <p>Loremipsumd&shy;olos&shy;itametco&shy;nsecteturadip&shy;iscingelit</p>
</div>

  <!--Example of video element  -->

 <h2>Example of video Element</h2>
<div>
 <video controls>
  <source src="https://codedrizzle.com/wp-content/uploads/2021/12/file_example_MP4_640_3MG-1.mp4" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="https://codedrizzle.com/wp-content/uploads/2021/12/file_example_MP4_640_3MG-1.mp4">link to the video</a> instead.</p>
 </video>
</div>


  <!--Example of picture element  -->

 <h2>Example of picture Element</h2>
<div>

<picture>
    <source srcset="https://codedrizzle.com/wp-content/uploads/2021/12/laptop-large-image.jpg" media="(min-width: 800px)">
   <source srcset="https://codedrizzle.com/wp-content/uploads/2021/12/laptop-medium-image.jpg" media="(min-width: 600px)">
    <source srcset="https://codedrizzle.com/wp-content/uploads/2021/12/laptop-small-image.jpg" media="(min-width: 300px)">
    <img src="https://codedrizzle.com/wp-content/uploads/2021/12/laptop-small-image.jp" alt="laptop-img"/>
</picture>
</div>


  <!--Example of del and ins element  -->

 <h2>Example of del and ins Element</h2>
<div>
<blockquote>
  If you would like to learn the structure than start learning <del cite="HTML is a structural language">CSS</del> <ins>HTML</ins>,  whereas <del>HTML</del> <ins>CSS</ins> will teach you how to style the html elements. 
 </blockquote>
</div>


</div>