appear?","description":"Which statement about the <title> element is correct in HTML?\n","difficulty":"Intermediate","options":[{"id":"A","text":"<title> can appear multiple times in the <body> to set section titles."},{"id":"B","text":"<title> must be inside <head>, and the document should have only one <title>."},{"id":"C","text":"<title> is optional and only affects on-page headings."},{"id":"D","text":"<title> belongs inside <footer> for SEO."}],"correctOptionId":"B","explanation":"<title> is metadata and must be in the <head>. A document should have a single title; browsers and user agents use it for tabs, bookmarks, and often as a key signal for search results display.\n"},{"id":"q5","title":"Best practice for loading a non-module script without blocking render","description":"You need to load an external JavaScript file that depends on the DOM being parsed, and you want to avoid blocking HTML parsing. Which is the best choice?\n\n```html\n<script src=\"/app.js\"></script>\n```\n","difficulty":"Intermediate","options":[{"id":"A","text":"Add the script in <head> without attributes (as shown)."},{"id":"B","text":"Add async: <script async src=\"/app.js\"></script>"},{"id":"C","text":"Add defer: <script defer src=\"/app.js\"></script>"},{"id":"D","text":"Replace it with: <link rel=\"script\" href=\"/app.js\">"}],"correctOptionId":"C","explanation":"defer downloads the script in parallel while HTML parsing continues, then executes it after the document is parsed (before DOMContentLoaded). This avoids render-blocking and is appropriate for DOM-dependent scripts. async can execute as soon as it downloads, which may occur before parsing finishes.\n"},{"id":"q6","title":"Detect the meta description issue","description":"What is the problem with the following head snippet?\n\n```html\n<head>\n <meta name=\"description\" content=\"A short summary of the page.\">\n <meta name=\"description\" content=\"Another description for SEO.\">\n</head>\n```\n","difficulty":"Intermediate","options":[{"id":"A","text":"Nothing is wrong; multiple descriptions are merged by browsers."},{"id":"B","text":"Duplicate meta descriptions create ambiguity; user agents may ignore one of them."},{"id":"C","text":"The description meta must use http-equiv, not name."},{"id":"D","text":"The description meta must be placed after <body> to be valid."}],"correctOptionId":"B","explanation":"Having multiple meta description tags is a common mistake. Search engines and other consumers may ignore duplicates or choose one arbitrarily, reducing predictability. Best practice is to provide a single, unique meta description per page.\n"},{"id":"q7","title":"Async vs defer execution order (two scripts)","description":"Consider the following scripts in the document head:\n\n```html\n<script async src=\"/a.js\"></script>\n<script async src=\"/b.js\"></script>\n```\n\nWhich statement is true about the execution order of a.js and b.js?\n","difficulty":"Advanced","options":[{"id":"A","text":"They always execute in the order they appear in the HTML (a.js then b.js)."},{"id":"B","text":"They execute only after DOMContentLoaded, in order."},{"id":"C","text":"Execution order is not guaranteed; whichever finishes downloading first may run first."},{"id":"D","text":"They are blocked until all CSS finishes loading, then run in order."}],"correctOptionId":"C","explanation":"With async, each script is fetched in parallel and executed as soon as it’s available. That means a.js and b.js may run in either order depending on network/cache timing, making async risky for scripts that depend on each other.\n"},{"id":"q8","title":"Why <meta charset> should be near the top","description":"Why is it recommended to place this tag as early as possible in the <head>?\n\n```html\n<meta charset=\"UTF-8\">\n```\n","difficulty":"Advanced","options":[{"id":"A","text":"Because <meta charset> is required to appear after all CSS links to avoid style recalculation."},{"id":"B","text":"Because the browser may decode bytes using a different encoding if it hasn’t seen the charset yet, causing mojibake."},{"id":"C","text":"Because it improves JavaScript execution speed by enabling UTF-8 JIT compilation."},{"id":"D","text":"Because it prevents the page from being indexed unless it appears first."}],"correctOptionId":"B","explanation":"The browser starts decoding the HTML stream immediately. If the charset isn’t declared early, the browser may initially assume a different encoding and mis-decode characters, potentially requiring reparsing or resulting in garbled text.\n"},{"id":"q9","title":"Favicon caching and cache-busting strategy","description":"A site updates its favicon, but many users keep seeing the old icon due to aggressive caching. Which approach is most effective to prompt clients to fetch the new favicon?\n","difficulty":"Advanced","options":[{"id":"A","text":"Rename the file or add a versioned URL in the href (e.g., /favicon.ico?v=2) and update the <link rel=\"icon\">."},{"id":"B","text":"Move the <link rel=\"icon\"> tag from <head> to <body> so the browser reloads it."},{"id":"C","text":"Replace <link rel=\"icon\"> with <meta name=\"icon\"> so the browser treats it as new."},{"id":"D","text":"Add multiple identical <link rel=\"icon\"> tags to increase refresh probability."}],"correctOptionId":"A","explanation":"Favicons are often cached for a long time. Changing the resource URL (via renaming or a version query string) is a common cache-busting technique that forces a fresh request, assuming caching headers and intermediaries respect the URL change.\n"},{"id":"q10","title":"Fix script ordering with defer (dependency scenario)","description":"You have two scripts: library.js defines a global function used by app.js. The scripts are included in the head like this:\n\n```html\n<script defer src=\"/app.js\"></script>\n<script defer src=\"/library.js\"></script>\n```\n\nIn some browsers, app.js fails because the function isn’t defined yet. What is the best fix?\n","difficulty":"Advanced","options":[{"id":"A","text":"Swap the order so library.js comes before app.js, keeping defer on both."},{"id":"B","text":"Change both to async so they run faster."},{"id":"C","text":"Remove defer from app.js only; keep defer on library.js."},{"id":"D","text":"Keep the order, but add <meta name=\"author\"> to enforce correct execution order."}],"correctOptionId":"A","explanation":"Deferred scripts execute in document order after parsing completes. If app.js depends on symbols from library.js, library.js must appear first in the HTML. Using async would make ordering even less predictable, and meta tags don’t affect script execution order.\n"}]}]]}]}] </article></body></html>

