Top 30 Html Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Which factor does the concept of affordance prioritize when selecting a native button over a styled div?

   • aReduced DOM weight and faster rendering performance
   • bBuilt-in keyboard support, focus handling, and screen reader semantics
   • cVisual design consistency and CSS customization flexibility
   • dARIA attributes alone as a substitute for native behavior
   Show the answer

   Answer: b · Built-in keyboard support, focus handling, and screen reader semantics

   Affordance centers on the built-in behavioral contracts of native elements, such as keyboard activation and screen reader announcements, rather than just appearance. Option D is tempting because developers often assume role='button' is sufficient, but that ignores the manual keyboard and focus management a div still requires.

   Read the full bite: How does affordance guide choosing a native button over a styled div?

2. Question 2 of 30

   When JavaScript modifies an element using the DOM, what is the immediate and primary outcome?

   • aThe browser's visual rendering of the webpage is updated for the user.
   • bA new, modified HTML document is saved to the user's local file system.
   • cThe original HTML file on the web server is permanently altered.
   • dThe browser creates a backup of the previous DOM state for undo operations.
   Show the answer

   Answer: a · The browser's visual rendering of the webpage is updated for the user.

   The DOM is the browser's live, in-memory model of the webpage, so changes made via JavaScript directly update what the user sees. These changes do not affect the original HTML file on the server, which remains unchanged.

   Read the full bite: The DOM: Your HTML as a Live Object Tree

3. Question 3 of 30

   Which scenario most appropriately demonstrates the use of WAI-ARIA?

   • aApplying role="heading" to a <span> element to visually style it as a heading.
   • bImplementing role="tab" and aria-selected on <div> elements styled to function as a tab in a custom tabbed interface.
   • cAdding role="button" to a <button> element to ensure screen reader compatibility.
   • dUsing aria-label on an <img> tag that already has a descriptive alt attribute.
   Show the answer

   Answer: b · Implementing role="tab" and aria-selected on <div> elements styled to function as a tab in a custom tabbed interface.

   WAI-ARIA is designed for custom interactive components that lack native HTML equivalents, like a tabbed interface built from generic <div>s. Options A, B, and D violate the first rule of ARIA use: if a native element exists for your purpose (e.g., <button>, alt attribute, <h1>-<h6>), use it instead of ARIA.

   Read the full bite: WAI-ARIA: A Script for Custom UI Accessibility

4. Question 4 of 30

   On a smartphone with a 390 CSS pixel wide screen, how does the viewport meta tag with width=device-width and initial-scale=1.0 affect rendering?

   • aThe browser assumes a 980px desktop viewport and scales the page down to fit the screen.
   • bThe tag makes the page responsive by resizing elements without CSS media queries.
   • cThe viewport matches the physical hardware pixel width and disables user zoom.
   • dThe layout viewport is set to 390 CSS pixels and the page loads at 100% zoom.
   Show the answer

   Answer: d · The layout viewport is set to 390 CSS pixels and the page loads at 100% zoom.

   width=device-width sets the layout viewport to the screen width in CSS pixels (390), and initial-scale=1.0 loads the page at 100% zoom. Option A describes what happens without the tag, while Option C confuses CSS pixels with physical pixels and incorrectly attributes zoom locking to initial-scale.

   Read the full bite: What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?

5. Question 5 of 30

   If you provide srcset with w descriptors but omit the sizes attribute, how will the browser behave?

   • aIt waits for CSS to resolve the image's final rendered width before downloading
   • bIt always picks the smallest listed source to minimize data usage
   • cIt assumes the image fills the viewport width and may select an unnecessarily large file
   • dIt falls back to the src attribute because srcset is invalid without sizes
   Show the answer

   Answer: c · It assumes the image fills the viewport width and may select an unnecessarily large file

   Without sizes, the browser defaults to assuming the image spans the full viewport width, which can lead it to download an unnecessarily large file. It makes this choice before CSS loads, so it cannot wait for the final rendered width.

   Read the full bite: How would you use srcset and sizes for responsive image performance?

