HTML Multiple Choice Questions

What does HTML stand for?
- A) Hyper Text Markup Language
- B) High Text Markup Language
- C) Hyperlink and Text Markup Language
- D) Home Tool Markup Language
- Answer: A) Hyper Text Markup Language
Which tag is used to define a hyperlink in HTML?
- A) <a>
- B) <link>
- C) <href>
- D) <hyperlink>
- Answer: A) <a>
Which tag is used to create an unordered list in HTML?
- A) <ol>
- B) <list>
- C) <ul>
- D) <unordered>
- Answer: C) <ul>
Which tag is used to define an image in HTML?
- A) <image>
- B) <img>
- C) <picture>
- D) <src>
- Answer: B) <img>
Which tag is used to define a table in HTML?
- A) <table>
- B) <tr>
- C) <td>
- D) <tab>
- Answer: A) <table>
What is the correct HTML for creating a checkbox?
- A) <check>
- B) <input type="check">
- C) <checkbox>
- D) <input type="checkbox">
- **Answer: D) <input type="checkbox">**
Which attribute is used to specify the URL of the page that the link goes to?
- A) url
- B) src
- C) href
- D) link
- Answer: C) href
What is the correct HTML for inserting a line break?
- A) <break>
- B) <lb>
- C) <br>
- D) <linebreak>
- Answer: C) <br>
Which tag is used to define a paragraph in HTML?
- A) <paragraph>
- B) <p>
- C) <para>
- D) <ph>
- Answer: B) <p>
Which HTML attribute specifies an alternate text for an image, if the image cannot be displayed?
- A) alt
- B) title
- C) src
- D) href
- Answer: A) alt
Which tag is used to define a header in HTML?
- A) <header>
- B) <h>
- C) <head>
- D) <heading>
- Answer: B) <h>
What is the purpose of the HTML <meta> tag?
- A) To define a hyperlink
- B) To define metadata about an HTML document
- C) To create a list
- D) To define a section in an HTML document
- Answer: B) To define metadata about an HTML document
Which HTML tag is used to define an input field for entering a password?
- A) <password>
- B) <input type="password">
- C) <input type="text">
- D) <input>
- Answer: B) <input type="password">
What is the correct way to add comments in HTML?
- A) 
- B) // This is a comment
- C) /* This is a comment */
- D) # This is a comment
- Answer: A) 
Which HTML element is used to specify a footer for a document or section?
- A) <footer>
- B) <foot>
- C) <end>
- D) <bottom>
- Answer: A) <footer>
Which tag is used to define an abbreviation or acronym in HTML?
- A) <abbr>
- B) <acronym>
- C) <abbrv>
- D) <acro>
- Answer: A) <abbr>
What is the purpose of the HTML <iframe> element?
- A) To embed external content into a webpage
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To embed external content into a webpage
Which HTML tag is used to define an unordered list item?
- A) <li>
- B) <ul>
- C) <list>
- D) <item>
- Answer: A) <li>
What is the correct way to define a hyperlink that opens in a new tab?
- A) <a href="url" target="_new">Link</a>
- B) <a href="url" target="_blank">Link</a>
- C) <a href="url" newtab>Link</a>
- D) <a href="url" blank>Link</a>
- Answer: B) <a href="url" target="_blank">Link</a>
Which HTML attribute is used to specify the language of the content?
- A) lang
- B) language
- C) lingo
- D) locale
- Answer: A) lang
Which HTML tag is used to define a section in a document?
- A) <section>
- B) <div>
- C) <part>
- D) <segment>
- Answer: A) <section>
What is the correct HTML for creating a hyperlink?
- A) <a href="url">Link</a>
- B) <link href="url">Link</link>
- C) <href="url">Link</href>
- D) <hyperlink url="url">Link</hyperlink>
- Answer: A) <a href="url">Link</a>
What does the HTML <canvas> element do?
- A) Defines a container for navigation links
- B) Defines a container for image maps
- C) Defines a container for graphics
- D) Defines a container for videos
- Answer: C) Defines a container for graphics
What is the correct HTML for creating a button?
- A) <button>
- B) <btn>
- C) <button></button>
- D) <button />
- Answer: C) <button></button>
Which HTML element is used to define a list of navigation links?
- A) <nav>
- B) <navigation>
- C) <links>
- D) <list>
- Answer: A) <nav>
Which HTML tag is used to define a paragraph break?
- A) <p>
- B) <br>
- C) <paragraph>
- D) <break>
- Answer: B) <br>
What is the purpose of the HTML <video> element?
- A) To define a video clip
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To define a video clip
Which HTML tag is used to define a form in HTML?
- A) <form>
- B) <input>
- C) <button>
- D) <submit>
- Answer: A) <form>
What is the correct HTML for creating an email link?
- A) <a href="mailto:email@example.com">Email</a>
- B) <mail>email@example.com</mail>
- C) <email>email@example.com</email>
- D) <a>email@example.com</a>
- Answer: A) <a href="mailto:email@example.com">Email</a>
Which HTML tag is used to define an italicized text?
- A) <italic>
- B) <i>
- C) <italicize>
- D) <italics>
- Answer: B) <i>
What is the purpose of the HTML <script> element?
- A) To define a section of text
- B) To create a hyperlink
- C) To define client-side JavaScript
- D) To define a table
- Answer: C) To define client-side JavaScript
Which HTML tag is used to define a navigation link within a navigation list?
- A) <item>
- B) <nav>
- C) <li>
- D) <link>
- Answer: C) <li>
What is the correct HTML for inserting a horizontal line?
- A) <line>
- B) <hr>
- C) <hl>
- D) <horizontal>
- Answer: B) <hr>
Which HTML tag is used to define a division or a section in an HTML document?
- A) <division>
- B) <div>
- C) <section>
- D) <part>
- Answer: B) <div>
What is the purpose of the HTML <iframe> element?
- A) To embed external content into a webpage
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To embed external content into a webpage
Which HTML element is used to define a section in a document?
- A) <section>
- B) <div>
- C) <part>
- D) <segment>
- Answer: A) <section>
What is the correct way to define a hyperlink that opens in a new tab?
- A) <a href="url" target="_new">Link</a>
- B) <a href="url" target="_blank">Link</a>
- C) <a href="url" newtab>Link</a>
- D) <a href="url" blank>Link</a>
- Answer: B) <a href="url" target="_blank">Link</a>
Which HTML attribute is used to specify the language of the content?
- A) lang
- B) language
- C) lingo
- D) locale
- Answer: A) lang
Which HTML tag is used to define a header in HTML?
- A) <header>
- B) <h>
- C) <head>
- D) <heading>
- Answer: B) <h>
What is the purpose of the HTML <meta> tag?
- A) To define a hyperlink
- B) To define metadata about an HTML document
- C) To create a list
- D) To define a section in an HTML document
- Answer: B) To define metadata about an HTML document
Which HTML tag is used to define an input field for entering a password?
- A) <password>
- B) <input type="password">
- C) <input type="text">
- D) <input>
- Answer: B) <input type="password">
What is the correct way to add comments in HTML?
- A) 
- B) // This is a comment
- C) /* This is a comment */
- D) # This is a comment
- Answer: A) 
Which HTML element is used to specify a footer for a document or section?
- A) <footer>
- B) <foot>
- C) <end>
- D) <bottom>
- Answer: A) <footer>
Which tag is used to define an abbreviation or acronym in HTML?
- A) <abbr>
- B) <acronym>
- C) <abbrv>
- D) <acro>
- Answer: A) <abbr>
What does the HTML <canvas> element do?
- A) Defines a container for navigation links
- B) Defines a container for image maps
- C) Defines a container for graphics
- D) Defines a container for videos
- Answer: C) Defines a container for graphics
What is the correct HTML for creating a button?
- A) <button>
- B) <btn>
- C) <button></button>
- D) <button />
- Answer: C) <button></button>
Which HTML element is used to define a list of navigation links?
- A) <nav>
- B) <navigation>
- C) <links>
- D) <list>
- Answer: A) <nav>
Which HTML tag is used to define a paragraph break?
- A) <p>
- B) <br>
- C) <paragraph>
- D) <break>
- Answer: B) <br>
What is the purpose of the HTML <video> element?
- A) To define a video clip
- B) To create a hyperlink
- C) To define an image
- D) To style text
- Answer: A) To define a video clip
Which HTML tag is used to define an italicized text?
- A) <italic>
- B) <i>
- C) <italicize>
- D) <italics>
- Answer: B) <i>

