Learning objectives
Explain the reason behind a markup decision; identify misleading claims; demonstrate small examples rather than memorizing definitions.
Prerequisites
Complete the course’s foundations, forms, media, accessibility, and browser capability lessons.
Explain meaning and behavior together
Question: When should you use a button instead of a link? A link navigates to a resource or location; a button performs an action in the current interface or submits a form. A styled anchor without a useful href is not automatically an accessible button. Demonstrate the distinction with one navigation link and one native action button, then discuss keyboard behavior.
Question: Is a div always block and a span always inline? Those are typical default display values. CSS can change presentation, while the elements’ semantic meaning and content models remain different. A display change does not make invalid nesting valid or turn a generic container into an interactive control.
Question: Why can the DOM differ from source HTML? The parser repairs some invalid structures, and scripts can later change the document. Explain which inspection tool answers each question. A good answer includes a concrete example, such as a div placed inside a paragraph.
Reason about forms and accessibility
Question: What is the difference between id and name on an input? ID identifies the element for labels, fragments, and script lookups. Name supplies a key in form data. A visible input can have an ID yet contribute no named value because name is missing.
Question: Does required="false" make a field optional? No. Required is a boolean attribute, so presence enables it. Omitting it makes the field optional unless another rule applies. Contrast that with aria-expanded, whose string value communicates a state and does not perform the interaction itself.
Question: Is ARIA enough to make a div behave like a button? No. A role changes accessibility semantics but does not add native keyboard activation or focus behavior. Prefer the real button when it fits. Explain accessible name, role, state, and behavior as separate responsibilities.
Question: Does a valid email input prove the address belongs to the user? No. Syntax checking is different from ownership verification and delivery. Client validation can also be bypassed, so the server independently validates and authorizes the request.
Discuss advanced tradeoffs honestly
Question: What does iframe sandbox protect? It restricts capabilities according to its tokens, and omitting allow-same-origin can create an opaque origin. It does not automatically block every network request; CSP and Permissions Policy address additional concerns. Avoid claiming one attribute makes arbitrary code universally safe.
Question: When would you choose picture instead of only srcset? Picture supports source selection such as art direction or format alternatives, while img srcset commonly handles resolution switching. Explain how sizes describes the rendered slot and why a real image file’s width descriptor must be accurate.
Question: Does localStorage provide account progress? No. It provides origin-scoped browser storage with availability and persistence limits. A complete answer discusses error handling, data validation, privacy, and synchronization rather than equating a successful write with a durable server record.
Working example
<a href="membership.html">Read membership requirements</a>
<button type="button" id="answer-demo">Show the next practice prompt</button>
<p id="answer-output" role="status"></p>Another example
<label for="email-example">Email address</label>
<input id="email-example" name="email" type="email" required>
<!-- id connects the label; name identifies the submitted entry. -->Expected output
The link represents navigation, while the live button reveals another prompt without leaving the page. The input example demonstrates how ID, name, type, and required solve separate parts of the form design.
Common mistakes
Avoid absolute statements such as HTML5 APIs all work everywhere or semantic HTML automatically guarantees SEO. Do not recite element definitions without relating them to behavior. If you do not know a current compatibility detail, explain how you would verify it.
Accessibility and browser notes
A strong interview answer includes how the feature works for keyboard and assistive-technology users. Mention the limits of automated testing and explain one manual test you would perform. Clear uncertainty is more useful than a confident but inaccurate browser-support claim.
Practice
Review this claim: An image with a title attribute never needs alt. Write a corrected example and explain the decision.
Review the solution and reasoning
<img src="ramp.jpg" alt="A step-free ramp beside the main entrance" width="800" height="600">Alt represents the image’s contextual purpose. Title is supplementary and is not a reliable replacement for alternative text. If the image were purely decorative beside an equivalent description, alt="" could be appropriate; the decision depends on the content’s role.