🧠 Module 6: Advanced HTML Features

 

Lesson 6.1: HTML5 New Elements

🔹 New Tags:

• <details> / <summary>: Toggle sections
• <dialog>: Modal popup (experimental)
• <mark>, <time>, <meter>, <progress>

🔹 Example:

<details>
  <summary>Click to expand</summary>
  <p>Here is some hidden content!</p>
</details>
        

📝 Assignment:

• Add a FAQ section using <details> and <summary>

Lesson 6.2: Responsive Images

🔹 Tags:

• <picture>: Use different image sources for different devices
• srcset: Provide multiple image resolutions

🔹 Example:

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <img src="large.jpg" alt="Scenic view">
</picture>
        

📝 Assignment:

• Create a responsive image layout with <picture>

Lesson 6.3: Meta Tags and SEO Basics

🔹 Key Meta Tags:

• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <meta name="description" content="A beginner HTML course">

🔹 Open Graph (for social sharing):

<meta property="og:title" content="HTML Course">
<meta property="og:image" content="thumbnail.jpg">
        

📝 Assignment:

• Add meta tags to your project pages
• Test how your page looks when shared on social media (use tools like Meta Tag Preview)