Day 6: HTML5 Features – Learn Modern HTML Elements

⚙️ Day 6: HTML5 Features

HTML5 brought powerful new features that made web development cleaner, more semantic, and more multimedia-friendly. Today we explore what HTML5 introduced and how it helps modern web development.

---

📦 Key Features Introduced in HTML5

• Semantic Elements: <header>, <nav>, <main>, <article>, <footer>
• Audio & Video Tags: Embed multimedia easily using <audio> and <video>
• New Input Types: date, email, range, color, etc.
• Canvas & SVG: Drawing and graphics support
• Local Storage: Store data in the browser
• Geolocation API: Access user’s location (with permission)

🎧 Audio & Video Example

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

🧪 New Input Types

<input type="email" placeholder="Enter your email" />
<input type="date" />
<input type="range" min="0" max="100" />
<input type="color" />

🖼 Canvas Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 150, 75);
</script>

📌 Practice Task

• Create a form using input type="email", date, and range
• Embed an audio and video element on a sample page
• Use <canvas> to draw a rectangle

🚀 What’s Next?

In Day 7, we begin our CSS journey! You'll learn how to add beautiful styles to everything you've built so far.

Day 7: HTML Portfolio Mini Project