HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 37

April 22, 2025 John Howard

Multiple choice questions and answers (MCQs) on HTML/CSS to prepare for exams, tests, and certifications. These questions are taken from a real written exam and some parts are taken from an interview. So you will find questions on basic techniques such as tags, web standards, CSS selector, objects, and more. This quiz will easily prepare anyone to pass their online test.

1. What is the correct way to add an emoji (like a heart ❤️) in HTML text?

A <p>❤️</p>

B <p>💛</p>

C <p>❤</p>

D All of the above

You can insert an emoji directly into the text, use its Unicode character like 💛 or ❤ for a heart, or just type it in as a character.

2. Which HTML tag lets you add an icon next to a heading?

A <h1><svg>...</svg> Title</h1>

B <h1><i class="icon"></i> Title</h1>

C <h1><span class="icon"></span> Title</h1>

D <h1><img src="icon.png" alt="icon"> Title</h1>

Using an <img> tag inside the <h1> lets you easily add an icon next to the title. The other options require SVGs or CSS classes, but an image is the simplest method.

3. Which CSS property allows you to make a menu fixed at the top of the page, even when scrolling?

A position: sticky; top: 0;

B position: fixed; top: 0;

C position: absolute; top: 0;

D A and B

Both options work to pin an element at the top of the page. position: sticky is more modern and activates when scrolling, while position: fixed keeps the element pinned as soon as the page loads.

4. How do you define and use a CSS variable for background color?

A --primary-color: #3498db;

B background-color: var(--primary-color);

C :root { --primary-color: #3498db; }

D A and B

CSS variables are defined using --variable-name, and used with var(--variable-name). In this case, you’re defining and applying a background color variable.

5. How do you create a list of links that are displayed horizontally?

A ul { list-style-type: none; } li { display: inline; }

B ul { list-style: none; } li { display: block; }

C ul { list-style-type: inline; } li { display: inline-block; }

D ul { list-style: none; } li { display: flex; }

To display list items horizontally, remove the default list style with list-style-type: none; and make each list item inline using display: inline;

6. Which HTML tag adds alternative text for a video for accessibility?

A <video><track src="captions.vtt" kind="subtitles" srclang="en" label="English"></video>

B <video alt="Video not accessible">Video</video>

C <video><caption>Video</caption></video>

D <video><p>Video</p></video>

The <track> tag adds subtitles or alternative text to a video, improving accessibility for deaf or hard-of-hearing users.

7. How do you add a clickable link to an image in HTML?

A <a src="https://example.com"><img href="image.jpg"></a>

B <link href="https://example.com"><img src="image.jpg"></link>

C <a href="https://example.com"><img src="image.jpg"></a>

D <img href="https://example.com" src="image.jpg">

You wrap the <img> tag inside an <a> tag to make the image a clickable link.

8. How do you make an HTML table responsive on smaller screens?

A By using overflow-x: auto; on the table container

B By using table-layout: auto; on the <table> tag

C By adding a <responsive-table> tag

D By setting a fixed width for table columns

To make a table responsive, you can wrap it in a parent container with overflow-x: auto;, which enables horizontal scrolling on small screens.

A ©

B ©

C © or ©

D <copyright>

10. How do you create a numbered list with custom bullet styles (like numbers as letters)?

A <ol style="list-style-type: upper-alpha;">

B <ul style="list-style-type: circle;">

C <ol type="I">

D <ol style="list-style-type: decimal;">

The list-style-type: upper-alpha; style on an <ol> element numbers the list using uppercase letters (A, B, C…).

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 37

1. What is the correct way to add an emoji (like a heart ❤️) in HTML text?

2. Which HTML tag lets you add an icon next to a heading?

3. Which CSS property allows you to make a menu fixed at the top of the page, even when scrolling?

4. How do you define and use a CSS variable for background color?

5. How do you create a list of links that are displayed horizontally?

6. Which HTML tag adds alternative text for a video for accessibility?

7. How do you add a clickable link to an image in HTML?

8. How do you make an HTML table responsive on smaller screens?

9. What is the HTML code to display the copyright symbol (©)?

10. How do you create a numbered list with custom bullet styles (like numbers as letters)?

Leave a Reply Cancel reply

1. What is the correct way to add an emoji (like a heart ❤️) in HTML text?

2. Which HTML tag lets you add an icon next to a heading?

3. Which CSS property allows you to make a menu fixed at the top of the page, even when scrolling?

4. How do you define and use a CSS variable for background color?

5. How do you create a list of links that are displayed horizontally?

6. Which HTML tag adds alternative text for a video for accessibility?

7. How do you add a clickable link to an image in HTML?

8. How do you make an HTML table responsive on smaller screens?

9. What is the HTML code to display the copyright symbol (©)?

10. How do you create a numbered list with custom bullet styles (like numbers as letters)?

You May Also Like

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 9

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 33

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 43

Leave a Reply Cancel reply