HTML5 introduced semantic elements that give meaning to content and media elements (audio, video) that make websites more interactive. These are very scoring topics in ECET Web section.
📘 Concept Notes
🌐 Semantic Tags in HTML5
- Semantic tags clearly describe their meaning to both the browser and developer.
- They improve SEO, accessibility, and readability.
Common Semantic Tags:
<header>→ Defines the top section of a page/document.<nav>→ Navigation links.<section>→ Groups related content.<article>→ Self-contained content (blog, news).<aside>→ Sidebar info, not core to content.<footer>→ Bottom section (credits, links).<main>→ Represents the main content area.<figure>&<figcaption>→ Used for images with captions.
🎥 Media Tags in HTML5
- Audio Tag
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>- Video Tag
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>- Attributes:
controls→ Shows play/pause buttons.autoplay→ Starts automatically.loop→ Repeats after finishing.muted→ Starts with no sound.
⚙️ Formula
If:
- Semantic usage improves SEO score by
% - Media usage improves user engagement by
% - Overall effectiveness
is given by:
📐 Example
If 
and 
,
So, combining semantic + media boosts overall effectiveness.
🔟 10 Expected MCQs – ECET 2026
Q1. Which HTML5 tag defines navigation links?
A) <nav>
B) <menu>
C) <link>
D) <section>
Q2. Which tag is used for independent, self-contained content?
A) <article>
B) <section>
C) <aside>
D) <header>
Q3. The <footer> element is generally used for:
A) Navigation
B) Author info/credits
C) Image captions
D) Titles
Q4. Which tag specifies the main content of the document?
A) <body>
B) <main>
C) <section>
D) <div>
Q5. The <figure> tag is used along with:
A) <footer>
B) <figcaption>
C) <aside>
D) <caption>
Q6. HTML5 <audio> element does NOT support:
A) MP3
B) WAV
C) OGG
D) AVI
Q7. To make a video play automatically, which attribute is used?
A) controls
B) autoplay
C) loop
D) preload
Q8. Which semantic element represents side content (ads, links)?
A) <aside>
B) <section>
C) <footer>
D) <article>
Q9. If semantic usage = 
and media usage = 
, total effectiveness = ?
A) 70%
B) 80%
C) 90%
D) 70% – 20% = 50%
Q10. Which is NOT a semantic tag?
A) <header>
B) <footer>
C) <div>
D) <article>
✅ Answer Key
| Q.No | Answer |
|---|---|
| Q1 | A |
| Q2 | A |
| Q3 | B |
| Q4 | B |
| Q5 | B |
| Q6 | D |
| Q7 | B |
| Q8 | A |
| Q9 | A |
| Q10 | C |
🧠 Explanations
- Q1 → A:
<nav>is for navigation links. - Q2 → A:
<article>is self-contained content. - Q3 → B:
<footer>usually has credits/author info. - Q4 → B:
<main>shows main body content. - Q5 → B:
<figcaption>gives captions to<figure>. - Q6 → D: AVI is not supported for
<audio>. - Q7 → B:
autoplayplays automatically. - Q8 → A:
<aside>= sidebar/ads. - Q9 → A:
. - Q10 → C:
<div>is non-semantic.
🎯 Why Practice Matters
- HTML5 questions are direct and scoring.
- Easy marks if you memorize tags, attributes, and basic formulas.
- Semantic tags also improve real-world development skills.
