ReactJS Interview Prep - HTML Fundamentals (Part 3)

Question 1

What does ARIA stand for in the context of web development?

Accepted Answer

Correct Answer

Answer

Advanced Reactive Interface Architecture

Answer

Accessible Rich Internet Applications

Answer

Automated Rendering and Image API

Answer

Asynchronous Resource Integration Assets

Question 2

What is the primary purpose of the `aria-label` attribute?

Accepted Answer

Correct Answer

Answer

To provide a visible tooltip when hovering over an element.

Answer

To replace the native HTML `<label>` element for form inputs.

Answer

To provide an accessible name for an element when there is no visible text that adequately describes it to a screen reader.

Answer

To automatically translate the element's text into the user's native language.

Question 3

How does `aria-hidden="true"` differ from CSS `display: none`?

Accepted Answer

Correct Answer

Answer

They are identical; both completely remove the element from the DOM.

Answer

`aria-hidden="true"` hides the element from screen readers but leaves it visible on the screen, while `display: none` hides it from both.

Answer

`display: none` is only for images, while `aria-hidden` is for text.

Answer

`aria-hidden="true"` prevents the element from being clicked, while `display: none` just makes it transparent.

Question 4

What is the `role` attribute used for in HTML?

Accepted Answer

Correct Answer

Answer

To define user permission levels (e.g., admin, guest) for accessing specific UI components.

Answer

To explicitly define the semantic purpose of an element to assistive technologies, often overriding its native HTML semantics.

Answer

To link an element to a specific CSS animation sequence.

Answer

To determine the order in which elements are rendered by the browser.

Question 5

What does the `<meta name="description">` tag achieve?

Accepted Answer

Correct Answer

Answer

It provides a short summary of the page content that search engines often display in search result snippets.

Answer

It defines the default tooltip text for the entire webpage.

Answer

It forces screen readers to read this text before anything else on the page.

Answer

It is a deprecated tag used only by older indexing bots.

Question 6

Which tag defines the relationship between the current document and an external resource, frequently used for adding favicons?

Accepted Answer

Correct Answer

Answer

`<meta>`

Answer

`<icon>`

Answer

`<link>`

Answer

`<resource>`

Question 7

What is the `novalidate` attribute on a `<form>` element used for?

Accepted Answer

Correct Answer

Answer

It automatically bypasses server-side validation.

Answer

It prevents the browser from applying its native HTML5 form validation (like checking `required` or `type="email"`) upon submission.

Answer

It forces all inputs within the form to be purely optional.

Answer

It disables JavaScript validation scripts attached to the form.

Question 8

What is the semantic meaning of the `<bdo>` element?

Accepted Answer

Correct Answer

Answer

Block Document Object: Defines a generic block-level container.

Answer

Browser Data Override: Prevents cache storage for the enclosed content.

Answer

Bi-Directional Override: Overrides the current text directionality (e.g., forcing left-to-right text to render right-to-left).

Answer

Binary Data Output: Renders raw binary data streams.

Question 9

Which input type is specifically optimized for entering telephone numbers?

Accepted Answer

Correct Answer

Answer

`type="number"`

Answer

`type="phone"`

Answer

`type="tel"`

Answer

`type="contact"`

Question 10

What does the `formaction` attribute do when placed on a `<button type="submit">`?

Accepted Answer

Correct Answer

Answer

It validates the form before allowing the submission to proceed.

Answer

It overrides the `action` attribute defined on the parent `<form>` element, submitting data to a different URL.

Answer

It defines a JavaScript callback function to execute on submit.

Answer

It changes the HTTP method (GET/POST) used for submission.

Question 11