6. Question 6 of 30

   What is the primary reason HTML parsing is recommended over regular expressions for extracting data from web pages?

   • aParsers convert HTML into a queryable tree structure, making extraction robust against minor layout changes.
   • bHTML parsers are significantly faster than regular expressions for large documents.
   • cParsers can execute JavaScript to render dynamic content, which regex cannot.
   • dRegular expressions are unable to handle nested HTML tags effectively.
   Show the answer

   Answer: a · Parsers convert HTML into a queryable tree structure, making extraction robust against minor layout changes.

   The card states that using regex for HTML is a "classic footgun" because it leads to brittle code. HTML parsers create a tree-like structure (like a DOM) that allows robust data extraction using selectors, making it resilient to changes in markup or layout. Option C is incorrect; standard HTML parsers process static HTML and do not execute JavaScript.

   Read the full bite: HTML Parsing: Turning Web Pages into Data

7. Question 7 of 30

   What is a primary security risk when using FastAPI's HTMLResponse to display user-provided input?

   • aIt does not automatically escape user-provided data, opening the door to Cross-Site Scripting (XSS) attacks.
   • bIt can lead to server-side request forgery (SSRF) if external URLs are embedded.
   • cIt automatically sanitizes all input, potentially stripping legitimate HTML tags from user content.
   • dIt forces the browser to render content as plain text, bypassing security headers.
   Show the answer

   Answer: a · It does not automatically escape user-provided data, opening the door to Cross-Site Scripting (XSS) attacks.

   The card explicitly states that HTMLResponse 'does not automatically escape data' and constructing HTML with user-provided input 'open[s] your application to Cross-Site Scripting (XSS) attacks.' Option C is incorrect because the problem is precisely the *lack* of automatic sanitization.

   Read the full bite: FastAPI: Returning HTML with HTMLResponse

8. Question 8 of 30

   What primary problem did the viewport meta tag solve for early mobile browsers?

   • aIt automatically converted pixel-based CSS units to relative units for better adaptability.
   • bIt allowed developers to disable user zooming for a fixed, consistent layout.
   • cIt prevented mobile browsers from automatically scaling down desktop-sized pages, making text unreadable.
   • dIt enabled the browser to cache responsive images more efficiently for faster loading.
   Show the answer

   Answer: c · It prevented mobile browsers from automatically scaling down desktop-sized pages, making text unreadable.

   The card explains that early mobile browsers would render pages at a default desktop width and then shrink them, leading to unreadably tiny text. The viewport meta tag was created to override this behavior by setting the page width to the device's width. Disabling user zoom (option B) is explicitly mentioned as a critical accessibility failure and misuse, not the primary problem the tag solves.

   Read the full bite: The Viewport Meta Tag: Your First Responsive Step

9. Question 9 of 30

   When might it be more beneficial to let Google automatically generate a search snippet rather than providing a custom meta description?

   • aFor critical, high-traffic pages where messaging control is paramount.
   • bWhen the page content is very short and lacks sufficient detail for a good description.
   • cIf the page's title already perfectly summarizes its content.
   • dFor pages targeting a wide variety of long-tail keywords or having low strategic value.
   Show the answer

   Answer: d · For pages targeting a wide variety of long-tail keywords or having low strategic value.

   The card states that for pages with low strategic value or those targeting many long-tail keywords, it can be more effective to omit the meta description, allowing Google to dynamically create a snippet that better matches specific user queries. Conversely, critical, high-traffic pages are explicitly mentioned as needing custom meta descriptions.

   Read the full bite: Meta Description: Your Sales Pitch on Google

10. Question 10 of 30

    What is the main advantage of using srcset or picture for images, compared to relying solely on max-width: 100%?

    • aIt allows the browser to select the most appropriate image file for the user's device, optimizing bandwidth and visual quality.
    • bIt automatically centers images within their containers on all screen sizes.
    • cIt ensures images are always loaded from a Content Delivery Network (CDN) for faster delivery.
    • dIt reduces the total number of image files needed by dynamically resizing a single source image.
    Show the answer

    Answer: a · It allows the browser to select the most appropriate image file for the user's device, optimizing bandwidth and visual quality.

    The card emphasizes that srcset and picture provide the browser with a menu of image options, allowing it to choose the best one for the user's device to save bandwidth and improve display quality. Option D is incorrect because these techniques require providing multiple image files, not reducing them.

    Read the full bite: Flexible Images: More Than Just `max-width`

