HTML MCQ Set 2: Intermediate

How to use this set

Questions only. No answer key.

These questions are harder than set one, and several have answers that surprise people. Where you are unsure, build the case and test it - that is the whole method, and it is how you will settle these questions in real work too.

Thirty questions. Allow fifty minutes.

Tables

1. What is the real difference between th and td?
   a) th is bold and centred   b) th declares that the cell labels other cells   c) th may only appear in thead   d) They are interchangeable
2. A table has four columns. One row contains a cell with colspan="2". How many td or th elements should that row contain in total?
   a) 4   b) 3   c) 2   d) 5
3. A cell has rowspan="3". How many cells should the two rows beneath it contain, compared with a normal row?
   a) The same number   b) One fewer   c) One more   d) Two fewer
4. Which scope value belongs on a header that spans several columns?
   a) col   b) row   c) colgroup   d) rowgroup
5. What does wrapping header rows in thead give you that plain rows do not?
   a) Bold text   b) Repeated headers when printing across pages   c) Automatic sorting   d) A required validation pass
6. Which element gives a table its accessible name?
   a) summary attribute   b) caption   c) The preceding heading   d) title attribute
7. Which CSS declaration removes table semantics in most browsers?
   a) border-collapse: collapse   b) display: block on table elements   c) overflow-x: auto   d) table-layout: fixed

Forms

8. A form field submits its value under which attribute?
   a) id   b) name   c) class   d) value
9. What does an unchecked checkbox submit?
   a) false   b) An empty string   c) Nothing at all   d) off
10. What groups a set of radio buttons into one choice?
    a) A shared fieldset   b) A shared name   c) A shared class   d) A shared form attribute
11. How many tab stops does a group of five radio buttons occupy?
    a) Five   b) Two   c) One   d) Zero
12. Which is submitted: a disabled field or a readonly field?
    a) Both   b) Neither   c) Only disabled   d) Only readonly
13. Which input type is wrong for a six digit postal code, and why?
    a) text, because it allows letters   b) number, because it strips leading zeros and adds a spinner   c) tel, because it has no validation   d) search, because it adds a clear button
14. What happens to a button inside a form that has no type attribute?
    a) It does nothing   b) It defaults to type="submit"   c) It defaults to type="button"   d) It is invalid
15. A file upload form must have which two things?
    a) method="get" and accept   b) method="post" and enctype="multipart/form-data"   c) novalidate and accept   d) method="post" and autocomplete="off"
16. What is a textarea value?
    a) Its value attribute   b) The text between its tags   c) Its placeholder   d) Its defaultValue property only
17. Which pseudo class avoids styling an untouched required field as invalid?
    a) :invalid   b) :user-invalid   c) :required   d) :placeholder-shown
18. When is GET the correct form method?
    a) When the form changes server state   b) When the form asks a question, such as a search   c) When the form contains a password   d) When the form uploads a file

Semantic elements

19. Which test decides whether content should be an article?
    a) Does it have a heading?   b) Would it still make sense republished on its own?   c) Is it longer than a paragraph?   d) Is it inside main?
20. How many visible main elements may a page have?
    a) Any number   b) One per section   c) One   d) One per landmark
21. A section that has no heading and no accessible name is:
    a) Announced as a region landmark   b) Not exposed as a landmark at all   c) Invalid   d) Treated as an article
22. When is a header element a banner landmark?
    a) Always   b) Only when it is a direct child of body   c) Only when it contains a nav   d) Only when it has a role attribute
23. Why does aria-label="Main navigation" read badly on a nav?
    a) It is too long   b) The role is already announced, so it says navigation twice   c) nav cannot take aria-label   d) It should be aria-labelledby
24. Where must summary appear inside a details element?
    a) Anywhere   b) Last   c) First   d) It is not required to be inside
25. What is the address element for?
    a) Any postal address   b) Contact details for the author or the page   c) The shipping address on a form   d) A location in a map embed

Metadata and accessibility

26. A page is blocked in robots.txt and also carries <meta name="robots" content="noindex">. What happens?
    a) It is removed from search   b) The crawler never fetches it, so it never reads the noindex, and the URL may still be listed   c) Both directives apply   d) The robots meta tag overrides robots.txt
27. A canonical link with a relative URL such as href="/about" is:
    a) Valid and works   b) A common silent failure   c) A validation error   d) Automatically converted to absolute
28. Where does a control get its accessible name from, if both a bound label and an aria-label are present?
    a) The label   b) The aria-label   c) Both, concatenated   d) Neither, it is an error
29. Which hides an element from sight but leaves it fully focusable by keyboard?
    a) hidden   b) display: none   c) opacity: 0   d) visibility: hidden
30. What must be true for an aria-live region to announce a change?
    a) It must be inserted along with its message   b) It must already be in the DOM before the content changes   c) It must have role="alert"   d) It must be focused

How to verify

Several of these questions have answers that are counter intuitive. Where you are unsure:

• Table arithmetic - build it and validate; the validator reports mismatched column counts directly.
• Form submission - submit it and read the Payload tab in the Network panel.
• Focus and tab order - put the mouse down and press Tab.
• Accessible names - read the computed name in the DevTools accessibility pane.
• Landmarks - list them in the accessibility tree.

Practice

1. Answer all thirty before verifying any.
2. Verify each in the browser and record which you were confidently wrong about.
3. Take the five you found hardest and write a short explanation of each in your own words.
4. Build a page that demonstrates the answers to questions 2, 3, 9 and 30 simultaneously.