Home

Chapter 9: Media, iframe & Modern HTML Semantic

Topics we are going to learn in this page:

1. iframe tag
2. video tag
3. audio tag
4. HTML Semantics

Explantion of the topics:

1. iframe

   • The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
   • Insert the "embed" code of the other webpage in to our html document to open that browser window inside our page. Eg: In any YouTube video click on share option then click on "Embed" then the embed code will be shown with iframe tag, copy paste the code into your html document.

   • Example:
     Code:

         <iframe width="560" height="315" src="https://www.youtube.com/embed/I7LrS1z_WNA?si=FZhbl0BC0j6DSYA2&start=445" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                         

     Output

   
   
   
   

   ---

2. video & audio

   • The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
   • The <video> tag contains the width, height, controls and some other attribute as required and a <source> tag for storing the file path
   • The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

   • Example (video):
     Code:

         <video height="720px"  muted controls>
             <source src="./video/wcup23.mp4">
         </video>
                         

     Output

   
   
   
   

   ---

3. semantics

   • A semantic element clearly describes its meaning to both the browser and the developer.
   • In earlier days of web development all the different part of a web page are grouped together with a <div> tag, which represent only grouping without any meaning.Eg: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
   • Now days mordern HTML semantics like  <nav>,  <main>,  <header>,  <footer>,  <summary>,  <time> etc, which are used to group HTML element with a proper meaning. (These are the frequently used groups, so the mordern HTML make them as a seperate element.)
   • Benefits of semantics:
     • Easier Accessibility: It makes easier for screen reader software and other developer to identify deifferent section of the webpage.
     • SEO: It make the website more search engine optimized.
   • No need to remember all the semantics, learn them while doing projects.
   • Example: Go to this w3schools website