Certainly! Here are 30 multiple-choice questions (MCQs) and 5 coding tasks with questions, answers, and solutions for your React trainee examination:

Multiple Choice Questions React basic (MCQs):

What is the purpose of React in web development?
- A) Backend scripting
- B) Database management
- C) Frontend user interface
- D) Server configuration
- Answer: C) Frontend user interface
Which of the following is NOT a core concept of React?
- A) Component
- B) State
- C) Props
- D) Looping
- Answer: D) Looping
Which method is called when a component is removed from the DOM?
- A) componentWillUnmount
- B) componentDidUnmount
- C) componentWillUnmounted
- D) componentWillUnmounting
- Answer: A) componentWillUnmount
What hook is used to perform side effects in functional components?
- A) useState
- B) useEffect
- C) useContext
- D) useReducer
- Answer: B) useEffect
Which of the following is a popular library for state management in React?
- A) Redux
- B) Reactivity
- C) Flux
- D) Reflux
- Answer: A) Redux
What does JSX stand for?
- A) JavaScript XML
- B) JavaScript Extension
- C) JSX Syntax
- D) JavaScript Extension Language
- Answer: A) JavaScript XML
Which method is called before rendering a component?
- A) componentWillMount
- B) componentWillRender
- C) componentDidMount
- D) componentWillUpdate
- Answer: A) componentWillMount
What is the purpose of React Router?
- A) State management
- B) Component styling
- C) Routing in React applications
- D) API fetching
- Answer: C) Routing in React applications
What is the main function of useState hook in React?
- A) Fetch data from an API
- B) Manage component lifecycle
- C) Manage state in functional components
- D) Handle events in functional components
- Answer: C) Manage state in functional components
Which method is used to change the state of a component in React?
- A) setState()
- B) changeState()
- C) modifyState()
- D) updateState()
- Answer: A) setState()
In React, what is the purpose of keys in lists?
- A) To uniquely identify elements and improve performance
- B) To style elements based on their position
- C) To add animation effects to elements
- D) To dynamically generate elements
- Answer: A) To uniquely identify elements and improve performance
Which method is used to fetch data from an API in React?
- A) fetch()
- B) axios()
- C) getData()
- D) request()
- Answer: A) fetch()
What is the significance of the virtual DOM in React?
- A) It allows for direct manipulation of the DOM
- B) It provides a lightweight version of the DOM for testing
- C) It improves performance by minimizing DOM updates
- D) It enables server-side rendering of React components
- Answer: C) It improves performance by minimizing DOM updates
Which of the following is NOT a valid way to style components in React?
- A) Inline styles
- B) External CSS files
- C) CSS Modules
- D) React Stylesheet
- Answer: D) React Stylesheet
What is the purpose of props in React?
- A) To manage component state
- B) To handle component events
- C) To pass data from parent to child components
- D) To define component styles
- Answer: C) To pass data from parent to child components
What does Redux offer for managing application state in React?
- A) Local component state management
- B) Centralized state management
- C) Event handling
- D) Routing
- Answer: B) Centralized state management
Which hook is used to perform data fetching and side effects in React?
- A) useState
- B) useEffect
- C) useContext
- D) useReducer
- Answer: B) useEffect
What is the purpose of React.Fragment?
- A) To create reusable components
- B) To improve performance by reducing unnecessary re-renders
- C) To group multiple elements without adding extra nodes to the DOM
- D) To optimize DOM traversal
- Answer: C) To group multiple elements without adding extra nodes to the DOM
Which of the following lifecycle methods is invoked just before a component is unmounted from the DOM?
- A) componentWillUnmount
- B) componentWillUnmount
- C) componentDidUpdate
- D) componentWillUnmounted
- Answer: A) componentWillUnmount
What is the purpose of the useCallback hook in React?
- A) To memoize functions and prevent unnecessary re-renders
- B) To manage component state
- C) To perform data fetching
- D) To handle user input
- Answer: A) To memoize functions and prevent unnecessary re-renders
Which method is used to render multiple child components in React?
- A) renderChildren()
- B) mapChildren()
- C) forEachChild()
- D) React.Children.map()
- Answer: D) React.Children.map()
What is the purpose of shouldComponentUpdate lifecycle method in React?
- A) To render components based on conditions
- B) To prevent unnecessary re-renders for performance optimization
- C) To fetch data from an API
- D) To handle component errors
- Answer: B) To prevent unnecessary re-renders for performance optimization
Which of the following is used to handle forms in React?
- A) useState
- B) useEffect
- C) useContext
- D) useForm
- Answer: A) useState
What is the purpose of keys in React when rendering lists?
- A) To provide unique identifiers to

