Multimedia & Semantic HTML

1. Welcome and Icebreaker:

• Icebreaker: “If you could embed any media (image, audio, or video) on your homepage, what would it be?”

2. Outline the Session:

• Agenda:
  • Embedding images, audio, and video
  • Using semantic elements: <header>, <nav>, <article>, <footer>
• Learning Outcomes:
  • Embed multimedia in HTML
  • Use semantic tags for better structure and accessibility
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

Multimedia elements like <img>, <audio>, and <video> allow you to add rich content to web pages. Semantic elements (e.g., <header>, <nav>, <article>, <footer>) give meaning to page structure, improving accessibility and SEO.

4. Live Coding Demonstration:

Example of multimedia and semantic elements:

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a>
  </nav>
</header>
<article>
  <h2>Welcome!</h2>
  <img src="welcome.jpg" alt="Welcome image">
  <audio controls>
    <source src="intro.mp3" type="audio/mpeg">
  </audio>
  <video controls width="250">
    <source src="intro.mp4" type="video/mp4">
  </video>
  <p>This is a sample article with multimedia content.</p>
</article>
<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

• Step-by-step:
  • Use <img> for images (with alt text for accessibility).
  • Use <audio> and <video> for media (with controls).
  • Use semantic tags to organize content.
• Best Practice: Always provide alt text for images.
• Common Pitfall: Forgetting to close media tags or omitting controls.

5. Tasks:

• Exercise:
  • Create a new HTML file.
  • Add a header and navigation bar.
  • Embed an image, audio, and video (use placeholder links if needed).
  • Use <article> and <footer> to structure your content.