50 HTML Multiple Choice Questions (MCQs) with Answers

Understanding HTML: Building Blocks of Web Pages

HTML stands for HyperText Markup Language and is the primary language used for creating web pages. It provides the basic structure for a website and tells the web browser how to display the content. HTML consists of a set of elements that describe the different parts of a web page such as headings, paragraphs, links, and more.

A basic HTML file includes the following components:


<!DOCTYPE html>
<html>
    <head>
        <title>Title Page</title>
    </head>
    <body>
        <h1>Heading Line</h1>
        <p>Paragraph Lines</p>
    </body>
</html>

The different elements of an HTML file are listed below:

       
  • <!DOCTYPE html>

    : This declares that the document is an HTML5 document.

  •    

  • <html>

    : This is the root element of the HTML page.

  •    

  • <head>

    : This element contains the metadata for the HTML page.

  •    

  • <title>

    : This element creates a title for the current web page.

  •    

  • <body>

    : This element contains the content of the web page such as headings, links, paragraphs, etc.

  •    

  • <h1>

    : This element creates a heading in varying sizes. The number '1' denotes the largest size while '6' denotes the smallest.

  •    

  • <p>

    : This element creates a paragraph.

The syntax of an HTML element comprises a start tag, an end tag, and the content in between. However, some elements do not require an end tag.

HTML is a key component of web development and understanding its basics can aid you in creating web pages and applications.

Take this HTML quiz to test your knowledge!

Refactoring Code to Improve Readability and Style

Code:


function calcSum(intArray) {
    var summation = 0;
    for (i = 0; i < intArray.length; i++) {
        summation += intArray[i];
    }
    return summation;
}

var array = [1, 5, 7, 11, -2];

var result = calcSum(array);
console.log(result);

Refactored code:

javascript
// This function calculates the sum of elements in an array.
function calculateSum(array) {
    let sum = 0;
    for (let i = 0; i < array.length; i++) {
        sum += array[i];
    }
    return sum;
}

// Sample input array.
const inputArray = [1, 5, 7, 11, -2];

// Call the function and store the result.
const result = calculateSum(inputArray);

// Print the result to the console.
console.log(result);

Explanation: - Changed function name to `calculateSum` to make it more descriptive of what it does. - Used `let` and `const` instead of `var` for better code block scoping and read-only variables, respectively. - Added comments to the code to explain what each block does. - Renamed the function parameter from `intArray` to `array` to make it more clear what its data type is. - Used `camelCase` for variable names as per JavaScript naming conventions. - Used `const` for sample input array as it shouldn't be reassigned. - Removed unnecessary semicolons.

Header Sizes in HTML

HTML supports six header sizes that can be used to indicate the importance of headings, ranging from h1 to h6.

Therefore, the correct answer to the question is 6.

Smallest HTML Header by Default

The smallest header in HTML by default is h6.

Types of Lists in HTML

In HTML, there are two types of lists:

  • Ordered List: A list with a numbered sequence of items. To create an ordered list, use the <ol> tag.
  • Unordered List: A list with a bullet point before each item. To create an unordered list, use the <ul> tag.

Example code for creating an ordered list: <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

Example code for creating an unordered list: <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

Creating an Ordered List in HTML

To create an ordered list in HTML, you need to use the "ol" tag. Here's an example:


    <ol><br>
      <li>First item</li><br>
      <li>Second item</li><br>
      <li>Third item</li><br>
    </ol>

This will create a numbered list with the following items:

  1. First item
  2. Second item
  3. Third item

Make sure to include the "li" tag for each item in the list. You can also add additional HTML tags within the "li" tag to format your list items.

Default Extension of HTML Files

HTML files are saved with the extension .html or .htm by default.

.html


Correct Syntax for Enclosing HTML Tags

In HTML, tags are enclosed within angle brackets <> and not within curly braces or exclamation marks.