11. Question 11 of 30

    Which approach best demonstrates the correct use of HTML header tags according to best practices?

    • aApplying an <h1> tag for the main page title and then using <h2>, <h3>, and so on, in a nested, hierarchical order.
    • bUsing multiple <h1> tags on a single page to emphasize several key topics.
    • cPrimarily using header tags to make text visually larger and bolder, then adjusting with CSS.
    • dSkipping from an <h1> directly to an 3 when the content is less significant than an 2 would imply.
    Show the answer

    Answer: a · Applying an <h1> tag for the main page title and then using <h2>, <h3>, and so on, in a nested, hierarchical order.

    The card emphasizes using a single <h1> for the main title, followed by nested <h2>, <h3>, etc., to create a logical, hierarchical structure. Using multiple <h1> tags or skipping heading levels explicitly goes against best practices and can confuse users and search engines.

    Read the full bite: HTML Header Tags: More Than Just Big Text

12. Question 12 of 30

    Which scenario best exemplifies the "art direction" capability provided by the HTML <picture> element?

    • aServing a high-resolution version of an image for Retina displays and a lower-resolution one for standard displays.
    • bAdjusting an image's size to fit different layout containers using CSS.
    • cProviding an image in a modern format like WebP, with a fallback to JPEG for browsers that don't support WebP.
    • dDisplaying a different visual composition of an image, such as a zoomed-in crop for mobile and a wider shot for desktop.
    Show the answer

    Answer: d · Displaying a different visual composition of an image, such as a zoomed-in crop for mobile and a wider shot for desktop.

    The <picture> element's art direction capability allows developers to serve entirely different image content or compositions based on conditions like viewport size, which option D describes. While option C is a valid use of <picture> for format optimization, it does not involve changing the visual content or composition of the image itself, which is the essence of art direction.

    Read the full bite: The <picture> Element: Art Direction for Images

13. Question 13 of 30

    What is the primary role of the "sizes" attribute when used with "srcset" for responsive images?

    • aTo define different image compositions or crops to be displayed based on media conditions.
    • bTo set a fixed maximum width for the image, preventing it from overflowing its parent container.
    • cTo specify the intrinsic pixel width of each image file available in the srcset.
    • dTo inform the browser about the intended display width the image will occupy at various viewport sizes.
    Show the answer

    Answer: d · To inform the browser about the intended display width the image will occupy at various viewport sizes.

    The sizes attribute tells the browser how wide the image will be displayed on the screen at different viewport sizes, allowing it to select the most appropriate image from the srcset. Option C describes the function of the width descriptors within the srcset attribute, not the sizes attribute.

    Read the full bite: srcset and sizes: Responsive Images in HTML

14. Question 14 of 30

    What is the primary purpose of establishing a logical keyboard focus order on a web page?

    • aTo strictly enforce the use of positive tabindex values for custom focus sequences.
    • bTo prioritize elements that are frequently interacted with by mouse users.
    • cTo provide a predictable and usable navigation path for keyboard-only users.
    • dTo ensure the visual layout of elements perfectly mirrors their order in the HTML source.
    Show the answer

    Answer: c · To provide a predictable and usable navigation path for keyboard-only users.

    A logical keyboard focus order is crucial for accessibility, enabling users who navigate with a keyboard or screen reader to interact with the page's content in a meaningful and predictable sequence. While the default order follows HTML, the focus order doesn't have to perfectly match the visual layout, only to be logical and preserve meaning, making option D incorrect.

    Read the full bite: Keyboard Focus Order: Navigating by Tab

15. Question 15 of 30

    For an image of a magnifying glass icon that triggers a search and a purely decorative swoosh graphic, what are the correct alt text implementations?

    • aMagnifying glass: alt="Search"; Swoosh: alt="".
    • bMagnifying glass: alt="magnifying glass icon"; Swoosh: alt="swoosh graphic".
    • cMagnifying glass: alt="Search"; Swoosh: omit the alt attribute.
    • dMagnifying glass: alt=""; Swoosh: alt="decorative element".
    Show the answer

    Answer: a · Magnifying glass: alt="Search"; Swoosh: alt="".

    For functional images like a search button, alt text must describe the action, not just the visual appearance. For purely decorative images, the alt attribute should be present but empty (alt="") to instruct screen readers to skip them. Option B incorrectly describes both visually, failing to convey function and adding unnecessary information for decorative elements.

    Read the full bite: Image Alt Text: What Screen Readers Say About Pictures