list items - B) To style list items individually - C) To group list items - D) To iterate over list items - Answer: A) To provide unique identifiers to list items

What is the main advantage of using React hooks over class components?
- A) Class components offer better performance
- B) Hooks allow for more concise and readable code
- C) Hooks are only used for state management
- D) Class components are deprecated
- Answer: B) Hooks allow for more concise and readable code
What does the useContext hook in React provide?
- A) Access to the Redux store
- B) Access to the component's context
- C) Access to the DOM context
- D) Access to the browser's history
- Answer: B) Access to the component's context
Which method is used to render React components on the server side?
- A) ReactDOM.renderToString()
- B) ReactDOM.renderToServer()
- C) ReactDOM.renderOnServer()
- D) ReactDOM.renderToStaticMarkup()
- Answer: A) ReactDOM.renderToString()
What is the purpose of the useRef hook in React?
- A) To create references to DOM elements
- B) To manage component state
- C) To fetch data from an API
- D) To handle user input
- Answer: A) To create references to DOM elements
Which of the following is NOT a valid way to define event handlers in React?
- A) onClick={() => handleClick()}
- B) onClick={handleClick}
- C) onClick={this.handleClick}
- D) onClick={handleClick()}
- Answer: D) onClick={handleClick()}

Coding Tasks:

