ReactJS Interview Prep - HTML Fundamentals (Part 6)

Question 1

What does the `target="_blank"` attribute on an `<a>` tag do?

Accepted Answer

Correct Answer

Answer

It opens the linked document in a new window or tab.

Answer

It opens the link in an incognito window.

Answer

It downloads the link as a blank file.

Answer

It forces the link to load silently in the background.

Question 2

What is the purpose of Resource Hinting using `<link rel="preload">`?

Accepted Answer

Correct Answer

Answer

To lazily load images only when they enter the viewport.

Answer

To instruct the browser to initiate an early, high-priority request for a critical resource (like a specific font or LCP image) that will be needed later in the page load.

Answer

To pre-render an entire webpage in the background before the user clicks on it.

Answer

To securely verify the SSL certificate of a third-party script.

Question 3

How does `<link rel="prefetch">` differ from `preload`?

Accepted Answer

Correct Answer

Answer

`prefetch` is used exclusively for fetching JavaScript files.

Answer

`prefetch` is a low-priority suggestion to the browser to fetch a resource that might be needed for the *next* page navigation, whereas `preload` is for the *current* page.

Answer

`prefetch` guarantees the resource will be cached forever.

Answer

`prefetch` blocks the main thread, while `preload` is asynchronous.

Question 4

What does a Content Security Policy (CSP) meta tag achieve?

Accepted Answer

Correct Answer

Answer

It encrypts the entire DOM structure.

Answer

It acts as a firewall, defining a strict set of rules declaring which dynamic resources (like scripts or images) are allowed to load, severely mitigating Cross-Site Scripting (XSS) attacks.

Answer

It enforces HTTPS on all outgoing links.

Answer

It limits the maximum file size of the HTML document.

Question 5

Which attribute ensures that an `<input>` field cannot be modified by the user, but still submits its data?

Accepted Answer

Correct Answer

Answer

`disabled`

Answer

`locked`

Answer

`readonly`

Answer

`static`

Question 6

What is the function of the `aria-live` attribute?

Accepted Answer

Correct Answer

Answer

To broadcast a live video stream to a screen reader.

Answer

To instruct assistive technologies (like screen readers) to announce dynamic content changes (like error messages or toast notifications) without the user moving focus.

Answer

To prevent a session timeout by sending live pings to the server.

Answer

To dynamically update a clock widget on the page.

Question 7

What is the purpose of the `aria-expanded` attribute?

Accepted Answer

Correct Answer

Answer

To dictate the physical width of a flexbox container.

Answer

To indicate to screen readers whether a collapsible element (like an accordion or dropdown menu) is currently expanded or collapsed.

Answer

To allow a text area to automatically expand its height as the user types.

Answer

To define the macro-expansion of a code snippet.

Question 8

Which of the following tags is officially deprecated in HTML5 and should no longer be used for styling text?

Accepted Answer

Correct Answer

Answer

`<small>`

Answer

`<em>`

Answer

`<center>`

Answer

`<mark>`

Question 9

What does the `<bdi>` element do?

Accepted Answer

Correct Answer

Answer

Bi-Directional Isolation: It isolates a span of text that might be formatted in a different direction from its surrounding text, preventing layout breaks.

Answer

Binary Data Interface: Embeds WebAssembly code directly.

Answer

Block Display Inline: Overrides CSS to force block elements to display inline.

Answer

Background Data Injection: Pre-loads state for React components.

Question 10

What is the purpose of the `<base>` tag?

Accepted Answer

Correct Answer

Answer

To define the primary database connection string.

Answer

To specify a base URL for all relative URLs contained within a document.

Answer

To set the baseline alignment for inline-block elements.

Answer

To establish a secure sandbox for the entire document.

Question 11

What does the `sandbox` attribute do when added to an `<iframe>`?

Accepted Answer

Correct Answer

Answer

It caches the iframe locally.

Answer

It applies severe security restrictions (blocking scripts, forms, and popups) to the content within the iframe, which can be selectively relaxed.

Answer

It automatically resizes the iframe to fit its content.

Answer

It creates a virtual DOM instance specifically for the iframe.

Question 12

Which input type triggers a numeric keypad on mobile devices but allows decimal numbers, unlike `type="tel"`?

Accepted Answer

Correct Answer

Answer

`type="integer"`

Answer

`type="decimal"`

Answer

`type="number"`

Answer

`type="math"`

Question 13

What is the semantic purpose of the `<strong>` element?