What is the difference between `

Accepted Answer

Correct Answer

Answer

`<script>` defines client-side logic, while `<noscript>` defines server-side logic.

Answer

`<script>` embeds executable code, while `<noscript>` provides fallback HTML content displayed only if scripts are disabled or unsupported.

Answer

`<noscript>` is used to cancel the execution of a previously defined `<script>`.

Answer

There is no functional difference; they are aliases.

Question 12

How do you define a thematic break (a structural transition) in HTML5?

Accepted Answer

Correct Answer

Answer

Using a `` tag.

Answer

Using a `
` tag.

Answer

Using an `<hr>` tag.

Answer

Using a `<transition>` tag.

Question 13

What is the `cite` attribute used for on a `<blockquote>` element?

Accepted Answer

Correct Answer

Answer

To automatically format the blockquote into APA style.

Answer

To provide a URL indicating the source document or message that was quoted.

Answer

To define the name of the author being quoted.

Answer

To trigger a popup tooltip with the source information.

Question 14

Which HTML element provides a semantic way to highlight text that was inserted into a document (often used alongside `<del>`)?

Accepted Answer

Correct Answer

Answer

`<add>`

Answer

`<new>`

Answer

`<ins>`

Answer

`<update>`

Question 15

What does the `readonly` attribute do on an `<input>` element compared to `disabled`?

Accepted Answer

Correct Answer

Answer

They are functionally identical.

Answer

`readonly` elements can be focused and their values are submitted with the form, whereas `disabled` elements cannot be focused and their values are NOT submitted.

Answer

`readonly` hides the input from screen readers, while `disabled` does not.

Answer

`disabled` elements can be clicked, but `readonly` elements completely block pointer events.

Question 16

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

Accepted Answer

Correct Answer

Answer

To display complex CSS grid layouts.

Answer

To natively embed high-resolution video streams.

Answer

To provide a blank, resolution-dependent bitmap canvas that can be drawn on using JavaScript (e.g., for games, graphs, or animations).

Answer

To create scalable vector graphics directly in HTML.

Question 17

What does the `<basefont>` element do in modern HTML5?

Accepted Answer

Correct Answer

Answer

It sets the default font family for the entire document.

Answer

It is a deprecated element and is entirely obsolete in HTML5; you must use CSS instead.

Answer

It allows you to import Google Fonts globally.

Answer

It scales all typography according to the user's viewport width.

Question 18

What is the function of the `accept-charset` attribute on a `<form>`?

Accepted Answer

Correct Answer

Answer

It specifies the character encodings that are to be used for the form submission.

Answer

It prevents users from typing special characters into inputs.

Answer

It encrypts the form payload before submitting.

Answer

It restricts file uploads to specific text file formats.

Question 19

How do you semantically represent a variable in a mathematical expression or programming context?

Accepted Answer

Correct Answer

Answer

`<var>`

Answer

`<i>`

Answer

`<code>`

Answer

`<math>`

Question 20

What does the `ping` attribute do on an `<a>` element?

Accepted Answer

Correct Answer

Answer

It checks if the target URL is online before allowing navigation.

Answer

It specifies a space-separated list of URLs to which the browser will send an asynchronous POST request when the link is clicked (useful for tracking/analytics).

Answer

It triggers an alert if the link takes too long to load.

Answer

It attempts to resolve the DNS of the URL preemptively.

Question 21

What is the purpose of `<meta http-equiv="refresh" content="30">`?

Accepted Answer

Correct Answer

Answer

It forces the browser to clear its cache every 30 minutes.

Answer

It instructs the browser to automatically reload the current page every 30 seconds.

Answer

It extends the HTTP connection timeout limit to 30 seconds.

Answer

It is used to dynamically inject new content via AJAX.

Question 22

Which element is used to define a caption for a `<table>`?

Accepted Answer

Correct Answer

Answer

`<title>`

Answer

`<header>`

Answer

`<caption>`

Answer

`<summary>`

Question 23

What does the `accesskey` attribute provide?

Accepted Answer

Correct Answer

Answer

A secure token for API authentication.

Answer

A shortcut key allowing the user to quickly focus or activate an element using their keyboard.

Answer

A password prompt that must be completed before an element is visible.

Answer

A strict hierarchical tab index.

Question 24

What is the primary difference between `` and ``?

Accepted Answer

Correct Answer

Answer

`` makes text bold, while `` makes text italic.

Answer

`` is a block-level element, while `` is inline.

Answer

`` is purely presentational (draws attention without adding importance), while `` semantically indicates that the text has strong importance or urgency.

Answer

There is no difference; `` is simply an abbreviation for ``.

Question 25

Which attribute on an `<img>` tag helps the browser calculate layout before the image downloads, preventing Cumulative Layout Shift (CLS)?

Accepted Answer

Correct Answer

Answer

`loading="lazy"`

Answer

Providing explicit `width` and `height` attributes.

Answer

`decoding="async"`

Answer

`alt=""`

Academy

ReactJS Interview Prep - HTML Fundamentals (Part 3)