HTML Quiz

1. What does HTML describe?

• The colours and fonts of a page
• The structure and meaning of content
• How a page responds to clicks
• How data is stored on a server

CSS handles appearance; JavaScript handles behaviour (lesson 01).

2. What must be the very first line of an HTML document?

• <html>
• <head>
• <!DOCTYPE html>
• <meta charset="utf-8">

Without it, browsers use quirks mode (lesson 03).

3. Where does the <title> element go?

• In the <head>
• At the top of the <body>
• Inside the first <h1>
• Anywhere

The title is metadata (lesson 03).

4. Which of these is a void element (no closing tag)?

• <p>
• <span>
• <img>
• <li>

Void elements include img, br, hr, input, meta and link (lesson 04).

5. How do you turn a boolean attribute like disabled off?

• Set it to "false"
• Set it to "0"
• Remove the attribute entirely
• Set it to "off"

Any presence of the attribute means true (lesson 05).

6. How many <h1> elements should a page normally have?

• One
• None
• One per section
• As many as you like

One main heading describing the page (lesson 06).

7. Which element conveys strong importance?

• <b>
• <strong>
• <i>
• <mark>

<b> is bold without extra importance (lesson 07).

8. How do you display a literal < character in text?

• \<
• <
• <<
• %3C

Use the character entity (lesson 09).

9. What is the best link text for a PDF report?

• Click here
• Read more
• Download the 2026 annual report (PDF, 2 MB)
• report.pdf

Link text should describe the destination (lesson 10).

10. Which link opens the user's email app?

• href="email:ana@example.com"
• href="mailto:ana@example.com"
• href="@ana@example.com"
• href="mail://ana@example.com"

mailto: URLs open the email client (lesson 10).

11. What alt text should a purely decorative image have?

• No alt attribute
• An empty alt: alt=""
• alt="decoration"
• alt="image"

An empty alt tells screen readers to skip it (lesson 12).

12. Why set width and height on images?

• They're required for the image to load
• So the browser reserves space and the layout doesn't jump
• To compress the image
• To make images responsive

It prevents layout shift (lessons 12 and 45).

13. Which element lets you serve a different image crop on small screens?

• <figure>
• <source> alone
• <picture>
• <srcset>

Use <picture> with media conditions (lesson 13).

14. What does the <track> element add to a video?

• A soundtrack
• Captions or subtitles
• A playlist
• A progress bar

Tracks point to WebVTT caption files (lesson 16).

15. What does the sandbox attribute do on an iframe?

• Makes it load faster
• Restricts what the embedded page is allowed to do
• Hides it from search engines
• Makes it resizable

Permissions are added back with allow-* tokens (lesson 17).

16. Which element can be a direct child of <ul>?

• <p>
• <div>
• <li>
• <ul>

Nested lists go inside an <li> (lesson 18).

17. What does scope="col" on a <th> mean?

• The header labels its column
• The cell spans the whole column
• The column is sortable
• The column is hidden

Scope tells assistive technology which cells a header describes (lesson 19).

18. What should tables be used for?

• Page layout
• Tabular data
• Navigation menus
• Forms

Use CSS Grid and Flexbox for layout (lesson 19).

19. What's the difference between a class and an id?

• There is none
• An id must be unique on the page; a class can be shared
• Classes are for JavaScript, ids for CSS
• An element can have several ids

(lesson 23).

20. Which element represents the page's primary content?

• <body>
• <section>
• <main>
• <article>

Only one visible main per page (lesson 24).

21. Why connect a <label> to an input?

• It's required for the form to submit
• Screen readers announce it, and clicking it focuses the field
• It validates the input
• It sets the input's default value

Labels are essential for accessible forms (lesson 29).

22. What is the default type of a button inside a form?

• button
• submit
• reset
• None

Always set type="button" for non-submitting buttons (lesson 31).

23. Which input type gives a numeric keypad AND checks min/max values?

• type="tel"
• type="number"
• type="text" with inputmode="numeric"
• type="range"

For codes and card numbers, prefer text + inputmode instead (lesson 27).

24. Are disabled form fields submitted?

• Yes
• No
• Only if they have a value
• Only with POST

Readonly fields are submitted; disabled ones aren't (lessons 28 and 33).

25. Which method should a login form use?

• GET
• POST
• PUT
• Either, it doesn't matter

GET would put the password in the URL (lesson 33).

26. Why is client-side validation not enough on its own?

• Browsers don't support it
• Users can bypass it, so the server must validate too
• It slows the page down
• It only works on mobile

Browser validation is for user experience, not security (lesson 32).

27. What does the defer attribute do on a script?

• Runs it immediately
• Downloads it in parallel and runs it after the HTML is parsed
• Prevents it from running
• Runs it only on mobile

The recommended default for scripts (lesson 37).

28. Which opens a modal dialog with the page behind it made inert?

• dialog.show()
• dialog.showModal()
• dialog.open = true
• <dialog open>

(lesson 38).

29. What is the first rule of ARIA?

• Add ARIA to every element
• Don't use ARIA if a native HTML element can do the job
• Always use role="button"
• Use aria-hidden on all images

Native elements bring semantics and keyboard behaviour for free (lesson 44).

30. What does loading="lazy" do on an image?

• Compresses it
• Loads it in low resolution first
• Delays loading until it's near the viewport
• Prevents it from being cached

Don't lazy-load the main image at the top of the page (lesson 45).