ReactJS Interview Prep - HTML Fundamentals (Part 5)

Question 1

What is the 'Shadow DOM'?

Accepted Answer

Correct Answer

Answer

A malicious invisible layer on a webpage used for clickjacking.

Answer

A hidden API for encrypting CSS files.

Answer

A browser technology that allows you to attach a hidden, encapsulated DOM tree to an element, shielding its structure and styling from the rest of the page.

Answer

A server-side rendering technique used exclusively by React.

Question 2

What is the purpose of Open Graph meta tags (e.g., `<meta property="og:title">`)?

Accepted Answer

Correct Answer

Answer

To draw SVG graphics directly in the metadata.

Answer

To control how URLs are displayed when shared on social media platforms (like Facebook, Twitter, and LinkedIn).

Answer

To define the graph architecture of a GraphQL backend.

Answer

To allow search engines to bypass paywalls.

Question 3

What does the `min` and `max` attribute do on a `<input type="number">`?

Accepted Answer

Correct Answer

Answer

They define the minimum and maximum character length of the input string.

Answer

They set the lower and upper numeric boundaries for the input, triggering native form validation if the user enters a number outside this range.

Answer

They dictate the physical pixel width of the input field.

Answer

They limit the number of times the user can click the increment arrows.

Question 4

What is the `step` attribute used for on a `` or ``?

Accepted Answer

Correct Answer

Answer

It defines the sequential tab order of the element.

Answer

It dictates how much the value should increment or decrement when the user uses the stepper arrows or slider (e.g., `step="0.5"`).

Answer

It creates a multi-step form wizard automatically.

Answer

It specifies the animation speed of the input focus.

Question 5

Which HTML element is explicitly designed to encapsulate a piece of code (like a variable name or a block of computer code)?

Accepted Answer

Correct Answer

Answer

`<script>`

Answer

`<format>`

Answer

`<code>`

Answer

`<command>`

Question 6

How can you specify that an input field should automatically have the user's cursor placed inside it when the page loads?

Accepted Answer

Correct Answer

Answer

Using `<input focus="true">`

Answer

Using `<input active>`

Answer

Using `<input autofocus>`

Answer

Using `<input select="immediate">`

Question 7

What is the function of the `checked` attribute on a radio button or checkbox?

Accepted Answer

Correct Answer

Answer

It visually adds a green checkmark icon next to the element.

Answer

It forces the user to verify their selection before submitting.

Answer

It sets the element to be selected (toggled on) by default when the page loads.

Answer

It validates that the checkbox value matches a regular expression.

Question 8

What is a 'Data URI' in the context of the `src` attribute of an `<img>` tag?

Accepted Answer

Correct Answer

Answer

A URI that links exclusively to a database server.

Answer

A scheme that allows you to embed small files (like an image) directly inline as a base64-encoded string, avoiding a separate HTTP request.

Answer

A string that encrypts the image to prevent downloading.

Answer

A reference ID that links the image to a `<datalist>`.

Question 9

What is the role of the `<dfn>` element?

Accepted Answer

Correct Answer

Answer

To define a new CSS variable.

Answer

To represent the defining instance of a term (where a term is being defined in the text).

Answer

To define the document's default namespace.

Answer

To create a strict definition list similar to a table.

Question 10

What does the `hreflang` attribute specify on an `` or `` element?

Accepted Answer

Correct Answer

Answer

The programming language of the target URL.

Answer

The language of the linked document, which is crucial for internationalization (i18n) and SEO.

Answer

A restriction forcing the user's browser to translate the target page.

Answer

The character encoding standard of the target URL.

Question 11

What is the purpose of the `referrerpolicy` attribute?

Accepted Answer

Correct Answer

Answer

To define the commission rate for affiliate links.

Answer

To dictate how much referrer information (the URL the user is coming from) should be included with the request when navigating to a new page or fetching a resource.

Answer

To explicitly ban users originating from certain domains.

Answer

To create a strict policy for cross-site scripting.

Question 12

Which attribute ensures a form is NOT automatically validated by the browser?

Accepted Answer

Correct Answer

Answer

`ignore-validation`

Answer

`novalidate`

Answer

`validation="false"`

Answer

`bypass`

Question 13

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

Accepted Answer

Correct Answer

