","isCorrect":false},{"id":"cmmm4lunv005cutoybz6x2mhk","text":"<fieldset> with <legend>","isCorrect":true}]},{"id":"cmmm4lunv005dutoy4eb33m0r","text":"What is the correct way to associate a `<label>` with an `<input>` element?","explanation":"The `for` attribute on a <label> should match the `id` attribute on the associated <input>. This creates an explicit association that improves accessibility (screen readers) and usability (clicking the label focuses/activates the input). Wrapping the input inside the label also works.","answers":[{"id":"cmmm4lunv005eutoy3b1fq6k7","text":"Set the label's name attribute to match the input's name attribute","isCorrect":false},{"id":"cmmm4lunv005futoyule5b5fh","text":"Set the label's for attribute to match the input's id attribute","isCorrect":true},{"id":"cmmm4lunv005gutoyg3b00e6f","text":"Place the label and input inside the same <div>","isCorrect":false},{"id":"cmmm4lunv005hutoyuhr26nmt","text":"Set the label's target attribute to the input's class","isCorrect":false}]},{"id":"cmmm4lunv005iutoy2xm1c71x","text":"Which HTML element is used to define a self-contained piece of content that could be independently distributed, such as a blog post or news article?","explanation":"The <article> element represents a self-contained composition that could be independently distributed or reused, such as a blog post, forum post, news story, or product card. It should make sense on its own outside the context of the page.","answers":[{"id":"cmmm4lunv005jutoyzxchrbqv","text":"<article>","isCorrect":true},{"id":"cmmm4lunv005kutoyl6nu4ml6","text":"<section>","isCorrect":false},{"id":"cmmm4lunv005lutoy23edcz8s","text":"<aside>","isCorrect":false},{"id":"cmmm4lunv005mutoyhe718hkk","text":"<main>","isCorrect":false}]},{"id":"cmmm4lunv005nutoyvdnmmhnz","text":"What is the purpose of the `data-*` attributes in HTML5?","explanation":"HTML5 data-* attributes allow you to store custom data on any HTML element without using non-standard attributes or extra DOM properties. They are accessible via JavaScript using element.dataset and can be targeted with CSS attribute selectors. They do not affect the element's presentation or behavior by default.","answers":[{"id":"cmmm4lunv005outoy4feycc91","text":"They are used to define database connections for server-side rendering","isCorrect":false},{"id":"cmmm4lunv005putoyw0ey6f74","text":"They automatically bind data to JavaScript variables","isCorrect":false},{"id":"cmmm4lunv005qutoyuc9fjp1l","text":"They store custom data private to the page or application on HTML elements","isCorrect":true},{"id":"cmmm4lunv005rutoyk5zf44fw","text":"They override the element's default CSS display property","isCorrect":false}]}]},"leaderboard":[{"rank":1,"name":"Priya Patel","avatar":"PP","score":100,"time":"5:14"},{"rank":2,"name":"Marcus Johnson","avatar":"MJ","score":90,"time":"3:19"},{"rank":3,"name":"Emma Rodriguez","avatar":"ER","score":90,"time":"5:08"},{"rank":4,"name":"Alex Chen","avatar":"AC","score":90,"time":"10:44"},{"rank":5,"name":"Emma Rodriguez","avatar":"ER","score":90,"time":"12:57"},{"rank":6,"name":"BrainStorm","avatar":"B","score":80,"time":"8:41"},{"rank":7,"name":"Fatou Diallo","avatar":"FD","score":80,"time":"9:02"},{"rank":8,"name":"QuizFan42","avatar":"Q","score":80,"time":"10:36"},{"rank":9,"name":"Tom Williams","avatar":"TW","score":80,"time":"12:57"},{"rank":10,"name":"Fatou Diallo","avatar":"FD","score":80,"time":"13:36"}],"relatedQuizzes":[{"id":"cmnzv5j8i019v2iut9083ql17","title":"REST API Design Principles","category":"Web Development","difficulty":"EASY","playCount":1,"questionCount":10,"slug":null},{"id":"cmnzv5jk001bc2iuto9lngfsv","title":"REST API Security & Advanced Topics","category":"Web Development","difficulty":"HARD","playCount":1,"questionCount":10,"slug":null}],"challengeData":"$undefined"}]]}] </article></body></html>

