I85PREP
⌘ K
LPI Web Dev Essentials study materials
LPI Web Dev Essentials study resources

LPI Web Dev Essentials practice questions

One question at a time. Build your LPI Web Dev Essentials understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1Software Development and Web Technologies

A developer adds the attribute defer to a <script> tag in the <head> of an HTML document. What is the resulting behavior in a modern browser?

  1. The script is fetched only after the entire document has finished parsing and all stylesheets are applied.
  2. The script executes synchronously and blocks HTML parsing until it has been downloaded and run.
  3. The script downloads in parallel with HTML parsing and executes after the document has been parsed, before DOMContentLoaded fires. Correct answer.
  4. The script downloads in parallel and executes immediately when it finishes, potentially before the rest of the HTML is parsed.

Explanation

The defer attribute lets the browser fetch the script in parallel with HTML parsing while postponing execution until parsing completes. Deferred scripts run in document order just before the DOMContentLoaded event is dispatched, so they can safely access the full DOM.

Question 2Software Development and Web Technologies

Which CSS selector has the highest specificity among the following?

  1. #nav ul li a Correct answer.
  2. a:not(.external)
  3. nav ul li a
  4. ul.menu li a:hover

Explanation

Specificity is counted as (ID selectors, class/attribute/pseudo-class selectors, type selectors). The selector #nav ul li a contains one ID plus three type selectors, so it outranks any selector built only from classes and types.

Question 3Software Development and Web Technologies

In JavaScript, what does the expression typeof null evaluate to?

  1. "undefined"
  2. "object" Correct answer.
  3. "boolean"
  4. "null"

Explanation

The typeof operator returns "object" for null, a long-standing quirk kept for backward compatibility. To test for null reliably, compare directly with null using strict equality instead of relying on typeof.

Question 4Software Development and Web Technologies

A web page must display a decorative image that conveys no information to assistive technology. Which markup is appropriate?

  1. An <img> element with an empty alt attribute, alt="" Correct answer.
  2. An <img> element with the attribute role="presentation" and descriptive alt text
  3. An <img> element with alt text describing the image contents in detail
  4. An <img> element with no alt attribute at all

Explanation

An empty alt attribute tells screen readers to skip a purely decorative image, which is the recommended pattern. Omitting alt entirely leaves the file name to be announced, and verbose descriptions add noise for decorative content.

Question 5Software Development and Web Technologies

Which HTTP status code indicates that a resource has been permanently moved and clients should use the new URL in subsequent requests?

  1. 301 Correct answer.
  2. 404
  3. 302
  4. 307

Explanation

301 Moved Permanently signals that the resource now lives at a new URL and that caches and clients should update references. Search engines typically transfer ranking signals when a 301 is used, which is why it matters for site migrations.

Question 6Software Development and Web Technologies

Which Git command creates a new branch and immediately switches to it in one step?

  1. git remote add feature/login
  2. git checkout -b feature/login Correct answer.
  3. git merge feature/login
  4. git branch feature/login

Explanation

git checkout -b creates the branch at the current HEAD and checks it out in a single command. The equivalent modern form is git switch -c, which was introduced to make branch operations clearer.

Question 7Software Development and Web Technologies

What is the primary purpose of the Content-Security-Policy HTTP response header?

  1. To cache static assets on the client for a specified duration
  2. To encrypt cookies so they cannot be read by JavaScript
  3. To restrict which sources of scripts, styles, and other resources a page may load Correct answer.
  4. To compress response bodies before they are sent to the browser

Explanation

A Content-Security-Policy header declares an allowlist of origins for scripts, styles, images, and similar resources, which mitigates cross-site scripting and injection attacks. It is a browser-enforced defense that blocks disallowed loads rather than merely warning about them.

Question 8Software Development and Web Technologies

Which HTML element is the correct semantic choice for a set of navigation links to other pages of the site?

  1. <div>
  2. <section>
  3. <nav> Correct answer.
  4. <aside>