16. Question 16 of 30

    Which statement accurately describes how `dataset` converts an HTML `data-*` attribute name like `data-User-ID` into a JavaScript property?

    • aThe `data-` prefix is retained as `data`, and the rest of the name is converted to `camelCase`.
    • bThe `data-` prefix is dropped, and the name is converted to `camelCase` directly, preserving original casing after the prefix.
    • cThe `data-` prefix is dropped, and hyphens are replaced with underscores, converting the name to `snake_case`.
    • dThe entire attribute name is first converted to lowercase, then the `data-` prefix is dropped, and the remaining name is converted to `camelCase`.
    Show the answer

    Answer: d · The entire attribute name is first converted to lowercase, then the `data-` prefix is dropped, and the remaining name is converted to `camelCase`.

    The card explicitly states that "Any uppercase letters in the original HTML attribute name are converted to lowercase before this transformation," and then "the data- prefix is dropped and the name is converted to camelCase." Option B is incorrect because it misses the crucial initial lowercasing of the HTML attribute name.

    Read the full bite: Accessing data-* Attributes with `dataset`

17. Question 17 of 30

    When is it appropriate to use an empty alt attribute (e.g., alt="") for an image?

    • aWhen the image is purely decorative and conveys no informational value.
    • bWhen the image is too complex to describe concisely.
    • cWhen the image is a company logo that links to the homepage.
    • dWhen the image file is missing or fails to load.
    Show the answer

    Answer: a · When the image is purely decorative and conveys no informational value.

    The card states that an empty alt attribute should only be used for images that are purely decorative and provide no informational value, allowing screen readers to skip them. For informational images, even complex ones, alt text should describe content or purpose, and for logos, it should include function and context.

    Read the full bite: Alt Text: Giving Images a Voice for Everyone

18. Question 18 of 30

    Which statement accurately reflects the best practice for establishing focus order in a web interface?

    • aSetting tabindex="-1" on an element ensures it is included in the natural keyboard navigation flow.
    • bThe most robust and maintainable focus order is typically achieved by aligning with the Document Object Model (DOM) sequence.
    • cThe focus order should always precisely match the visual arrangement of elements on the page.
    • dEmploying positive tabindex values (e.g., 1, 2, 3) is the recommended way to define a custom, logical tab sequence.
    Show the answer

    Answer: b · The most robust and maintainable focus order is typically achieved by aligning with the Document Object Model (DOM) sequence.

    The card explicitly states that the default DOM order is the most robust and maintainable for focus order. While visual layout is important, the focus order doesn't have to strictly match it, as long as it remains logical; positive tabindex values are an anti-pattern, and tabindex="-1" removes an element from the natural tab order.

    Read the full bite: Focus Order: The Keyboard's Path Through Your UI

19. Question 19 of 30

    What is the primary benefit of using a <button> element instead of a styled <div> for an interactive click action?

    • aIt automatically includes pre-defined JavaScript event listeners for common interactions.
    • bIt inherently provides accessibility features such as keyboard navigation and screen reader support.
    • cIt ensures the button's visual appearance is consistent across all web browsers.
    • dIt makes the HTML code shorter and easier to write for developers.
    Show the answer

    Answer: b · It inherently provides accessibility features such as keyboard navigation and screen reader support.

    The card emphasizes that a <button> element automatically provides keyboard focus, activation via Enter/Space, and is announced by screen readers, features a styled <div> lacks. While other options might seem plausible, they are not the primary, inherent benefit of semantic elements for interactive components.

    Read the full bite: Semantic HTML: Use the Right Element for the Job