20:["$","$18",null,{"fallback":["$","div",null,{"className":"min-h-screen bg-background","children":[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/80 backdrop-blur-md","children":["$","div",null,{"className":"mx-auto flex h-14 max-w-3xl items-center justify-between px-4","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-8 rounded-lg bg-primary"}],["$","span",null,{"className":"text-lg font-bold tracking-tight","children":"QuizAPI"}]]}]}]}],["$","main",null,{"className":"mx-auto max-w-3xl px-4 py-8","children":["$","div",null,{"className":"space-y-6 animate-pulse","children":[["$","div",null,{"className":"h-8 w-3/4 rounded bg-muted"}],["$","div",null,{"className":"h-4 w-1/2 rounded bg-muted"}],["$","div",null,{"className":"h-64 rounded-xl bg-muted"}]]}]}]]}],"children":[["$","$L21",null,{"moduleIds":["6736530267151285335"]}],["$","$L22",null,{"quiz":{"id":"cmmm4lunu004dutoynnwl49iy","title":"Common HTML Interview Questions","slug":"common-html-interview-questions","description":"Review fundamental HTML concepts from semantic elements to forms and accessibility that frequently appear in web development interviews.","category":"Web Development","difficulty":"EASY","playCount":204,"author":"QuizAPI Admin","questions":[{"id":"cmmm4lunu004eutoytdsgfl6d","text":"Which HTML element is the most appropriate for marking up the primary navigation links of a website?","explanation":"The

element represents a section of navigation links. Using semantic elements like

improves accessibility by helping screen readers and other assistive technologies identify the purpose of the content, rather than relying on generic

elements.","answers":[{"id":"cmmm4lunu004futoyl0gqpo1a","text":"

","isCorrect":false},{"id":"cmmm4lunu004gutoyjr72qiwv","text":"

","isCorrect":true},{"id":"cmmm4lunu004hutoydiv04d5o","text":"

","isCorrect":false},{"id":"cmmm4lunu004iutoytmvwq93t","text":"","isCorrect":false}]},{"id":"cmmm4lunu004jutoyenyh19jh","text":"What is the purpose of the `alt` attribute on an `` tag?","explanation":"The alt attribute provides alternative text that describes the image. It is displayed when the image cannot load, read by screen readers for visually impaired users, and used by search engines to understand image content. It is a critical accessibility feature.","answers":[{"id":"cmmm4lunu004kutoy04kdqlsj","text":"It sets the image title that appears on hover","isCorrect":false},{"id":"cmmm4lunu004lutoy7v656wuv","text":"It specifies a fallback image URL if the primary one fails","isCorrect":false},{"id":"cmmm4lunu004mutoyb4t6vigs","text":"It provides descriptive text for accessibility, SEO, and when the image cannot load","isCorrect":true},{"id":"cmmm4lunu004nutoyrszyapxg","text":"It defines the image alignment relative to surrounding text","isCorrect":false}]},{"id":"cmmm4lunu004outoywqot201z","text":"Which HTML5 input type provides a built-in date picker in supporting browsers?","explanation":"The input type=\"date\" provides a native date picker widget in modern browsers. It validates the format automatically and provides a consistent user experience. Other types like \"text\" would require a custom JavaScript date picker.","answers":[{"id":"cmmm4lunu004putoy2cglyvlt","text":"","isCorrect":false},{"id":"cmmm4lunu004qutoygyg6nbhf","text":"","isCorrect":false},{"id":"cmmm4lunu004rutoyc46fqlwt","text":"","isCorrect":true},{"id":"cmmm4lunu004sutoyou52dg6d","text":"","isCorrect":false}]},{"id":"cmmm4lunu004tutoyop54vtt1","text":"What is the difference between `

` and `

` in HTML5?","explanation":"The

element represents a thematic grouping of content, typically with a heading. It carries semantic meaning that assistive technologies can use. A

is a generic container with no semantic meaning. Use

when the content forms a distinct section of the document.","answers":[{"id":"cmmm4lunu004uutoykz8msl4h","text":"

is a semantic element representing a thematic grouping of content;

is a generic container with no meaning","isCorrect":true},{"id":"cmmm4lunu004vutoyps88frks","text":"They are identical;

is just the HTML5 replacement for

","isCorrect":false},{"id":"cmmm4lunu004wutoyh0ul14zg","text":"

can only contain text while

can contain any HTML","isCorrect":false},{"id":"cmmm4lunu004xutoylwczfcji","text":"

has built-in CSS styling while

does not","isCorrect":false}]},{"id":"cmmm4lunu004yutoyii4p19lb","text":"Which attribute should you add to an `` tag to make a link open in a new browser tab?","explanation":"The target=\"_blank\" attribute tells the browser to open the linked document in a new tab or window. For security, it is recommended to also add rel=\"noopener noreferrer\" to prevent the new page from accessing the original page's window object.","answers":[{"id":"cmmm4lunv004zutoyj579euw1","text":"href=\"_new\"","isCorrect":false},{"id":"cmmm4lunv0050utoyroynsjh0","text":"rel=\"new-tab\"","isCorrect":false},{"id":"cmmm4lunv0051utoy6m0kz43d","text":"target=\"_blank\"","isCorrect":true},{"id":"cmmm4lunv0052utoyg8fej2ic","text":"open=\"newtab\"","isCorrect":false}]},{"id":"cmmm4lunv0053utoynqz8rlr5","text":"What does the `` tag specify in an HTML document?","explanation":"The charset meta tag declares the character encoding for the document. UTF-8 is the most common encoding and supports virtually all characters from all writing systems. It should be declared within the first 1024 bytes of the HTML document.","answers":[{"id":"cmmm4lunv0054utoy5na1nxyf","text":"The programming language used in the page","isCorrect":false},{"id":"cmmm4lunv0055utoyb43rtxw6","text":"The character encoding used to interpret the document's text","isCorrect":true},{"id":"cmmm4lunv0056utoyf40ojmyl","text":"The maximum file size the browser should download","isCorrect":false},{"id":"cmmm4lunv0057utoytx4yzl57","text":"The CSS framework version to apply","isCorrect":false}]},{"id":"cmmm4lunv0058utoy50l85amf","text":"You want to group a set of form controls under a descriptive label. Which combination of elements is semantically correct?","explanation":"The

element groups related form controls, and provides a caption for that group. This combination is semantically meaningful and improves accessibility. Screen readers announce the legend text when users navigate into the fieldset.","answers":[{"id":"cmmm4lunv0059utoy4ka39mns","text":"

with

","isCorrect":false},{"id":"cmmm4lunv005autoybiyb2hli","text":"
with
","isCorrect":false},{"id":"cmmm4lunv005butoyc9oxtsqd","text":" with ","isCorrect":false},{"id":"cmmm4lunv005cutoybz6x2mhk","text":"<fieldset> with <legend>","isCorrect":true}]},{"id":"cmmm4lunv005dutoy4eb33m0r","text":"What is the correct way to associate a `<label>` with an `<input>` element?","explanation":"The `for` attribute on a <label> should match the `id` attribute on the associated <input>. This creates an explicit association that improves accessibility (screen readers) and usability (clicking the label focuses/activates the input). Wrapping the input inside the label also works.","answers":[{"id":"cmmm4lunv005eutoy3b1fq6k7","text":"Set the label's name attribute to match the input's name attribute","isCorrect":false},{"id":"cmmm4lunv005futoyule5b5fh","text":"Set the label's for attribute to match the input's id attribute","isCorrect":true},{"id":"cmmm4lunv005gutoyg3b00e6f","text":"Place the label and input inside the same <div>","isCorrect":false},{"id":"cmmm4lunv005hutoyuhr26nmt","text":"Set the label's target attribute to the input's class","isCorrect":false}]},{"id":"cmmm4lunv005iutoy2xm1c71x","text":"Which HTML element is used to define a self-contained piece of content that could be independently distributed, such as a blog post or news article?","explanation":"The <article> element represents a self-contained composition that could be independently distributed or reused, such as a blog post, forum post, news story, or product card. It should make sense on its own outside the context of the page.","answers":[{"id":"cmmm4lunv005jutoyzxchrbqv","text":"<article>","isCorrect":true},{"id":"cmmm4lunv005kutoyl6nu4ml6","text":"<section>","isCorrect":false},{"id":"cmmm4lunv005lutoy23edcz8s","text":"<aside>","isCorrect":false},{"id":"cmmm4lunv005mutoyhe718hkk","text":"<main>","isCorrect":false}]},{"id":"cmmm4lunv005nutoyvdnmmhnz","text":"What is the purpose of the `data-` attributes in HTML5?","explanation":"HTML5 data- attributes allow you to store custom data on any HTML element without using non-standard attributes or extra DOM properties. They are accessible via JavaScript using element.dataset and can be targeted with CSS attribute selectors. They do not affect the element's presentation or behavior by default.","answers":[{"id":"cmmm4lunv005outoy4feycc91","text":"They are used to define database connections for server-side rendering","isCorrect":false},{"id":"cmmm4lunv005putoyw0ey6f74","text":"They automatically bind data to JavaScript variables","isCorrect":false},{"id":"cmmm4lunv005qutoyuc9fjp1l","text":"They store custom data private to the page or application on HTML elements","isCorrect":true},{"id":"cmmm4lunv005rutoyk5zf44fw","text":"They override the element's default CSS display property","isCorrect":false}]}]},"leaderboard":[{"rank":1,"name":"Priya Patel","avatar":"PP","score":100,"time":"5:14"},{"rank":2,"name":"Marcus Johnson","avatar":"MJ","score":90,"time":"3:19"},{"rank":3,"name":"Emma Rodriguez","avatar":"ER","score":90,"time":"5:08"},{"rank":4,"name":"Alex Chen","avatar":"AC","score":90,"time":"10:44"},{"rank":5,"name":"Emma Rodriguez","avatar":"ER","score":90,"time":"12:57"},{"rank":6,"name":"BrainStorm","avatar":"B","score":80,"time":"8:41"},{"rank":7,"name":"Fatou Diallo","avatar":"FD","score":80,"time":"9:02"},{"rank":8,"name":"QuizFan42","avatar":"Q","score":80,"time":"10:36"},{"rank":9,"name":"Tom Williams","avatar":"TW","score":80,"time":"12:57"},{"rank":10,"name":"Fatou Diallo","avatar":"FD","score":80,"time":"13:36"}],"relatedQuizzes":[{"id":"cmnzv5j8i019v2iut9083ql17","title":"REST API Design Principles","category":"Web Development","difficulty":"EASY","playCount":1,"questionCount":10,"slug":null},{"id":"cmnzv5jk001bc2iuto9lngfsv","title":"REST API Security & Advanced Topics","category":"Web Development","difficulty":"HARD","playCount":1,"questionCount":10,"slug":null}],"challengeData":"$undefined"}]]}] </article></body></html>