Explanation

The <nav> element marks a major block of navigation links, giving assistive technology a landmark to jump to. Using it for primary menus improves navigation for screen reader users and clarifies document structure.

Question 9Software Development and Web Technologies

A developer wants a flex container's items to be distributed with equal space around each item, including at the outer edges. Which value of justify-content achieves this?

  1. flex-start
  2. space-between
  3. space-evenly
  4. space-around Correct answer.

Explanation

justify-content: space-around places equal space on both sides of every item, so the gaps between items are twice the space at the container edges. This differs from space-evenly, where all gaps including the edges are identical.

Question 10Software Development and Web Technologies

In JavaScript, what is logged by the following code? const arr = [1, 2, 3]; const result = arr.map(n => n * 2).filter(n => n > 2); console.log(result);

  1. [2, 4, 6]
  2. [6]
  3. [4, 6] Correct answer.
  4. [3]

Explanation

map doubles each element to produce [2, 4, 6], and filter then keeps only values greater than 2, giving [4, 6]. Both methods return new arrays and leave the original arr unchanged.

Question 11Software Development and Web Technologies

Which statement about the CSS box model with box-sizing: border-box is correct?

  1. The declared width applies to the content area only, with padding and border added on top
  2. The declared width includes margin but excludes padding and border
  3. The declared width is ignored and the element sizes to its content
  4. The declared width includes padding and border, so content shrinks to fit inside it Correct answer.

Explanation

With border-box, the width property sets the total size of the border box, so padding and border are subtracted from the space available to content. This makes layouts more predictable because adding padding does not change the element's outer width.

Question 12Software Development and Web Technologies

A form submits data with method="post" and enctype="application/x-www-form-urlencoded". Which statement best describes the resulting request?

  1. The field values are sent in the request body as percent-encoded name-value pairs Correct answer.
  2. The field values are sent as a multipart payload with file boundaries
  3. The field values are sent in a custom HTTP header named after the form
  4. The field values are appended to the URL as a query string

Explanation

With the urlencoded encoding type, the browser serializes fields into the request body as key=value pairs joined by ampersands, with reserved characters percent-encoded. This is the default encoding for HTML forms.

Question 13Software Development and Web Technologies

Which JavaScript feature allows a function to be paused and resumed, producing a sequence of values over time?

  1. A callback passed to setTimeout
  2. A class constructor declared with constructor()
  3. A generator function declared with function* Correct answer.
  4. An arrow function declared with =>

Explanation

Generator functions use function* and yield to suspend execution, returning an iterator whose next() method resumes the function. They are commonly used to model lazy sequences and to implement custom iteration.

Question 14Software Development and Web Technologies

A page must be usable on narrow mobile screens without horizontal scrolling. Which viewport meta tag is appropriate?

  1. <meta name="screen" content="responsive">
  2. <meta name="mobile" content="enabled">
  3. <meta name="viewport" content="width=1024">
  4. <meta name="viewport" content="width=device-width, initial-scale=1"> Correct answer.

Explanation

Setting width=device-width makes the layout viewport match the device's CSS pixel width, and initial-scale=1 avoids an initial zoom. This is the standard foundation for responsive layouts on mobile browsers.

Question 15Software Development and Web Technologies

What does the SameSite=Lax cookie attribute do in modern browsers?

  1. It restricts the cookie to HTTPS connections only
  2. It blocks JavaScript from reading the cookie via document.cookie
  3. It prevents the cookie from ever being sent on cross-site requests of any kind
  4. It sends the cookie on same-site requests and on top-level cross-site navigations using safe methods Correct answer.

Explanation

SameSite=Lax allows the cookie on same-site requests and on top-level GET navigations from other sites, which preserves normal link-following behavior. It blocks the cookie on cross-site subrequests such as embedded images or form POSTs, reducing CSRF exposure.

Question 16Software Development and Web Technologies