20. Question 20 of 30

    What is the primary benefit of using the HTML <label> element with a for attribute in form design?

    • aIt automatically validates the user's input against predefined rules before form submission.
    • bIt establishes a programmatic link between descriptive text and an input, crucial for screen reader interpretation.
    • cIt provides a temporary visual hint within the input field, guiding users on expected input format.
    • dIt expands the clickable area for the associated input, aiding users with motor skill challenges.
    Show the answer

    Answer: b · It establishes a programmatic link between descriptive text and an input, crucial for screen reader interpretation.

    The primary benefit of the <label> element is to programmatically associate descriptive text with an input, allowing assistive technologies like screen readers to announce the input's purpose. While it also creates a larger clickable target (option D), its core role for accessibility is the programmatic connection, unlike placeholder text (option C) or validation (option A).

    Read the full bite: Accessible Form Design: A Conversation, Not an Interrogation

21. Question 21 of 30

    Why prefer the disabled attribute over a CSS-only disabled class on a button?

    • aThe attribute makes the button render faster
    • bThe attribute removes the button from tab order and blocks clicks, which CSS alone cannot do
    • cCSS classes cannot change a button's color
    • dThe attribute is required for hover styles to work
    Show the answer

    Answer: b · The attribute removes the button from tab order and blocks clicks, which CSS alone cannot do

    The native disabled attribute prevents focus and clicks and exposes the disabled state to assistive tech. A CSS-only class only changes appearance, leaving the button still focusable and clickable.

    Read the full bite: Reusable Button with hover, focus, disabled

22. Question 22 of 30

    Why is placeholder text an inadequate substitute for a properly associated label on a form input?

    • aPlaceholders are not supported in older browsers
    • bPlaceholders always have higher contrast than label text
    • cPlaceholders cannot contain more than a few characters
    • dPlaceholders disappear on input and are inconsistently exposed as the name
    Show the answer

    Answer: d · Placeholders disappear on input and are inconsistently exposed as the name

    A placeholder vanishes once the user types and is not reliably announced as the field's accessible name, so the control may have no name. A real label persists, is announced, and enlarges the click target. Contrast is typically worse, not better.

    Read the full bite: Associating a label with a form input

23. Question 23 of 30

    Which markup pattern correctly gives a screen reader name to a button that contains only a decorative icon?

    • aPut aria-label on the button and aria-hidden="true" on the decorative icon
    • bApply aria-label to the SVG icon and omit it from the button
    • cAdd an alt attribute to the SVG icon describing the button's action
    • dUse a title attribute on the button to provide its accessible name
    Show the answer

    Answer: a · Put aria-label on the button and aria-hidden="true" on the decorative icon

    The interactive button—not the decorative icon—must expose the accessible name, so aria-label belongs on the button while aria-hidden prevents the icon from being announced separately. Alt text on SVG is unreliable for naming, and title is inconsistently announced and often inaccessible to keyboard users.

    Read the full bite: Which ARIA attribute fixes an icon-only button missing its screen reader name?

24. Question 24 of 30

    A developer styles a paragraph of text to look like a heading using CSS. What is the primary accessibility issue with this approach?

    • aSighted users may find the visual styling inconsistent across browsers.
    • bScreen readers will not identify it as a heading, hindering structural navigation.
    • cThe text will not automatically adjust its size on different screen resolutions.
    • dSearch engines will not recognize it as a heading, negatively impacting SEO.
    Show the answer

    Answer: b · Screen readers will not identify it as a heading, hindering structural navigation.

    The card emphasizes that faking structure with visual styles (like bold text) instead of semantic HTML (like an h2 tag) leaves screen reader users lost because assistive technologies cannot interpret the intended meaning. While SEO can be affected, the core problem highlighted is the inability for screen readers to recognize and allow navigation by headings.

    Read the full bite: Accessible Writing: Structure is Meaning

25. Question 25 of 30

    A promotional banner has a headline and an image conveying the sale message. Which markup pattern best ensures screen reader users can navigate to and understand it?

    • aWrap the banner in an aside with aria-labelledby pointing to an h2 heading, and give the image a concise descriptive alt attribute
    • bWrap the banner in a div with CSS styling, add a title attribute to the image, and mark the headline with a styled span
    • cWrap the entire banner in a link with no text content, relying on CSS background images and colors to display the message
    • dPlace the banner in a section with role="banner", use a paragraph with class="heading" for the text, and set alt="banner" on the image
    Show the answer

    Answer: a · Wrap the banner in an aside with aria-labelledby pointing to an h2 heading, and give the image a concise descriptive alt attribute

    The aside creates a complementary landmark navigable by screen readers, the h2 provides a programmatic heading structure, and descriptive alt conveys the image's message. The most tempting distractor uses a title attribute and styled span, but title is inconsistently exposed to screen readers and spans lack the navigable semantics of real headings.

    Read the full bite: What HTML attributes and elements make a banner accessible to screen readers?