<html>   
  <head>   
    <title>Page Title</title>   
  </head>   
  <body>   
    <h1>This is a Heading</h1>   
    <p>This is a paragraph.</p>   
  </body>   
</html>

Explanation:

The tag is used to make the text within it appear in bold font.

Understanding HTML

In HTML, only the tags defined within the language can be used. User-defined tags are not recognized by HTML, since it is a markup language that follows a specific set of rules and standards. Therefore, the correct option is B - HTML uses tags defined within the language.

Displaying Preformatted Text in HTML

There are several ways to display preformatted text in HTML:

  • Using the
    <pre>

    tag

  • Using the
    <xmp>

    tag (deprecated)

  • Using the
    <textarea>

    tag

  • Using CSS properties such as
    white-space: pre
  • All of the above

However, for text that is meant to be displayed as code or computer output, it is common to use the

<code>

tag within a

<pre>

tag for semantic accuracy:

<pre><pre><code>
function computeSum(a, b) {
  return a + b;
}
</code></pre>

This will display:

function computeSum(a, b) {
  return a + b;
}

Tags that don't require a closing tag

Some HTML tags do not require a closing tag. This includes:

  • The
    <br>

    tag: used to insert a line break or carriage-return within a text block.

  • The
    <input>

    tag: used to create various types of input elements on a webpage.

  • The
    <img>

    tag: used to embed images in HTML documents.

  • The
    <meta>

    tag: used to provide metadata about an HTML document.

It is important to note that while these tags do not require a closing tag, you still need to close them properly in HTML5 by adding a forward slash before the closing angle bracket:

<br />
<input type="text" />
<img src="example.jpg" alt="Example Image" />
<meta charset="UTF-8" />

Explanation:

Empty tags in HTML are tags that do not require a closing tag. They are self-closing tags and are used to insert images, input fields, and other elements with no content.


Example of an empty tag: 
<img src="image.jpg" alt="description"/>

In the above example, the image tag does not need a closing tag as it does not contain any content.

Attributes used to Resize an Image

The correct attributes used to resize an image are width and height.


<img src="image.jpg" alt="My Image" width="500" height="300">

The width attribute specifies the width of the image, while the height attribute specifies the height of the image in pixels.

HTML Element Naming with ID Attributes

The ID attribute in HTML is used to give a unique name to an HTML element. It provides a unique identifier for the element and can be used to manipulate it with JavaScript or CSS styles for styling purposes. The correct answer to the question is id.


// Example usage of id in HTML
<div id="mydiv">
  <p>This is my div.</p>
</div>


Explanation:

The HTML style attribute is used to add styles like font, color, and size to an HTML element. It allows you to add unique styles to a particular element by specifying the style rules directly in the HTML document, rather than creating a stylesheet. The style attribute's value is a string that contains one or more CSS style declarations separated by semicolons.

Code:

What is the function of the HTML style attribute?

The HTML style attribute is used to add styles like font, color, and size to an HTML element. It allows you to add unique styles to a particular element by specifying the style rules directly in the HTML document, rather than creating a stylesheet. The style attribute's value is a string that contains one or more CSS style declarations separated by semicolons.

Correct Syntax for Using the HTML Style Attribute

style="property:value;"

The correct syntax for using the HTML style attribute requires the attribute to be included in the opening tag of the element we want to style, followed by an equal sign and a pair of double quotation marks containing the property and value of the style. For example, to set the color of a paragraph to red, the code would be:

<p style="color:red;">This is a red paragraph.</p>


Answer

The HTML element used to define description data is the <meta> tag.

Correcting Errors in Text

The correct answer to the question is "font-family". This CSS property is used to specify the font of text in a document.

/* Example usage */ p {font-family: Arial, sans-serif;}

In the example above, the font-family property is used to set the font of all paragraph elements to Arial or a sans-serif font if Arial is not installed. It's important to note that using a generic font like "sans-serif" ensures that the text will have a fallback font in case the desired font is not supported on the user's device.