In a REST API, which HTTP method is defined as safe and idempotent, and should not modify server state?

  1. PATCH
  2. GET Correct answer.
  3. POST
  4. DELETE

Explanation

GET is defined as both safe and idempotent: it retrieves a representation without changing server state, and repeating it yields the same effect. This is why browsers and proxies may cache GET responses and prefetch links safely.

Question 17Software Development and Web Technologies

A developer wants to store a small amount of data in the browser that persists across sessions and is sent automatically with every HTTP request to the same origin. Which mechanism fits?

  1. A cookie with an appropriate Max-Age or Expires attribute Correct answer.
  2. An in-memory JavaScript variable on the page
  3. window.sessionStorage
  4. window.localStorage

Explanation

Cookies are the only client storage mechanism that browsers attach automatically to matching HTTP requests, and Max-Age or Expires makes them persist beyond the session. Storage APIs keep data on the client and require explicit code to transmit it.

Question 18Software Development and Web Technologies

Which ARIA attribute should be used to indicate that a collapsible panel controlled by a button is currently expanded?

  1. aria-live on the panel
  2. aria-label on the panel
  3. aria-hidden on the button
  4. aria-expanded on the button Correct answer.

Explanation

aria-expanded on the triggering button reflects whether the controlled region is open or closed, and it should be toggled in JavaScript along with the visual state. Assistive technology announces the state so users know what activating the button will do.

Question 19Software Development and Web Technologies

What is the effect of running git rebase main while on a feature branch?

  1. The main branch is fast-forwarded to include the feature branch's commits
  2. The feature branch is deleted after its changes are copied into main
  3. The feature branch's commits are replayed on top of the current tip of main, producing a linear history Correct answer.
  4. A merge commit is created that joins main and the feature branch

Explanation

git rebase main reapplies the feature branch's unique commits onto the latest commit of main, rewriting their hashes and yielding a linear sequence. This keeps history tidy but should be avoided on branches other people have already pulled.

Question 20Software Development and Web Technologies

Which CSS at-rule is designed to apply styles only when the viewport matches a media condition such as a maximum width?

  1. @font-face
  2. @import
  3. @keyframes
  4. @media Correct answer.

Explanation

The @media at-rule wraps style rules in conditions on viewport width, orientation, resolution, and similar features. It is the core tool for responsive layouts that adapt across device sizes.

Question 21Software Development and Web Technologies

A developer writes const handler = () => { console.log(this); } inside a regular method of an object and calls handler(). What will this refer to inside the arrow function?

  1. The object that owns handler as a property at call time
  2. The global object, because arrow functions always bind this to the global scope
  3. undefined, because arrow functions cannot access this at all
  4. The this value of the enclosing regular method at the time the arrow function was created Correct answer.

Explanation

Arrow functions do not create their own this binding; they capture this lexically from the surrounding scope where they are defined. Inside a regular method, that captured value is the method's this, typically the object the method was called on.

Question 22Software Development and Web Technologies

Which technique best mitigates cross-site scripting when rendering user-supplied text into an HTML page?

  1. Wrap the user text inside an HTML comment before inserting it
  2. Escape only double quotes in the text before assigning innerHTML
  3. Store the text in localStorage before displaying it
  4. Insert the text with element.textContent instead of element.innerHTML Correct answer.

Explanation

Assigning to textContent treats the input as literal text, so markup characters are shown rather than parsed as HTML. This prevents injected script tags from executing, unlike innerHTML, which parses and runs markup.

Question 23Software Development and Web Technologies

A page defines the custom element <user-card> with class UserCard extends HTMLElement. When is the element's connectedCallback invoked?

  1. Each time the element is inserted into the document's DOM Correct answer.
  2. Once, when the element's class is first defined with customElements.define
  3. When the element is constructed but before it is attached to the document
  4. Whenever an attribute on the element is added, changed, or removed

Explanation

connectedCallback is a lifecycle hook that fires whenever the custom element becomes connected to the document, including when it is moved or reinserted. It is the right place to set up DOM-dependent work such as fetching data or attaching listeners to the document.