26. Question 26 of 30

    For which scenario is using a data-* attribute the most appropriate solution?

    • aTo pass data exclusively between JavaScript functions without any visual impact.
    • bTo provide content that should be indexed by search engines for improved discoverability.
    • cTo enable CSS to apply styles conditionally based on an element's current state.
    • dTo store complex JSON objects directly within an HTML element for JavaScript consumption.
    Show the answer

    Answer: c · To enable CSS to apply styles conditionally based on an element's current state.

    The card states that data-* attributes are perfect for managing component-level state that CSS needs to know about, creating a clean bridge between JavaScript logic and CSS presentation. Storing complex data, providing content for search engines, or passing data only for JavaScript are explicitly mentioned as scenarios where data-* attributes should not be used.

    Read the full bite: Theming with CSS data-* Attributes

27. Question 27 of 30

    Which type of Custom Element should be avoided for broad browser compatibility?

    • aCustomized built-in elements
    • bElements that extend a generic JavaScript class
    • cElements whose names lack a hyphen
    • dAutonomous elements
    Show the answer

    Answer: a · Customized built-in elements

    The card explicitly states that "Customized built-in elements... are not supported in Safari," making them unsuitable for broad compatibility. Autonomous elements, conversely, are recommended for cross-browser projects.

    Read the full bite: Custom Elements: Create Your Own HTML Tags

28. Question 28 of 30

    What is the primary characteristic of HTML content placed inside a <template> element?

    • aIt serves as a fallback for browsers that do not support modern JavaScript frameworks.
    • bIt is immediately rendered on the page, but its scripts are deferred until the page is fully loaded.
    • cIt is automatically optimized for SEO and pre-rendered by the browser for faster initial display.
    • dIt is parsed by the browser but remains inert, not rendered or active, until explicitly used by JavaScript.
    Show the answer

    Answer: d · It is parsed by the browser but remains inert, not rendered or active, until explicitly used by JavaScript.

    The card explicitly states that the browser parses the HTML inside a <template> tag but keeps it inert—it's not rendered, scripts don't run, and images don't load—until JavaScript clones and appends it. Option B is incorrect because the content is not rendered at all initially, and its scripts do not run.

    Read the full bite: The HTML <template> Element: Inert, Reusable Markup

29. Question 29 of 30

    Which scenario best illustrates the primary benefit of using HTML slots in a Web Component?

    • aCreating a component whose content is always the same and never changes.
    • bAllowing a component to display different user-provided content in designated areas.
    • cDefining a component's lifecycle callbacks for custom behavior.
    • dEncapsulating a component's internal CSS styles to prevent global conflicts.
    Show the answer

    Answer: b · Allowing a component to display different user-provided content in designated areas.

    Slots are designed to make Web Components flexible by providing designated insertion points for user-provided markup, allowing the component's structure to remain consistent while its content varies. Option D describes a benefit of Shadow DOM encapsulation, not slots themselves.

    Read the full bite: HTML Slots: Making Web Components Customizable

30. Question 30 of 30

    What is the primary outcome if a Form-Associated Custom Element does not invoke setFormValue()?

    • aThe browser will automatically assign a default null or empty string value for the custom element.
    • bThe custom element's value will not be included in the data submitted with the parent form.
    • cThe custom element will be treated as a purely presentational component, ignoring its form association.
    • dThe form's submission process will be halted by a validation error from the custom element.
    Show the answer

    Answer: b · The custom element's value will not be included in the data submitted with the parent form.

    The card explicitly states that a custom element's state 'won't submit if you don't call setFormValue()'. This method is essential for the element to provide its value to the form for submission. Without it, the form submits, but the custom element's data is absent, not causing a validation error or reverting its form association.

    Read the full bite: Form-Associated Custom Elements: Your Own Inputs