HTML Module 8
Interactive HTML with little JavaScript interview questions
Interview questions on interactive HTML with little JavaScript: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What does the browser do for you when you use details and summary instead of a div and a script?
Answered in the lesson Disclosures and accordions with details
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Mid to senior
A help centre shows 120 questions in exclusive accordions. Support wants links in emails to open the exact answer and Ctrl+F to find text inside closed answers; product wants FAQ rich results in Google Search. How do you build it, and what do you tell each team?
- What it tests
- Fragment navigation and find-in-page with closed details, the cost of exclusive groups, lazy answers with the toggle event, and which search features still exist.
- First step
- Start from what browsers already do: a link to an element inside a closed details opens it, and find-in-page searches closed details in current Chrome, Firefox and Safari. So give every answer an id and keep its text in the HTML. Then question the exclusivity, and tell product that Google no longer shows FAQ rich results.
- Follow-ups
-
- How do you keep the address bar in step when someone opens an answer?
- Which answers would you load only when they open, and how?
- What changes for an old browser that ignores the name attribute?
From the lesson Disclosures and accordions with details
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to staff
Your design system's accordion is built from div, button and aria-expanded, with arrow-key navigation between headers. A teammate proposes rebuilding it with details and summary. What do you gain, what could you lose, and how do you migrate without breaking users?
- What it tests
- Native disclosure semantics against the ARIA accordion pattern, keyboard expectations, headings inside summary, and testing a migration across engines and screen readers.
- First step
- List what each version gives users. details provides Tab, Enter and Space, the expanded state, find-in-page and link reveal, and exclusive groups through name, with no script. The ARIA version can add arrow keys and keeps its headings outside the button. Check what people rely on before deciding.
- Follow-ups
-
- Do the headings still work for screen-reader users once they sit inside summary?
- How would you keep arrow-key navigation if users depend on it?
- What does a page get in each version when its JavaScript fails to load?
From the lesson Disclosures and accordions with details
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes