Unit 2: Semantic HTML and Forms - Practice Quiz

1 Which HTML element represents the main content of a document?

2 Which semantic element is intended for a group of navigation links?

3 Which element is best suited for a self-contained blog post?

4 Which semantic element usually contains introductory content or a page heading?

5 Which element commonly contains copyright information at the bottom of a page?

6 Which attribute provides a text alternative for an image?

7 Why should heading elements such as <h1> and <h2> follow a logical order?

8 Which HTML element creates a form for collecting user input?

9 Which element creates a multi-line text input control?

10 Which element associates descriptive text with a form control?

11 Which input type is designed for entering an email address?

12 Which input type hides the characters entered by a user?

13 Which attribute displays a short hint inside an empty input field?

14 Which attribute prevents a form from being submitted when an input is empty?

15 Which attribute sets the minimum allowed value for a numeric input?

16 Which HTML element defines a table row?

17 Which element defines a header cell in an HTML table?

18 What does WCAG primarily provide?

19 Which practice makes an interactive page easier to use without a mouse?

20 Which viewport setting helps a page match the width of a mobile device?

21 A news page displays several stories that could each be distributed independently through an RSS feed. Which element should wrap each story?

22 A blog post includes a box containing related links and a short author biography. Which semantic element is most appropriate for the box?

23 A page contains a site header, navigation menu, primary content area, and site footer. Which structure best represents these regions?

24 A document has one primary content region and several repeated product cards. Which use of <main> is most appropriate?

25 A form visually places the text "Email address" next to an email field. Which implementation best associates the text with the field?

26 A decorative divider image adds no information and should be ignored by screen readers. Which markup is most appropriate?

27 A registration form contains a set of radio buttons for selecting one shipping method. Which markup provides the best semantic grouping?

28 A button inside a form opens a help dialog and must not submit the form. Which declaration should be used?

29 A form asks users to enter a meeting date and should display a browser-provided date control when supported. Which input is most suitable?

30 A quantity field must accept whole numbers from 1 through 10. Which control expresses these constraints most directly?

31 A login page should allow password managers to recognize a field as the user's existing password. Which attribute value is most appropriate?

32 An optional email field uses type="email". What happens when a user enters not-an-email and submits the form?

33 A username must contain 4 to 12 ASCII letters or digits. Which input applies this rule using built-in HTML validation?

34 A developer adds required, min, and pattern attributes to a form. Why is server-side validation still necessary?

35 A table lists products in rows with columns for name, price, and stock. Which markup best identifies the column headings?

36 A data table needs a short title that explains what its values represent. Which element should provide this title?

37 A custom control can be focused with the keyboard but responds only to mouse clicks. Which change most directly improves keyboard accessibility?

38 A status message appears after an asynchronous form submission, but keyboard focus should remain on the submit button. Which technique can announce the update to screen readers?

39 A wide data table must remain usable on a narrow screen without removing columns. Which approach best preserves the table's relationships?

40 An article image has several optimized files for different viewport widths. Which HTML feature lets the browser choose an appropriate file based on layout and pixel density?

41 A page lists several product reviews. Each review has its own heading, author, publication date, and body, and could be syndicated independently. Which structure best represents each review?

42 A single-page application keeps three routed views in the DOM, each containing a <main> element. Only the active view should contribute to the accessibility tree. Which implementation is conforming?

43 Given <button aria-label="Remove item" aria-labelledby="row7 action-text"><span id="action-text">Delete</span></button> and an element with id="row7" whose text is Invoice 42, what accessible name should the button receive?

44 An input must visually appear outside a form but still participate in that form's submission and validation. Which markup provides the required native association?

45 Consider <input type="number" min="0.2" step="0.5" value="1.0">. Assuming the value parses successfully, which statement describes its constraint-validation state?

46 A <fieldset disabled> contains several required controls. One required input is inside the fieldset's first <legend>, while another is in the fieldset body. Which statement is correct?

47 A data cell belongs simultaneously to a row header and two noncontiguous column headers in a complex table. The relationships cannot be represented reliably with simple scope values. Which technique is most appropriate?

48 A visual form presents three adjacent controls under one heading, but the heading-control relationship exists only through spacing and font weight. Which WCAG principle is most directly violated?

49 A desktop layout visually places <aside> before <main> using CSS Grid, although <main> comes first in the DOM. On mobile, the visual layout follows DOM order. What is the strongest accessibility conclusion?

50 A site footer contains copyright text, a postal address, social-media links, and links to privacy and terms pages. Which use of <nav> is most semantically appropriate?

51 A document has <h1>Research Portal</h1>, followed by a top-level <section> titled Datasets, which contains a nested section titled Archived Sets. Which heading markup expresses the hierarchy without relying on the obsolete document-outline algorithm?

52 After an invalid form submission, a script displays a persistent message explaining the error for email. Which update best communicates both the invalid state and the message association to assistive technology?

53 A submitted form contains <input name="a" value="1" readonly>, <input name="b" value="2" disabled>, and <input type="checkbox" name="c" checked>. Ignoring encoding details, which name-value pairs are successful controls?

54 For <input type="email" multiple required>, which nonempty value satisfies the type-specific syntax requirement, assuming ordinary ASCII addresses?

55 An input uses pattern="[A-Z]{3}". Which value satisfies the pattern constraint when the input is nonempty?

56 A table has column groups 2024 and 2025, each spanning four quarter columns. Which markup best establishes each year header as applying to its complete column group?

57 Under WCAG 2.2 Success Criterion 2.5.8 at Level AA, four small inline icon targets are each 20 \times 20 CSS pixels. Which arrangement can satisfy the target-size requirement without enlarging the icons?

58 A <picture> contains two <source> elements whose media conditions both match, followed by an <img> fallback. How does the browser choose the image resource?

59 A form has action="/default" and contains <button name="mode" value="draft" formaction="/draft">Save draft</button>. When that button submits the form, which behavior occurs?

60 A script calls input.setCustomValidity("Code already used"). The user later enters a value that satisfies every native constraint, but the script takes no further action. What is the resulting validation state?