Content ITV PRO
This is Itvedant Content department
Unlocking Table and Form Secrets in HTML
Semantic Elements & Multimedia Embedding
Learning Outcome
2
How to embed videos on a webpage?
3
How to embed audio on a webpage?
1
what are semantic tags
Which HTML Element Can Tidy Up & Clarify Website Layout?
With the help of Semantic Tags
<header>
<section>
<article>
<footer>
Semantic tags:
<header>
<section>
<article>
<footer>
<aside>
Semantic & Non-Semantic Tags In HTML
<header>
<section>
<article>
<footer>
<aside>
<div>
<div>
<div>
<div>
<div>
<span>
Semantic HTML
Non-Semantic HTML
Provide meaning & structure
Purely to present information
Why Semantic Is A Must-Have In Web Design?
Do You Know ​semantic tags help screen readers convey webpage content to visually impaired users
Semantic HTML tags help search engines understand website content
using read mode
Understanding The Semantic Way!
<header>
Website
<footer>
</footer>
</header>
<article>
</article>
<section>
</section>
<section>
</section>
<article>
</article>
<section>
</section>
</body>
Contains introductory part of a webpage
© Copyright
<header>
<footer>
</footer>
</header>
<article>
</article>
<section>
</section>
<section>
</section>
<article>
</article>
<section>
</body>
Header contains introductory part of a webpage
Article is individual chunk of information
Section which groups related content inside article
with
© Copyright
</section>
Website
<header>
<footer>
</footer>
</header>
<article>
</article>
<section>
</section>
<body>
<section>
</section>
<article>
</article>
<section>
</body>
Header contains introductory part of a webpage
Article is individual chunk of information
Section which groups related content inside article
with
© Copyright
Footer contains the closing information of a webpage
</section>
Website
How To Embed Videos On Websites?
By using the `<video>` tag in HTML
<video autoplay loop muted>
<source src= "https:/amazonaws.com/Space/galaxy1.mp4" type="video/mp4">
</video>
Defining the video tag
Video control attributes
Autoplay: Video automatically plays when pages loads
Loop: Restart the video automatically once ends
Mute: Mutes the audio of the video
Video control attributes
Specify the source of the video either in url/path
Used to specify different video formats
Different video formats:
video/webm
video/ogg
video/quicktime
By using the `<audio>` tag in HTML
<audio autoplay loop muted>
<source src= "RandomAudio.mp3" type="audio/mpeg">
</audio>
Defining the audio tag
audio control attributes
Autoplay: audio automatically plays when pages loads
Loop: Restart the audio automatically once ends
Mute: Specifies that the audio output should be muted
Audio control attributes
Specify the source of the audio either in url/path
Used to specify different audio formats
Different audio formats:
audio/mp3
audio/wav
audio/ogg
Semantic Elements & Multimedia Embedding
By Content ITV
