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

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. Which tag is used to group form elements?

A <fieldset>

B <form-group>

C <group>

D <fieldset-group>

The <fieldset> tag in HTML is used to group form elements for better visual organization. It creates a container that can hold multiple form fields like text inputs, radio buttons, checkboxes, etc. It is often used together with the <legend> tag to add a title or description to the group. Example:

<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
</form>

2. Which HTML tag is used to define a clickable image?

A <link>

B <a>

C <button>

D <img>

The <a> tag is used to define a clickable link, and you can use it to make an image clickable by wrapping an <img> tag inside it.

3. Which tag defines a section for inserting source code on a webpage?

A <code>

B <pre>

C <script>

D <source>

The <pre> tag in HTML is used to display preformatted text. The text inside this tag is shown exactly as it appears in the source code, preserving spaces, line breaks, and indentation. It’s useful for displaying code, poetry, tables, or any content where spacing matters.

4. Which HTML tag displays a progress bar?

A <progress>

B <meter>

C <bar>

D <indicator>

The <progress> tag is used to create a progress bar. It can visually represent the progress of a task, like a file download.

5. Which CSS selector targets all `<p>` elements that are children of a `<div>`?

A div + p

B div ~ p

C div > p

D div p

The div p selector targets all <p> elements within a <div>, whether they are direct or indirect children (i.e., descendants). If you want to target only direct children, use div > p.

6. You have a list of items and want to apply a special style to only the first item. Which CSS selector would you use?

A li:first-child

B li:first-of-type

C ul:first-child

D li:nth-child(1)

The li:first-of-type selector targets the first <li> element among all other <li> elements in a list, regardless of its position relative to other types of elements. If you use :first-child, it would only work if the element is also the first child of its parent, which might not be the case if there are other elements before the <li> elements.

7. You want to apply a style to all elements that have a `data-status` attribute with the value “active”. Which CSS selector would you use?

A [data-status="active"]

B [data-status^="active"]

C [data-status*="active"]

D [data-status$="active"]

The [data-status="active"] selector targets all elements with a data-status attribute that has the exact value “active”. Other options (^, *, $) are used for partial matches: ^ matches the beginning of the attribute, * matches anywhere in the attribute, and $ matches the end of the attribute. See a full example.

8. Imagine you want to apply a style to all `<p>` elements that contain text between parentheses. Which CSS selector would you use for this case?

A p:contains("(")

B p:has("(")

C p:empty

D There is no CSS selector for this

There is no native CSS selector that targets elements containing specific text like “(“, and CSS does not allow for searching within text content. However, you can use JavaScript for this task. The :contains() was a jQuery pseudo-class, not a pure CSS selector.

9. You want to apply a hover color effect to all `<button>` elements except for one particular button, which has `id="special"`. What combination of CSS selectors would you use?

A button:hover, button#special:hover

B button:hover:not(#special)

C button:hover, #special

D button:not(#special):hover

The button:hover:not(#special) selector targets all <button> elements on hover, except the one with the id=”special”. The :not() selector is a negation that excludes the #special ID from the hover style applied to the other buttons.

10. Which tag is used to add information about the author of an HTML document, typically placed within the `<footer>`?

A <author>

B <address>

C <footer>

D <info>

The <address> tag is used to define contact information or the author of a document. While often placed inside the <footer> tag, it can be used anywhere to mention contact details, an author’s name, or a link to a website. Example:

<address>
    Written by: John Doe<br>
    Email: [email protected]
</address>

1. Which tag is used to group form elements?

2. Which HTML tag is used to define a clickable image?

3. Which tag defines a section for inserting source code on a webpage?

4. Which HTML tag displays a progress bar?

5. Which CSS selector targets all <p> elements that are children of a <div>?

6. You have a list of items and want to apply a special style to only the first item. Which CSS selector would you use?

7. You want to apply a style to all elements that have a data-status attribute with the value “active”. Which CSS selector would you use?

8. Imagine you want to apply a style to all <p> elements that contain text between parentheses. Which CSS selector would you use for this case?

9. You want to apply a hover color effect to all <button> elements except for one particular button, which has id="special". What combination of CSS selectors would you use?

10. Which tag is used to add information about the author of an HTML document, typically placed within the <footer>?

You May Also Like

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

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

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

Leave a Reply Cancel reply

5. Which CSS selector targets all `<p>` elements that are children of a `<div>`?

7. You want to apply a style to all elements that have a `data-status` attribute with the value “active”. Which CSS selector would you use?

8. Imagine you want to apply a style to all `<p>` elements that contain text between parentheses. Which CSS selector would you use for this case?

9. You want to apply a hover color effect to all `<button>` elements except for one particular button, which has `id="special"`. What combination of CSS selectors would you use?

10. Which tag is used to add information about the author of an HTML document, typically placed within the `<footer>`?