Accepted Answer

Correct Answer

Answer

To draw a thick border around an element.

Answer

To strictly format text as bold without any underlying meaning.

Answer

To indicate that its contents have strong importance, seriousness, or urgency.

Answer

To define an element that cannot be deleted by JavaScript.

Question 14

Why should you add `rel="noopener"` or `rel="noreferrer"` when using `target="_blank"`?

Accepted Answer

Correct Answer

Answer

To speed up the page load time of the target URL.

Answer

To prevent the newly opened page from accessing the original page's `window` object via `window.opener`, preventing a specific type of phishing attack.

Answer

To force the new tab to open in the background without stealing focus.

Answer

To strip all cookies from the outgoing request.

Question 15

What does the `maxlength` attribute do on a text input?

Accepted Answer

Correct Answer

Answer

It dictates the maximum pixel width of the input field.

Answer

It specifies the maximum number of characters the user is allowed to enter into the input.

Answer

It defines the maximum file size (in MB) for an upload.

Answer

It restricts the number of words allowed.

Question 16

What is the purpose of the `<var>` element?

Accepted Answer

Correct Answer

Answer

To define a JavaScript variable strictly inside HTML.

Answer

To represent a variable in a mathematical expression or a programming context.

Answer

To define CSS custom properties natively.

Answer

To securely hide environment variables.

Question 17

How do you group related radio buttons together so that selecting one deselects the others?

Accepted Answer

Correct Answer

Answer

By wrapping them all in a single `<fieldset>`.

Answer

By giving them all the exact same `class` name.

Answer

By giving them all the exact same `name` attribute.

Answer

By linking them with the `group` attribute.

Question 18

What does the `title` attribute do when applied to almost any HTML element?

Accepted Answer

Correct Answer

Answer

It overrides the `<title>` of the document.

Answer

It provides advisory information, typically displayed as a tooltip when the user hovers the mouse over the element.

Answer

It dictates the text that appears when the element is printed.

Answer

It securely encrypts the element's inner text.

Question 19

What is the semantic purpose of the `<address>` tag?

Accepted Answer

Correct Answer

Answer

To force Google Maps integration.

Answer

To supply contact information for its nearest `

` or `` ancestor.

Answer

To strictly format an IP address.

Answer

To act as a generic wrapper for a form.

Question 20

Which tag is used to embed another HTML page inside the current page?

Accepted Answer

Correct Answer

Answer

`<embed>`

Answer

`<iframe>`

Answer

`<portal>`

Answer

`<frame>`

Question 21

What does the `for` attribute on a `<label>` element accomplish?

Accepted Answer

Correct Answer

Answer

It defines a standard `for` loop in inline JavaScript.

Answer

It logically associates the label with a specific form control by matching the control's `id`.

Answer

It specifies the intended audience for a specific section.

Answer

It creates a one-way data binding in modern frameworks.

Question 22

What is the `tabindex` attribute used for?

Accepted Answer

Correct Answer

Answer

To define the size of indentation tabs in `<pre>` blocks.

Answer

To indicate if an element can take input focus (whether it is part of the sequential keyboard navigation order, and what its order is).

Answer

To organize browser tabs into semantic groups.

Answer

To structure multi-level dropdown menus natively.

Question 23

What does the `<details>` element create natively?

Accepted Answer

Correct Answer

Answer

A hidden API request.

Answer

An interactive disclosure widget (accordion) from which the user can retrieve additional information.

Answer

A secure password field.

Answer

A layout grid for complex data tables.

Question 24

What is the primary function of the `accept` attribute in a file input (`<input type="file">`)?

Accepted Answer

Correct Answer

Answer

To automatically accept the user's Terms of Service agreement.

Answer

To limit the types of files the user can pick from the operating system's file dialog (e.g., `accept=".jpg, .png"`).

Answer

To force the server to accept the file regardless of size.

Answer

To encrypt the file before uploading.

Question 25

Congratulations on finishing HTML Fundamentals! Why is deep HTML knowledge vital even when building React applications?

Accepted Answer

Correct Answer

Answer

Because React does not support CSS.

Answer

Because React compiles down to a canvas drawing, requiring precise HTML math.

Answer

Because JSX compiles down to native DOM elements. Poor HTML structure results in terrible accessibility (a11y), bad SEO, and unnecessary React complexity.

Answer

Because React requires developers to use deprecated tags to trigger re-renders.

Academy

ReactJS Interview Prep - HTML Fundamentals (Part 6)