It's essential to maintain proper writing and style conventions in English language text. This includes using capital letters at the start of a sentence, using appropriate punctuation marks, and avoiding grammatical errors.

How to Define Quotations in HTML

Quotations in HTML can be defined using the <blockquote> tag. This tag is used to define a section that is quoted from another source.

For shorter quotes or quotes that are inline with other text, the <q> tag can be used. This tag defines a short quoted text and is usually displayed with quotation marks.

It is important to properly attribute the source of the quote using the <cite> tag, which defines the title of the work that the quote is taken from.

Tag Used to Display an Image on a Webpage

The correct tag used to render an image on a webpage is

<img>

.

Identifying the Tag for Italicizing Text

To render text in italics, the tag should be used. This tag is used to emphasize text, and it has the same effect as the tag. Therefore, the correct answer is none of the above, as none of the listed tags are specifically used for italicizing text.

Correct syntax for HTML Comment

The correct syntax to write an HTML comment is:

<!-- Comment goes here -->


Definition of Colors in HTML

In HTML, colors can be defined using several methods which include RGB, HEX, HSL, RGBA, HSLA values or by using predefined color names. The most commonly used methods are RGB and HEX values.

RGB values, which stands for "Red Green Blue" are numeric values that define the intensity of each color component (red, green and blue) on a scale from 0 to 255. This is expressed using the syntax "rgb(R, G, B)".

HEX values are six-digit alphanumeric codes that represent a color's RGB values. The first two digits specify the intensity of red, the next two specify the intensity of green, and the last two specify the intensity of blue. Hex values are preceded by a hash (#) symbol.

HSL values stand for "Hue Saturation Lightness". These values denote a color's hue, saturation level and brightness. They are expressed using the syntax "hsl(H, S%, L%)" where H is the hue, S is the saturation level and L is the brightness.

RGBA and HSLA values are similar to RGB and HSL values, respectively, but with the addition of an alpha channel which specifies the color's transparency. The alpha channel value ranges from 0 to 1.

In summary, HTML provides several options for defining colors, giving developers and designers a wide range of choices to achieve their desired visual effects.

HTML Color Property

In HTML, the color property is used to set the color of the text content of various elements.

The correct answer to the question is: color.

The other options are incorrect:

  • background-color sets the background color of an HTML element.
  • font-color is not a valid property in HTML.
  • text-color is not a valid property in HTML.

Therefore, to change the color of text in an HTML element, use the color property.


/* Here's an example of how to set color with CSS */
p {
  color: blue;
}


Types of Unordered Lists in HTML

An unordered list in HTML can have three types of bullets:

  • Circle
  • Square
  • Disc

Setting Border Color in HTML

In HTML, the border property is used to set the border properties, including the color. Here is an example:


    <div style="border: 1px solid #000000;">
        This is a div element with a border.
    </div>