Coding Task 1:

Prompt: Create a React component called Toggle that toggles the visibility of its content when a button is clicked. Initially, the content should be hidden.

import React, { useState } from "react";

const Toggle = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Content</button>
      {isVisible && <div>This content is now visible!</div>}
    </div>
  );
};

export default Toggle;

Coding Task 2:

Prompt: Create a React component called Timer that displays a timer that starts at 0 when the component mounts and increments every second.

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <h2>Timer: {seconds} seconds</h2>
    </div>
  );
};

export default Timer;

Coding Task 3:

Prompt: Create a React component called ColorPicker that allows the user to select a color from a dropdown menu and changes the background color of the component accordingly.

import React, { useState } from "react";

const ColorPicker = () => {
  const [selectedColor, setSelectedColor] = useState("");

  const handleChange = (event) => {
    setSelectedColor(event.target.value);
  };

  return (
    <div style={{ backgroundColor: selectedColor, padding: "20px" }}>
      <h2>Color Picker</h2>
      <select value={selectedColor} onChange={handleChange}>
        <option value="">Select a color</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select>
    </div>
  );
};

export default ColorPicker;

Coding Task 4:

Prompt: Create a React component called TodoList that allows the user to add and remove items from a todo list.

import React, { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const handleAddTodo = () => {
    if (inputValue.trim() !== "") {
      setTodos([...todos, inputValue]);
      setInputValue("");
    }
  };

  const handleRemoveTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}{" "}
            <button onClick={() => handleRemoveTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Coding Task 5:

Prompt: Create a React component called Accordion that displays a list of items. When an item is clicked, its content expands or collapses.

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [expandedIndex, setExpandedIndex] = useState(null);

  const toggleItem = (index) => {
    setExpandedIndex(index === expandedIndex ? null : index);
  };

  return (
    <div>
      <h2>Accordion</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            <button onClick={() => toggleItem(index)}>{item.title}</button>
            {expandedIndex === index && <div>{item.content}</div>}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Accordion;