Question 24Software Development and Web Technologies

What is the main benefit of HTTP/2 multiplexing over HTTP/1.1 pipelining for loading web assets?

  1. It guarantees that responses arrive in the exact order the requests were sent
  2. It allows responses to be cached without any cache-control headers
  3. It removes the need for TLS encryption on the connection
  4. Many requests share one connection concurrently without head-of-line blocking at the HTTP layer Correct answer.

Explanation

HTTP/2 frames messages and interleaves them over a single TCP connection, so multiple requests progress in parallel without the strict ordering problem that plagued HTTP/1.1 pipelining. This reduces the need for domain sharding and many separate connections.

Question 25Software Development and Web Technologies

A page sets a strict Content-Security-Policy that omits 'unsafe-inline' from script-src. What happens to an inline <script> block in that page?

  1. The browser blocks it from executing unless it carries a matching nonce or hash Correct answer.
  2. It executes normally because inline scripts are exempt from script-src
  3. It executes only after all external scripts have finished loading
  4. It executes but reports a warning to the console without being blocked

Explanation

When script-src lacks 'unsafe-inline', the browser refuses to run inline scripts unless they present a nonce or hash that the policy lists. This is the primary reason CSP is effective against injected inline scripts in XSS attacks.

Question 26Software Development and Web Technologies

Which HTTP status code should a web API return when a request is syntactically valid but the submitted data fails server-side validation rules?

  1. 204 No Content
  2. 422 Unprocessable Content Correct answer.
  3. 301 Moved Permanently
  4. 401 Unauthorized

Explanation

422 signals that the server understood the request's media type and syntax but could not process the contained instructions, which fits semantic validation failures. 400 is also used for malformed input, but 422 is the specific code for well-formed yet semantically invalid entity data.

Question 27Software Development and Web Technologies

A developer adds the defer attribute to a <script src="app.js"> tag in the document head. How does the browser treat that script?

  1. It is fetched only after the load event fires, so it can never affect initial rendering.
  2. It blocks HTML parsing until the script has downloaded and executed in place.
  3. It downloads in parallel with parsing and executes after the document is parsed, before DOMContentLoaded. Correct answer.
  4. It downloads in parallel and executes as soon as it finishes, potentially before later markup exists.

Explanation

Deferred scripts are fetched without blocking the parser and run in document order once parsing completes, just before DOMContentLoaded is dispatched. This lets the script query the full DOM without placing the tag at the end of the body.

Question 28Software Development and Web Technologies

Which CSS selector has the highest specificity among these four?

  1. div.card
  2. a:hover
  3. header nav ul li a
  4. #main .card a Correct answer.

Explanation

Specificity is compared as (ID, class/attribute/pseudo-class, type/pseudo-element) counts. The selector with one ID plus a class outranks selectors built only from type selectors or a single class, regardless of how many type selectors are chained.

Question 29Software Development and Web Technologies

A web app must keep a user logged in across browser restarts without storing the session token where JavaScript can read it. Which approach fits best?

  1. Store the token in an HttpOnly, Secure cookie set by the server. Correct answer.
  2. Store the token in sessionStorage so it clears when the tab closes.
  3. Store the token in localStorage and read it on each page load.
  4. Store the token in a global JavaScript variable initialized at startup.

Explanation

An HttpOnly cookie is not exposed to document.cookie or JavaScript APIs, which removes the most common token-theft path through injected scripts; adding Secure restricts it to HTTPS. Persistence across restarts comes from the cookie's Max-Age or Expires attribute.

Question 30Software Development and Web Technologies

In JavaScript, which statement about Promise.all is accurate?

  1. It runs the input promises sequentially, awaiting each before starting the next.
  2. It rejects as soon as any input promise rejects, even if others are still pending. Correct answer.
  3. It resolves with the first settled promise, ignoring the remaining inputs.
  4. It resolves only after every input promise has settled, whether fulfilled or rejected.

