Standards mode, quirks mode and data attributes
Every dataset value is a string: "199" must be converted before maths, and "false" is a truthy string, so compare with === "true".
The HTML questions interviewers ask most (semantic HTML, the doctype, data attributes, async and defer, accessibility and SEO) with model answers that show the mechanism, the trade-off and a real example.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a product list item that stores a product id and price for JavaScript, then write the JavaScript that reads the price as a number and adds 18% tax.
Write the <head> script tags for: an analytics script that doesn't depend on anything, a library, and your app code that uses the library. Explain your choice.
Write a 4-part answer (define, mechanism, why, example) to: "Why does every page need a lang attribute?"
Explain it without notes
Explain the difference between <script>, <script defer>, <script async> and <script type="module">.
What is the difference between an element's attributes and its dataset? When would you use data-*?
Why should you use <button> instead of <div onclick>? Give at least four reasons.
What is the accessibility tree, and how do HTML choices affect it?
A page ranks poorly and screen reader users complain. Which HTML would you check first?
Preview
Console
Nothing logged yet.Expected console output
this page: CSS1Compat
with doctype: CSS1Compat
without doctype: BackCompat
DOMStringMap { productId: '42', price: '199', inStock: 'true' }
string 200
in stock? true
true