In the example above, we have set the border property of a div element to 1 pixel width, with a solid style, and the color black (#000000).

Therefore, the correct answer to the question is: border.

Creating an HTML Page

To create an HTML page, you need a text editor and a web browser. These are the two essential tools that you need to get started. With a text editor, you can write the HTML code that will make up your web page. Once you save the file with an HTML extension, you can open it in a web browser and see how it looks.


// Example HTML code:
<!DOCTYPE html>
<html>
<head>
	<title>My First HTML Page</title>
</head>
<body>
	<h1>Welcome to my website!</h1>
	<p>This is my first HTML page.</p>
</body>
</html>

In the above example code, we have created a simple HTML page with a heading and a paragraph. When you save this code as an HTML file and open it in a web browser, you will see the heading and the paragraph displayed on the page.

Identifying the Start and Endpoints of a Webpage using HTML Tags

The

<html>

tag is used to indicate the start of a webpage, while the

</html>

tag indicates the end of a webpage. These tags wrap around all other HTML tags and elements on the webpage. They serve as the root element of an HTML file and provide the basic structure for any webpage.

Explanation:

HTML tags are not case-sensitive, which means that the letter case (uppercase or lowercase) used while writing the tag doesn't matter. For example, the tags <HTML>, <html>, and <Html> are all considered the same in HTML.


  // Example:
  <HTML>
    <HEAD>
      <TITLE>My Title</TITLE>
    </HEAD>
    <BODY>
      <H1>Hello World!</H1>
    </BODY>
  </HTML>

The Root Element of an HTML Document

The

<html>

tag is known as the root element of an HTML document.

This tag is the outermost tag in an HTML document and serves as a container for all other HTML tags and content within it.

Representing Black Color in RGB

In terms of RGB values, black is represented as RGB(0, 0, 0).

Out of the given options, the correct RGB value for representing black color is RGB(0, 0, 0).

RGB(0, 0, 0)

is the correct answer.

Explaining the Alpha Value in RGBA

The Alpha value in RGBA color model signifies the level of opacity a color has. It is represented by the A in RGBA, which stands for alpha channel. This channel measures the level of transparency or opacity of a color, where 0 represents fully transparent and 1 represents fully opaque. Therefore, option A, which states that the Alpha value in RGBA represents the opacity value for a color is the correct answer.

Understanding Alpha Values

In computer graphics, the Alpha value denotes the level of transparency or opacity of a pixel. It is usually represented as a floating point number between 0.0 (fully transparent) and 1.0 (fully opaque).

Therefore, an Alpha value of 0.0 represents full transparency, meaning the pixel is completely see-through. On the other hand, an Alpha value of 1.0 represents full opacity, indicating that the pixel is completely solid and not transparent at all.

In summary, the Alpha value determines the level of transparency or opacity of a pixel, and an Alpha value of 0.0 represents full transparency.

Setting a font for the whole page

To set a default font type for a whole page, you can use the

<body>

tag and the CSS

font-family

property. Here's an example:

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

In this example, the

<body>

tag is used to set the font for the whole page to Arial, sans-serif. This means that all the text inside the body of the HTML document will use this font, unless otherwise specified.

You can also use other font properties to further customize the font, such as

font-size

and

font-weight

.

Identifying the type of CSS used alongside the style attribute of HTML elements

When CSS is used with the style attribute of HTML elements, it is referred to as Inline CSS.

Determine RGB colors with equal values

Among the colors white, gray, and black, only the color gray has equal values ​​for R, G, and B, which are all equal to 50. The RGB values ​​for white are (100, 100, 100), while the RGB values for black are (0, 0, 0).


    Gray: RGB(50, 50, 50)<br>
    White: RGB (100, 100, 100)<br>
    Black: RGB(0, 0, 0)


Understanding the Behavior of the and Tags in HTML

The and tags in HTML are used for formatting text. The tag is used to make the text bold while the tag is used to make the text italicized. One of the main specialties of these tags is that they can be repeated multiple times without any restrictions.

Another important thing to note about these tags is that their effects can be stacked on top of each other. This allows you to make text both bold and italicized by using both tags on the same text.

Answer:

<tr>

tag is used to add a row to a table in HTML.

Which Property Allows an Image Link to Show a Text Label?

The correct property that allows an image link to show a text label is the "alt" attribute. It is short for alternative text and it provides a description of the image in case it cannot be displayed or for users who use screen readers. Therefore, it is important to include relevant and descriptive alt text for image links to improve accessibility and enhance SEO.

What happens when a background image is too small for the screen?

If a background image is smaller than the screen on which it is displayed, it will be repeated by default on most screens. This means that the image will be tiled both vertically and horizontally to fill the entire background area. It will not be stretched or displayed in black blank spaces.

Properties of Block-Level Elements

Block-level elements have the following properties:

  • They always start on a new line
  • They always take up the full width available
  • They have a top and bottom margin

Therefore, the correct answer is: All of the above.

Examples of Block-level Elements in HTML

The following are examples of block-level elements in HTML:


<div>
<h1>
<p>
<ol>
<ul>
<li>
<table>
<footer>
<header>
<blockquote>
<section>
<address> 

All of the above examples are block-level elements in HTML since they create a block level box on the webpage and take up the entire available width

Calculating Number of Characters in 1KB

To calculate the number of characters that can be written in a 1KB file, we need to understand that 1KB is equivalent to 1024 bytes.

Since one character in the ASCII format takes up one byte of space, we can deduce that 1024 characters can be written in a file of size 1KB.

Therefore, the correct answer is: 1024 characters can be written in a file of size 1KB.

Valid Character Sets

In computer systems and programming, character sets define the set of characters that can be used in a language or a system. Some valid character sets are:

  • UTF-8
  • ANSI
  • ASCII

All of the above options are examples of valid character sets that can be used in various programming languages and computer systems.

// Example usage of a character set in Java:

String myString = "Hello, world!"; // This string uses the UTF-8 character set

System.out.println(myString);


Default Value of BORDER Attribute in HTML

The default value for the BORDER attribute in HTML is 1 pixel.

<table border="1"><br>
    <tr><br>
        <td>Cell 1</td><br>
        <td>Cell 2</td><br>
    </tr><br>
</table>

In the code above, you can see that the BORDER attribute is set to 1 which means that there is a 1 pixel border around the table.

Understanding HTML Local Storage

In HTML, there are two objects used for storing data on the client: window.localStorage and window.sessionStorage. Both of these objects are used to store data on the client-side, but the key difference lies in their duration of storage.

window.localStorage allows web applications to store data with no expiration date. This means data will persist even after closing the browser window or turning off the computer. On the other hand, window.sessionStorage stores data only for a single session, therefore the data is lost when the browser tab is closed.

To summarize, the correct answer to the given question is Both A and B, as both window.localStorage and window.sessionStorage are used for storing data on the client-side in HTML.

What is the Most Basic Part of an HTML Page?

In a webpage, the most fundamental part is text. ASCII Text, to be exact. It is the simplest character set used in any HTML page, making it the basic building block of all web pages. Therefore, the correct answer is "Text."

Explanation:

The select tag in HTML is used to create a dropdown list, which is also known as a combo box. It allows a user to choose an option from a list of predefined choices.

Understanding the Components of a Website's Front End

The front end of a website refers to everything that users see and interact with on their screens. It includes the design, layout, and content, as well as the user interface and interactive features. The main components of a website's front end are HTML, CSS, and Javascript.

HTML, or HyperText Markup Language, provides the structure and content of the website. It defines the various elements of a page, such as headings, paragraphs, images, and links, and organizes them in a logical and hierarchical manner.

CSS, or Cascading Style Sheets, determines how the elements defined in HTML are displayed on the screen. It controls the layout, colors, fonts, and other visual aspects of a website, thus giving it a unique and consistent look and feel.

Javascript, or JS, is a programming language that adds interactivity and dynamic behavior to a website. It makes it possible to create animations, respond to user actions, validate forms, and perform other dynamic tasks without requiring a page reload or server request.

Node.js, on the other hand, is a runtime environment for executing Javascript code on the server side, rather than the client side. It is not a component of the front end, but rather a technology for backend development.

In conclusion, HTML, CSS, and Javascript are the main components of a website's front end, working together to create engaging, intuitive, and user-friendly web interfaces.

HTML Tag for Client-Side Scripting Language

The

<script>

tag is used to set up a client-side scripting language, such as JavaScript, within an HTML document.

Example:

<script>
  // JavaScript code goes here
</script>

Note: This tag should be placed within the

<head>

or

<body>

section of your HTML document.

Technical Interview Guides

Here are guides for technical interviews, categorized from introductory to advanced levels.

View All

Best MCQ

As part of their written examination, numerous tech companies necessitate candidates to complete multiple-choice questions (MCQs) assessing their technical aptitude.

View MCQ's
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.