22:["$","div",null,{"id":"$undefined","className":"mx-auto w-full max-w-7xl px-4 max-sm:px-0 sm:px-6 lg:px-12 mt-20 min-h-[calc(100vh-64px)] flex-1 bg-[#F8FAFC] dark:bg-[var(--background)]","children":["$","div",null,{"className":"relative mx-auto max-w-5xl px-8 py-12 max-sm:px-2 max-sm:py-8","children":[["$","$L3f",null,{"category":"html","topic":"meta-and-head","segments":"$Q40","totalQuestions":10,"title":"HTML Meta and Head Quiz: Master Meta Tags, Title, Favicon, and External Assets"}],["$","$L41",null,{"questions":[{"id":"q1","title":"Pick the correct charset meta tag","description":"Which HTML snippet correctly declares UTF-8 character encoding?\n","difficulty":"Beginner","options":[{"id":"A","text":""},{"id":"B","text":""},{"id":"C","text":""},{"id":"D","text":""}],"correctOptionId":"A","explanation":"The standard HTML5 way to declare encoding is . It should appear as early as possible in the so the browser can decode the document correctly.\n"},{"id":"q2","title":"What does the viewport meta tag control?","description":"What is the primary purpose of this tag in responsive design?\n\n```html\n\n```\n","difficulty":"Beginner","options":[{"id":"A","text":"It defines the page’s SEO keywords for search engines."},{"id":"B","text":"It sets the layout viewport to match the device width and initial zoom level."},{"id":"C","text":"It forces the browser to always load the desktop stylesheet."},{"id":"D","text":"It blocks users from zooming on any device by default."}],"correctOptionId":"B","explanation":"width=device-width makes the layout viewport match the device’s width, and initial-scale=1 sets the initial zoom. This is foundational for responsive layouts on mobile devices.\n"},{"id":"q3","title":"Choose the valid favicon link","description":"Which option correctly links a favicon in the document head?\n","difficulty":"Beginner","options":[{"id":"A","text":""},{"id":"B","text":""},{"id":"C","text":""},{"id":"D","text":""}],"correctOptionId":"C","explanation":"Favicons are linked with a element using rel=\"icon\" and an href pointing to the icon file (often .ico or .png).\n"},{"id":"q4","title":"Where should appear?","description":"Which statement about the <title> element is correct in HTML?\n","difficulty":"Intermediate","options":[{"id":"A","text":"<title> can appear multiple times in the <body> to set section titles."},{"id":"B","text":"<title> must be inside <head>, and the document should have only one <title>."},{"id":"C","text":"<title> is optional and only affects on-page headings."},{"id":"D","text":"<title> belongs inside <footer> for SEO."}],"correctOptionId":"B","explanation":"<title> is metadata and must be in the <head>. A document should have a single title; browsers and user agents use it for tabs, bookmarks, and often as a key signal for search results display.\n"},{"id":"q5","title":"Best practice for loading a non-module script without blocking render","description":"You need to load an external JavaScript file that depends on the DOM being parsed, and you want to avoid blocking HTML parsing. Which is the best choice?\n\n```html\n<script src=\"/app.js\"></script>\n```\n","difficulty":"Intermediate","options":[{"id":"A","text":"Add the script in <head> without attributes (as shown)."},{"id":"B","text":"Add async: <script async src=\"/app.js\"></script>"},{"id":"C","text":"Add defer: <script defer src=\"/app.js\"></script>"},{"id":"D","text":"Replace it with: <link rel=\"script\" href=\"/app.js\">"}],"correctOptionId":"C","explanation":"defer downloads the script in parallel while HTML parsing continues, then executes it after the document is parsed (before DOMContentLoaded). This avoids render-blocking and is appropriate for DOM-dependent scripts. async can execute as soon as it downloads, which may occur before parsing finishes.\n"},{"id":"q6","title":"Detect the meta description issue","description":"What is the problem with the following head snippet?\n\n```html\n<head>\n <meta name=\"description\" content=\"A short summary of the page.\">\n <meta name=\"description\" content=\"Another description for SEO.\">\n</head>\n```\n","difficulty":"Intermediate","options":[{"id":"A","text":"Nothing is wrong; multiple descriptions are merged by browsers."},{"id":"B","text":"Duplicate meta descriptions create ambiguity; user agents may ignore one of them."},{"id":"C","text":"The description meta must use http-equiv, not name."},{"id":"D","text":"The description meta must be placed after <body> to be valid."}],"correctOptionId":"B","explanation":"Having multiple meta description tags is a common mistake. Search engines and other consumers may ignore duplicates or choose one arbitrarily, reducing predictability. Best practice is to provide a single, unique meta description per page.\n"},{"id":"q7","title":"Async vs defer execution order (two scripts)","description":"Consider the following scripts in the document head:\n\n```html\n<script async src=\"/a.js\"></script>\n<script async src=\"/b.js\"></script>\n```\n\nWhich statement is true about the execution order of a.js and b.js?\n","difficulty":"Advanced","options":[{"id":"A","text":"They always execute in the order they appear in the HTML (a.js then b.js)."},{"id":"B","text":"They execute only after DOMContentLoaded, in order."},{"id":"C","text":"Execution order is not guaranteed; whichever finishes downloading first may run first."},{"id":"D","text":"They are blocked until all CSS finishes loading, then run in order."}],"correctOptionId":"C","explanation":"With async, each script is fetched in parallel and executed as soon as it’s available. That means a.js and b.js may run in either order depending on network/cache timing, making async risky for scripts that depend on each other.\n"},{"id":"q8","title":"Why <meta charset> should be near the top","description":"Why is it recommended to place this tag as early as possible in the <head>?\n\n```html\n<meta charset=\"UTF-8\">\n```\n","difficulty":"Advanced","options":[{"id":"A","text":"Because <meta charset> is required to appear after all CSS links to avoid style recalculation."},{"id":"B","text":"Because the browser may decode bytes using a different encoding if it hasn’t seen the charset yet, causing mojibake."},{"id":"C","text":"Because it improves JavaScript execution speed by enabling UTF-8 JIT compilation."},{"id":"D","text":"Because it prevents the page from being indexed unless it appears first."}],"correctOptionId":"B","explanation":"The browser starts decoding the HTML stream immediately. If the charset isn’t declared early, the browser may initially assume a different encoding and mis-decode characters, potentially requiring reparsing or resulting in garbled text.\n"},{"id":"q9","title":"Favicon caching and cache-busting strategy","description":"A site updates its favicon, but many users keep seeing the old icon due to aggressive caching. Which approach is most effective to prompt clients to fetch the new favicon?\n","difficulty":"Advanced","options":[{"id":"A","text":"Rename the file or add a versioned URL in the href (e.g., /favicon.ico?v=2) and update the <link rel=\"icon\">."},{"id":"B","text":"Move the <link rel=\"icon\"> tag from <head> to <body> so the browser reloads it."},{"id":"C","text":"Replace <link rel=\"icon\"> with <meta name=\"icon\"> so the browser treats it as new."},{"id":"D","text":"Add multiple identical <link rel=\"icon\"> tags to increase refresh probability."}],"correctOptionId":"A","explanation":"Favicons are often cached for a long time. Changing the resource URL (via renaming or a version query string) is a common cache-busting technique that forces a fresh request, assuming caching headers and intermediaries respect the URL change.\n"},{"id":"q10","title":"Fix script ordering with defer (dependency scenario)","description":"You have two scripts: library.js defines a global function used by app.js. The scripts are included in the head like this:\n\n```html\n<script defer src=\"/app.js\"></script>\n<script defer src=\"/library.js\"></script>\n```\n\nIn some browsers, app.js fails because the function isn’t defined yet. What is the best fix?\n","difficulty":"Advanced","options":[{"id":"A","text":"Swap the order so library.js comes before app.js, keeping defer on both."},{"id":"B","text":"Change both to async so they run faster."},{"id":"C","text":"Remove defer from app.js only; keep defer on library.js."},{"id":"D","text":"Keep the order, but add <meta name=\"author\"> to enforce correct execution order."}],"correctOptionId":"A","explanation":"Deferred scripts execute in document order after parsing completes. If app.js depends on symbols from library.js, library.js must appear first in the HTML. Using async would make ordering even less predictable, and meta tags don’t affect script execution order.\n"}]}]]}]}] </article></body></html>

Ready to Level Up?

Pick the correct charset meta tag

Ready to Level Up?

Pick the correct charset meta tag