🌐

HTML Advanced

Accessibility (ARIA), SEO metadata, responsive images and templates.

3 lessons 5 tasks ⚡ Live compiler

📚 Lessons

1 Accessibility & ARIA

Prefer native semantic elements; add ARIA only to fill gaps. Use aria-label, role and manage focus. Every interactive control must be keyboard reachable and labelled.

<button aria-label="Close dialog">✕</button>
<nav role="navigation" aria-label="Primary">
  <a href="#">Home</a>
</nav>

2 SEO & document metadata

Set a descriptive <title>, <meta name="description">, canonical links and Open Graph tags so pages share and rank well.

<head>
  <title>Aytict Academy — Learn to code</title>
  <meta name="description" content="Courses in code, security, math and physics.">
  <meta property="og:title" content="Aytict Academy">
</head>

3 Responsive images

Serve the right image per device with srcset/sizes, and add loading="lazy" to defer off-screen media.

<img src="small.jpg"
     srcset="small.jpg 480w, large.jpg 1200w"
     sizes="(max-width:600px) 480px, 1200px"
     alt="Scenery" loading="lazy">

⚡ 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.