Are you ready?
9 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Is it valid to have more than one
<nav> in an HTML document?It is perfectly valid to have more than one
<nav> element in an HTML document. But when we have so, we must make sure to label each <nav> (using aria-label or aria-labelledby) to make its purpose clear. For more info, refer to Semantic HTML — Navigation: What is the <nav> element?Alice wrote the following HTML for a webpage. This is the content of the <body> element:
<header>
...
<nav>
<ul>
...
</ul>
</nav>
</header>
...
<footer>
...
<nav>
<ul>
...
</ul>
</nav>
<nav>
<ul>
...
</ul>
</nav>
...
</footer>Assume that ... represents a lot of content, omitted here for brevity.
What is the problem with Alice's code in terms of the usage of
<nav>?When we have more than one
<nav> element on a webpage, it's required, for the sake of accessibility, to have a label on each <nav> element, with the help of aria-label or aria-labelledby. In Alice's code, there are such labels on the <nav> elements and this is the problem. Hence, the correct choice is (C). For more info, refer to Semantic HTML — Navigation: It's valid to have multiple <nav>s.It's better to use the
<div> element to represent a navigation section instead of a <nav>. True or false? If false, then why so?A
<div> is not a semantic HTML element and does NOT improve the accessibility of a webpage (at least, on its own without any attributes). Hence, the correct choice is (D). For more info, refer to Semantic HTML — Navigation: Why use <nav> instead of <div>?The
<nav> element represents a ... in HTML.A
<nav> element clearly represents a navigation section in HTML, so choice (C) is correct. It also represents a landmark in HTML, so choice (B) is also correct. The rest are all wrong answers. For more info, refer to Semantic HTML — Navigation: What is the <nav> element?It's possible to nest the
<nav> element inside a <nav>. True or false?Yes, it's absolutely possible. For more info, refer to Semantic HTML — Navigation:
<nav>s can be nested in one anotherWhich of the options below correctly describes the following component on a webpage?
The figure depicts a breadcrumbs menu, or simply breadcrumbs, on a webpage. This goes with choice (B). For more info, refer to Semantic HTML — Navigation: What is the
<nav> element?It's compulsory to have the
<ul> or <ol> element nested inside a <nav>. True or false? If false, then choose the correct description.False; it's not compulsory to have a
<ul>/<ol> inside a <nav> but it is highly desirable since <ul>/<ol> is preferred when we have a 'list' of something — and inside <nav>, we have a list of navigation links. This goes with choice (B). For more info, refer to Semantic HTML — Navigation: Why have <ul>/<ol> inside a <nav>?Which of the following elements is commonly used to wrap navigation links within a
<nav> element?The
<ul> (or <ol>) element is commonly used inside a <nav> to wrap navigation links. This is because <nav> typically represents a list of links and so in that respect, it's a good practice to have <ul> (or <ol>) inside it to denote this list of links. Hence, the correct choice is (C). For more info, refer to Semantic HTML — Navigation: Why have <ul>/<ol> inside a <nav>?When we have just one
<nav> element in an HTML document, it's not really necessary to have the aria-label or aria-labelledby attribute on it. True or false?True. With just one <nav>, the user (on a screen reader) won't of course need to distinguish between different <nav>s — there is just one <nav>. Likewise, having aria-label or aria-labelledby isn't really that necessary when we have just one <nav>. But if we have multiple of them, then it's a must to have either of these attributes to label each of the <nav>s.
For more info, refer to Semantic HTML — Navigation: It's valid to have multiple <nav>s.
