Lessons

Advanced HTML

Learn

Advanced HTML

Overview

01Semantics and Accessibility
02Forms and Native Validation
03Media, Canvas and SVG
04Meta Tags, SEO and Social Cards

Quiz

Advanced HTML · 8 questions

Advanced HTML quiz

Answer every question, then score the quiz. The result is saved in this browser.

1. Which element should wrap the single primary content area of a page?

2. An icon-only close button contains just an <svg>. How do you give it an accessible name?

title attribute on the svg onlyaria-label="Close" on the buttonrole="button" on the svgalt="Close" on the button

3. What does input.setCustomValidity("Passwords do not match.") do?

Shows an alertMarks the field invalid until it is called again with an empty stringChanges the input typeSubmits the form

4. Why style with :user-invalid instead of :invalid?

It is fasterIt only matches after the user interacted, so empty required fields don't start redIt works without JavaScript only in FirefoxIt validates on the server

5. Which is true about content drawn on a <canvas>?

Screen readers read the shapesIt is a pixel buffer invisible to assistive tech unless you add a label or text alternativeIt scales without blur like SVGIt can be styled with CSS selectors per shape

6. Why set width and height attributes on an <img>?

They are required for alt textThey reserve space so the layout does not shift while loadingThey force the browser to download a smaller fileThey disable lazy loading

7. Social crawlers fetch your page to build a link card. Where must og: tags be?

Injected by client-side JavaScript after loadIn the server-rendered HTML <head>In robots.txtIn the manifest.json

8. What does <link rel="canonical"> tell search engines?

The page languageThe preferred URL among duplicatesThe favicon locationThat the page must not be indexed

Meta Tags, SEO and Social Cards

Next track: Advanced CSS

Retr0 Academy

A Web3 developer school on NEAR, built at NEAR HACKATHON. Designed by Sina Jalilian. Progress stays in this browser.

Home Learn HTML CSS JavaScript Advanced HTML Advanced CSS Advanced JavaScript Web3 Fundamentals NEAR Smart Contracts Tokens & NFTs on NEAR Build a NEAR dApp Final exam Verify a developer Leaderboard Mainnet proof Playground Code E ↗About