🌐

HTML Intermediate

Semantic layout, richer forms with validation, and embedded media.

3 lessons 5 tasks ⚡ Live compiler

📚 Lessons

1 Semantic structure

Semantic tags describe meaning: <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>. They help search engines and assistive technology.

<header><h1>Blog</h1><nav><a href="#">Home</a></nav></header>
<main>
  <article><h2>Post</h2><p>Body…</p></article>
</main>
<footer>© 2026</footer>

2 Forms & input types

Modern inputs include email, number, date, range and color. Attributes like required, min, max and pattern add built-in validation.

<form>
  <label>Email <input type="email" required></label>
  <label>Age <input type="number" min="0" max="120"></label>
  <button>Submit</button>
</form>

3 Embedding media

Use <figure>/<figcaption> for captioned images, and <audio>/<video> with controls for media.

<figure>
  <img src="https://via.placeholder.com/160" alt="Chart">
  <figcaption>Figure 1. A chart.</figcaption>
</figure>

⚡ HTML Compiler

Code runs live in a sandboxed frame, rendered by your browser.

📝 Tasks

5 tasks across 2 pages — multiple-choice and fill-in (type the answer). Score 70% or higher to earn your certificate.

🎓 Certificate of Completion

🔒 Pass the quiz above (70%+) to unlock your downloadable certificate.