Loading... Login Loading... Register

HTML Semantic Elements Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which element should be used to provide markup for edits within text content?

Select your answer

<em>

<mark>

<ins>

<del>

Question 2/15

Select your answer

Within a

<header>

element

Inside a

<section>

block

Within a

<footer>

element

Inside a

<nav>

section

Question 3/15

What is the purpose of the

<article>

element in HTML5?

Select your answer

To specify footer content

To define the main content area of a page

To wrap site navigation links

To represent self-contained content that could be distributed independently

Question 4/15

Which element is used for marking text intended to be enclosed in its metadata?

Select your answer

<data>

<cite>

<mark>

<meta>

Question 5/15

Which element should be used to denote introductory content or navigational links for its nearest ancestor?

Select your answer

<footer>

<header>

<nav>

<section>

Question 6/15

When encapsulating contact links or information, which semantic element is most fitting?

Select your answer

<header>

<aside>

<nav>

<footer>

Question 7/15

What element introduces a quote from another source?

Select your answer

<quote>

<blockquote>

<cite>

<q>

Question 8/15

What element should be used to delineate an area containing a dialogue, such as a conversation between people?

Select your answer

<dialog>

<dialogue>

<aside>

<aside>

Question 9/15

What is the role of the

<figure>

element?

Select your answer

To wrap headings and footers

To contain content like images and diagrams, usually with an optional

<figcaption>

element

To describe content in mathematical models

To provide captions to videos

Question 10/15

Which semantic HTML element is specifically used to group interactive forms controls?

Select your answer

<input>

<legend>

<form>

<fieldset>

Question 11/15

Which HTML element is used to display a caption for a table?

Select your answer

<tfoot>

<legend>

<caption>

<summary>

Question 12/15

What is the primary purpose of the

<main>

element?

Select your answer

To define the primary footer

To define the main header of the document

To contain the main navigation

To contain the main content of a document, excluding any content inside aside, header, footer, or navigation sections

Question 13/15

Which semantic element can be used for content that is potentially interactive and part of a web application?

Select your answer

<section>

<article>

<nav>

<details>

Question 14/15

Which element is used to specify a caption for a

<fieldset>

Select your answer

<figcaption>

<title>

<legend>

<label>

Question 15/15

When structuring a webpage with HTML5 elements, which tag is NOT a semantic tag?

Select your answer

<div>

<header>

<main>

<footer>

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element should be used to provide markup for edits within text content?

Available answers

The

<ins>

element is used to represent a range of text that has been inserted into a document, often with annotations to indicate modifications.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Available answers

Within a <pre><code><header></code></pre> element

Inside a <pre><code><section></code></pre> block

Within a <pre><code><footer></code></pre> element

Inside a <pre><code><nav></code></pre> section

<footer>

element as it relates to the overall ownership and informational metadata of the enclosing content.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the <pre><code><article></code></pre> element in HTML5?

Available answers

To specify footer content

To define the main content area of a page

To wrap site navigation links

To represent self-contained content that could be distributed independently

The

<article>

element is intended to specify self-contained compositions in a document, such as a newspaper article, blog post, or forum entry, that could be independently distributed or reused.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element is used for marking text intended to be enclosed in its metadata?

Available answers

The

<data>

element links content with its machine-readable information in the

value

attribute.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element should be used to denote introductory content or navigational links for its nearest ancestor?

Available answers

<header>

is used for introductory content or sets of navigational links, usually appearing at the start of a

<section>

<article>

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

When encapsulating contact links or information, which semantic element is most fitting?

Available answers

Contact information is best placed within a

<footer>

, as it is often secondary or associated with the overarching content, matching its semantic use case.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

What element introduces a quote from another source?

Available answers

The

<blockquote>

element is used to define an extended quotation, often with a separate paragraph structure.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

What element should be used to delineate an area containing a dialogue, such as a conversation between people?

Available answers

The

<dialog>

element is for content that is part of a conversation or interaction, such as a message in a chat application or an interactive popup box.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the role of the <pre><code><figure></code></pre> element?

Available answers

To wrap headings and footers

To contain content like images and diagrams, usually with an optional <pre><code><figcaption></code></pre> element

To describe content in mathematical models

To provide captions to videos

<figure>

is used to wrap content like images, illustrations, diagrams, or charts, along with an optional

<figcaption>

for captioning.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which semantic HTML element is specifically used to group interactive forms controls?

Available answers

The

<fieldset>

element is used to group multiple form controls as well as labels, and usually contains a

<legend>

element.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which HTML element is used to display a caption for a table?

Available answers

The

<caption>

element is used to provide a title or brief description for a table, making it easier for users to understand the contents of the table.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the primary purpose of the <pre><code><main></code></pre> element?

Available answers

To define the primary footer

To define the main header of the document

To contain the main navigation

To contain the main content of a document, excluding any content inside aside, header, footer, or navigation sections

The

<main>

element is used to encapsulate the core content of a page, which is directly related to the central topic of the document, excluding repeated content such as sidebars, headers, and footers.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which semantic element can be used for content that is potentially interactive and part of a web application?

Available answers

<section>

is often used to organize and potentially add interactivity to various sections of content within a web application.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element is used to specify a caption for a <pre><code><fieldset></code></pre>?

Available answers

The

<legend>

tag represents a caption for the

<fieldset>

element, giving context and meaning to the grouped controls.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

When structuring a webpage with HTML5 elements, which tag is NOT a semantic tag?

Available answers

The

<div>

tag is a non-semantic element which lacks clearly defined meaning by itself, unlike semantic elements which convey meaning about their contents.