Explanation

Promise.all fails fast: the returned promise rejects with the first rejection reason encountered, while the other operations continue running in the background. Use Promise.allSettled when you need a result for every input regardless of outcome.

Question 31Software Development and Web Technologies

Which statement correctly describes the difference between the HTML <section> and <div> elements?

  1. <section> is valid only inside <article>, while <div> is valid only inside <body>.
  2. <section> may only be used once per document, while <div> may be repeated freely.
  3. <div> carries landmark semantics for assistive technology, while <section> has none.
  4. <section> represents a thematic grouping usually with a heading, while <div> is a generic container with no semantics. Correct answer.

Explanation

<section> is a semantic element intended for a self-contained thematic region, conventionally identified by a heading. <div> exists purely as a styling and scripting hook and conveys no meaning to browsers or assistive technology.

Question 32Software Development and Web Technologies

A developer configures a webpack build with an entry point and an output filename containing [contenthash]. What problem does this solve?

  1. It guarantees the bundle will execute before any other script on the page.
  2. It converts the bundle into an ES module that browsers can import natively.
  3. It lets browsers cache assets indefinitely while a changed file automatically gets a new URL. Correct answer.
  4. It minifies the bundle by removing whitespace during the hashing step.

Explanation

A content hash changes whenever the emitted file's contents change, so unchanged bundles keep the same URL and stay in cache while modified ones are fetched fresh. This pairs with long-lived Cache-Control headers for static assets.

Question 33Software Development and Web Technologies

Which statement about the CSS position property value sticky is correct?

  1. The element scrolls normally until it reaches a specified offset, then behaves as if fixed within its scrolling container. Correct answer.
  2. The element is removed from normal flow and positioned relative to the nearest positioned ancestor.
  3. The element is positioned relative to its own normal position without affecting layout of siblings.
  4. The element stays fixed relative to the viewport for the entire life of the document.

Explanation

Sticky positioning is a hybrid: the box participates in normal flow until the scroll position crosses a threshold set by top, bottom, left, or right, after which it sticks within its containing block. It stops sticking when that container scrolls out of view.

Question 34Software Development and Web Technologies

A developer needs to read a JSON file into a Node.js script using modern promise-based APIs. Which code correctly parses the file contents into a JavaScript object?

  1. const data = JSON.parse(await fs.promises.readFile('config.json', 'utf8')); Correct answer.
  2. const data = JSON.stringify(await fs.promises.readFile('config.json', 'utf8'));
  3. const data = fs.promises.readFile('config.json', 'utf8').then(JSON.parse);
  4. const data = await fs.promises.readFile('config.json', 'utf8');

Explanation

readFile resolves to a string when an encoding is supplied, and JSON.parse turns that string into an object. Without the parse step the variable holds raw text, not a usable object.

Question 35Software Development and Web Technologies

Which HTTP response header instructs browsers and shared caches how long a response may be reused before revalidation?

  1. Content-Encoding: gzip
  2. Vary: Accept-Encoding
  3. Cache-Control: max-age=3600 Correct answer.
  4. Access-Control-Allow-Origin: *

Explanation

Cache-Control's max-age directive states the freshness lifetime in seconds, after which a cached copy must be revalidated or refetched. Other caching directives such as no-store and must-revalidate refine this behaviour.

Question 36Software Development and Web Technologies

A single-page application updates the view when the user clicks a link, but the browser's back button no longer restores previous views. Which API should the developer use to add history entries without a full page load?

  1. location.reload()
  2. history.pushState() Correct answer.
  3. window.open()
  4. document.write()

Explanation

pushState adds a new entry to the session history with a URL and state object, and the popstate event lets the app restore the matching view when the user navigates back or forward. This keeps client-side routing in sync with browser controls.

Question 37Software Development and Web Technologies

