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

Select your answer

Within a

<header>

element

Within a

<footer>

element

Inside a

<nav>

section

Inside a

<section>

block

Question 2/15

Which element is intended for short quote inline content?

Select your answer

<blockquote>

<q>

<quote>

<cite>

Question 3/15

For an embedded video object, which semantic HTML5 element should generally be used?

Select your answer

<embed>

<media>

<object>

<video>

Question 4/15

Which HTML5 element would you use to define navigation links?

Select your answer

<nav>

<footer>

<section>

<aside>

Question 5/15

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

Select your answer

<meta>

<data>

<cite>

<mark>

Question 6/15

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

Select your answer

<del>

<ins>

<em>

<mark>

Question 7/15

Which semantic element is meant for strong emphasis in a text?

Select your answer

<i>

<em>

<b>

<strong>

Question 8/15

Which element serves as a container for graphics, such as SVG or canvas elements?

Select your answer

<svg>

<canvas>

<figure>

<picture>

Question 9/15

Which HTML tag is used to provide a note about the author’s intent surrounding a written content?

Select your answer

<mark>

<ins>

<cite>

<abbr>

Question 10/15

What is the main improvement of HTML5 in terms of semantics compared to previous versions?

Select your answer

Introduction of new styling properties

Introduction of new semantic tags that provide more structured and meaningful HTML documents

Ability to use custom tags

Support for mobile-first design

Question 11/15

To show multiple range bars in data visualization, which element could enhance accessibility by providing visible captions or descriptions?

Select your answer

<output>

<legend>

<desc>

<figcaption>

Question 12/15

What element introduces a quote from another source?

Select your answer

<cite>

<q>

<blockquote>

<quote>

Question 13/15

What kind of content should you place within the

<footer>

element?

Select your answer

Author information, copyright information, contact information, sitemap links or similar information at the end of a section

Site headers

Primary navigation links

Main content of the document

Question 14/15

What is the role of the

<figure>

element?

Select your answer

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

<figcaption>

element

To wrap headings and footers

To provide captions to videos

To describe content in mathematical models

Question 15/15

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

Select your answer

<footer>

<header>

<aside>

<nav>

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Available answers

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

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

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

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

<footer>

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

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element is intended for short quote inline content?

Available answers

The

<q>

element is used for short inline quotations, typically rendered within quotation marks.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

For an embedded video object, which semantic HTML5 element should generally be used?

Available answers

The

<video>

element is specifically designed to embed video content with associated audio.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which HTML5 element would you use to define navigation links?

Available answers

The

<nav>

element is used to define a block of navigation links, such as menus or tables of contents.

Question 5/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 6/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 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which semantic element is meant for strong emphasis in a text?

Available answers

The

<strong>

element is used to give strong importance to the enclosed text, which indicates that the content has serious significance.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which element serves as a container for graphics, such as SVG or canvas elements?

Available answers

The

<canvas>

element is used as a container for rendering graphics on the fly with JavaScript, while

<svg>

is specifically for SVG content directly.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which HTML tag is used to provide a note about the author’s intent surrounding a written content?

Available answers

<cite>

is used to describe the title of a creative work, indicating the origin or source of the text.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the main improvement of HTML5 in terms of semantics compared to previous versions?

Available answers

Introduction of new styling properties

Introduction of new semantic tags that provide more structured and meaningful HTML documents

Ability to use custom tags

Support for mobile-first design

HTML5 introduces new semantic tags like

<header>

<footer>

<article>

, and

<aside>

, facilitating better document structuring and search engine utility.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

To show multiple range bars in data visualization, which element could enhance accessibility by providing visible captions or descriptions?

Available answers

Using

<figcaption>

alongside

<figure>

provides a description for the content-like charts, allowing better context and understanding, enhancing accessibility.

Question 12/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 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

What kind of content should you place within the <pre><code><footer></code></pre> element?

Available answers

Author information, copyright information, contact information, sitemap links or similar information at the end of a section

Site headers

Primary navigation links

Main content of the document

<footer>

is typically used to contain information about its containing element such as copyright details, comments, and author information.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

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

To wrap headings and footers

To provide captions to videos

To describe content in mathematical models

<figure>

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

<figcaption>

for captioning.

Question 15/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.