Answer

It must exclusively contain the `<h1>` of the page.

Answer

It replaces the `<head>` element in modern HTML5 documents.

Answer

It represents introductory content, typically containing a group of introductory or navigational aids for a page or a specific section/article.

Answer

It ensures the content remains fixed at the top of the viewport during scrolling.

Question 14

What does the `<footer>` element typically contain?

Accepted Answer

Correct Answer

Answer

JavaScript script tags to optimize loading.

Answer

Only copyright information and absolutely nothing else.

Answer

Information about its nearest sectioning ancestor, such as the author, copyright data, or links to related documents.

Answer

A specialized canvas for rendering pagination numbers.

Question 15

What happens if you place block-level elements (like `

` or `

`) inside an inline element (like ``)?

Accepted Answer

Correct Answer

Answer

The HTML fails to compile and the page goes blank.

Answer

The block-level elements automatically convert into inline elements.

Answer

It is invalid HTML and violates the content model, potentially causing unpredictable rendering behavior in the browser.

Answer

The browser automatically wraps the `` in a `

`.

Question 16

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

Accepted Answer

Correct Answer

Answer

To embed a short audio sample.

Answer

To represent sample output from a computer program.

Answer

To define a generic container for styling.

Answer

To sample the color of a specific pixel on the screen.

Question 17

What is the role of the `<figure>` element?

Accepted Answer

Correct Answer

Answer

To mathematically calculate equations natively in HTML.

Answer

To act as a self-contained unit of content (like an image, diagram, or code snippet) that is referenced from the main flow of the document.

Answer

To strictly format physical addresses.

Answer

To draw geometric shapes without CSS.

Question 18

How do you associate a `` with a specific `` element?

Accepted Answer

Correct Answer

Answer

By wrapping the `` inside the ``.

Answer

By setting the `id` of the datalist as the value of the `list` attribute on the input.

Answer

By using the `for` attribute on the datalist.

Answer

By matching their `name` attributes.

Question 19

What does the `dir` attribute control?

Accepted Answer

Correct Answer

Answer

The directory path for resolving relative URLs.

Answer

The text directionality (Left-to-Right or Right-to-Left) of the element's content.

Answer

The flexbox orientation of a container.

Answer

The animation direction for CSS transitions.

Question 20

Which HTML element provides a semantic container for navigational links?

Accepted Answer

Correct Answer

Answer

`<menu>`

Answer

`<navigation>`

Answer

`<nav>`

Answer

`<links>`

Question 21

What does the `multiple` attribute do when used on an `<input type="email">`?

Accepted Answer

Correct Answer

Answer

It duplicates the input field.

Answer

It allows the user to enter a comma-separated list of multiple email addresses.

Answer

It triggers an error, as `multiple` is only valid for files.

Answer

It automatically fetches multiple emails from the user's contacts.

Question 22

What is the function of the `<details>` tag's `open` attribute?

Accepted Answer

Correct Answer

Answer

It specifies the URL to open when the details are expanded.

Answer

It triggers an AJAX request when expanded.

Answer

It is a boolean attribute that dictates whether the details should be shown (expanded) by default when the page loads.

Answer

It forces the details to open in a new tab.

Question 23

What is the primary characteristic of the `` element compared to the `
` element?

Accepted Answer

Correct Answer

Answer

`
` forces a line break, while `` only suggests an opportunity for a line break if the browser determines it's necessary.

Answer

`<wbr>` breaks a word into multiple spans.

Answer

`` is an obsolete version of `
`.

Answer

`<wbr>` adds a horizontal line across the page.

Question 24

What does the `download` attribute do when it is given a value (e.g., `download="report.pdf"`)?

Accepted Answer

Correct Answer

Answer

It encrypts the downloaded file with a password.

Answer

It forces the browser to download the file and suggests 'report.pdf' as the default filename to save it as.

Answer

It prevents the file from being downloaded by anyone except the admin.

Answer

It specifies the server-side directory where the file is stored.

Question 25

Which tag represents a generic inline text container with absolutely no semantic meaning?

Accepted Answer

Correct Answer

Answer

`<span>`

Answer

`<div>`

Answer

`<p>`

Answer

`<i>`

Academy

ReactJS Interview Prep - HTML Fundamentals (Part 5)