Which statement about the Same-Origin Policy for XMLHttpRequest and fetch is correct?

  1. Cross-origin reads are allowed by default because the policy only restricts cookies.
  2. The policy prevents the browser from sending any cross-origin request at all.
  3. The policy is enforced by the server, which must reject requests with a foreign Origin header.
  4. Cross-origin reads are blocked by default unless the server sends appropriate CORS response headers. Correct answer.

Explanation

The browser permits the request to be sent in many cases but withholds the response from script unless the server opts in with headers such as Access-Control-Allow-Origin. The enforcement lives in the browser, not in the remote server.

Question 38Software Development and Web Technologies

A team wants a CSS layout where a sidebar keeps a fixed width while the main column grows to fill the remaining space, using CSS Grid. Which track definition achieves this?

  1. grid-template-columns: 240px 1fr; Correct answer.
  2. grid-template-columns: 240px 240px;
  3. grid-template-columns: auto auto;
  4. grid-template-columns: repeat(2, minmax(240px, 1fr));

Explanation

The fr unit distributes the leftover space after fixed tracks are sized, so 1fr absorbs everything not taken by the 240px sidebar. Two fixed tracks or two auto tracks would not let the main column expand to fill the container.

Question 39Software Development and Web Technologies

A page loads three large images and a developer adds loading="lazy" to each <img>. What is the observable effect?

  1. Images outside the viewport are fetched only when they approach it, reducing initial network and decode work. Correct answer.
  2. All three images are fetched at higher priority during initial HTML parsing.
  3. The images are converted to modern formats such as WebP by the browser.
  4. The images are decoded on the main thread before layout to prevent reflow.

Explanation

Lazy loading defers fetching of offscreen images until they near the viewport, which lowers initial bandwidth and speeds up the first meaningful paint. Above-the-fold images should generally not be lazy-loaded because it delays their appearance.

Question 40Software Development and Web Technologies

Which statement about the HTTP OPTIONS method in the context of cross-origin requests is correct?

  1. Browsers send a preflight OPTIONS request for non-simple requests to check the server's CORS permissions before sending the real request. Correct answer.
  2. OPTIONS permanently deletes the resource's cached representations on the server.
  3. OPTIONS is used to retrieve a representation of the target resource in a read-only manner.
  4. OPTIONS requests are never sent automatically by browsers and exist only for manual debugging.

Explanation

For requests that are not CORS-simple, such as those using PUT or custom headers, the browser first issues an OPTIONS preflight asking for allowed methods and headers. The actual request is sent only if the response grants permission.

Question 41HTML Document Markup

Which declaration at the very start of an HTML document tells the browser to render the page in standards mode rather than quirks mode?

  1. <!-- standards mode -->
  2. <!DOCTYPE html> Correct answer.
  3. <meta charset="utf-8">
  4. <?xml version="1.0"?>

Explanation

The HTML doctype is the required first construct in a document and triggers standards mode in browsers. Omitting it or using a legacy doctype can push the parser into quirks mode, changing layout behavior. The XML declaration and meta charset serve different purposes entirely.

Question 42HTML Document Markup

A page contains the markup <p>Hello <strong>world</strong>!</p>. Which statement describes the resulting document tree?

  1. The strong element is a child of the p element and a sibling of the text node "Hello ". Correct answer.
  2. The text "Hello " becomes a child of strong because inline content is re-parented.
  3. The strong element is a parent of the p element because it is nested inside.
  4. The strong element is a sibling of the p element at the root level.

Explanation

Nesting in HTML source produces a tree where the inner element becomes a child of the element that contains it. Text nodes adjacent to that child, such as "Hello " and "!", are siblings of the strong element inside the paragraph. This parent-child relationship is what CSS selectors and DOM traversal rely on.

Question 43HTML Document Markup

Which element is the correct semantic container for the dominant, unique navigation links of a site page?

  1. <nav> Correct answer.
  2. <aside>
  3. <menu>
  4. <div class="links">

Explanation

The nav element represents a section of major navigation links and is exposed to assistive technology as a navigation landmark. Using a div with a class conveys nothing to the accessibility tree. The menu element is for command lists, and aside marks tangential content.

Question 44HTML Document Markup

Which markup correctly associates a visible label with a text input so that clicking the label focuses the field?

  1. <label name="email">Email</label><input id="email" type="email">
  2. <label for="input">Email</label><input name="email" type="email">
  3. <label for="email">Email</label><input id="email" type="email"> Correct answer.
  4. <label><input type="email">Email</label><input id="email" type="email">

Explanation

A label is bound to a form control when its for attribute matches the control's id attribute. That association gives the field an accessible name and makes the label clickable. The other options either use a nonexistent attribute or reference an id that does not exist.

Question 45HTML Document Markup

Which attribute value on an img element provides a text alternative that screen readers announce when the image carries meaning?

  1. aria-description
  2. alt Correct answer.
  3. longdesc
  4. title

Explanation

The alt attribute supplies the text alternative that user agents expose when an image cannot be perceived visually. It is required for meaningful images and should be empty for purely decorative ones. The other attributes do not serve as the primary text alternative.

Question 46HTML Document Markup

Which list structure is appropriate for a set of steps that must be performed in order?

  1. <dl><dt>Mix</dt><dd>Bake</dd></dl>
  2. <ol><li>Mix</li><li>Bake</li></ol> Correct answer.
  3. <ul><li>Mix</li><li>Bake</li></ul>
  4. <menu><li>Mix</li><li>Bake</li></menu>

Explanation

An ordered list conveys sequence, which matches procedural steps where order matters. Unordered lists imply no ranking, and description lists pair terms with definitions. Choosing the list type that matches the content's semantics helps both readers and assistive technology.

Question 47HTML Document Markup

Which character reference should be used inside element content to display a literal less-than sign without starting a tag?

  1. &amp;
  2. &#34;
  3. &nbsp;
  4. &lt; Correct answer.

Explanation

The named reference &lt; resolves to the less-than character and prevents the parser from treating it as the start of a tag. The ampersand reference yields &, the numeric reference yields a double quote, and &nbsp; yields a non-breaking space. Each reference maps to a distinct character.

Question 48HTML Document Markup

Which heading structure best reflects a document with one main title and two equal subsections?

  1. <h1>Guide</h1><h2>Setup</h2><h2>Usage</h2> Correct answer.
  2. <h1>Guide</h1><h1>Setup</h1><h2>Usage</h2>
  3. <h2>Guide</h2><h1>Setup</h1><h1>Usage</h1>
  4. <h1>Guide</h1><h3>Setup</h3><h3>Usage</h3>

Explanation

Heading levels express hierarchy, so the page title takes h1 and its peer subsections take the next level, h2. Skipping from h1 to h3 breaks the outline, and making subsections h1 puts them at the same rank as the title. Consistent rank ordering keeps the document outline navigable.

Question 49HTML Document Markup

A table lists products with a header row of column names. Which markup correctly marks the header cells so they are announced with each data cell?

  1. <thead><td>Name</td><td>Price</td></thead>
  2. <tr><th scope="row">Name</th><th scope="row">Price</th></tr>
  3. <tr><td><b>Name</b></td><td><b>Price</b></td></tr>
  4. <tr><th scope="col">Name</th><th scope="col">Price</th></tr> Correct answer.

Explanation

Header cells use th, and scope="col" declares that each header labels its entire column. Bold td cells carry no header semantics, and scope="row" would describe a row header rather than a column header. Screen readers use these relationships to announce the right header with each cell.

Question 50HTML Document Markup

Which input type renders a control that lets a user pick one value from a predefined set of choices using a dropdown?

  1. <input type="radio">
  2. <input type="text">
  3. <select> Correct answer.
  4. <input type="checkbox">

Explanation

The select element creates a dropdown list of option elements from which the user chooses. A text input accepts free-form entry, radio buttons show all options at once, and checkboxes allow multiple independent selections. Only select provides the collapsed dropdown pattern.