HTML QB
HTML QB
Q1. What is the purpose of the <track> tag, and when should it be used?
The <track> tag is used for specifying subtitles. It is typically applied as a child
of the <audio> and <video> tags.
The <track> tag is used for specifying subtitles. It is typically applied as a child
of the <video> tag.
The <track> tag is used for specifying subtitles, captions, and other types of
time-based text. It is typically applied as a child of the <video> tag.
The <track> tag is used for specifying subtitles, captions, and other types of
time-based text. It is typically applied as a child of the <audio> and <video>
tag.
Q2. What are the best examples of void elements?
<link><meta><title>
<br><base><source>
<input><br><p>
<area><embed><strong>
<frame>
<iframe>
Use CSS.
<bold>
<b>
itemscope itemtype="http://schema.org/PostalAddress"
itemsref="http://schema.org/PostalAddress" itemid="address"
itemscope itemref="http://schema.org/PostalAddress"
itemid="address" itemtype="http://schema.org/PostalAddress"
It is interchangeable with the src attribute, so any element which uses src
may use <source>
<audio> and <video>
A
<details>
<summary>Parmesan Deviled Eggs</summary>
<p>
These delectable little bites are made with organic eggs, fresh Parmes
</p>
</details>
B
<h4>▸ Parmesan Deviled Eggs</h4>
<p>
These delectable little bites are made with organic eggs, fresh Parmesan
</p>
C
<details open>
<summary>Parmesan Deviled Eggs</summary>
<p>
These delectable little bites are made with organic eggs, fresh Parmes
</p>
</details>
D
<details>
<h4>▸ Parmesan Deviled Eggs</h4>
<p>
These delectable little bites are made with organic eggs, fresh Parmes
</p>
</details>
enctype
media
type
rel
Q17. What is the correct markup for alt attribute of an image?
A
<img src="cubism.jpg" alt="Version of ""Whistler's Mother"" in cubist styl
B
<img src="cubism.jpg" alt="Version of "Whistler's Mother" in cubist style"
C
<img src="cubism.jpg" alt='Version of "Whistler\'s Mother" in cubist style
D
<img src="cubism.jpg" alt="Version of \"Whistler's Mother\" in cubist styl
Q18. In the code below, what is the purpose of the id attribute?
<p id="warning">Be careful when installing this product.</p>
It establishes that id is a unique identifier in the document, used for styling CSS,
scripting, and linking within a webpage.
It establishes that id is a unique identifier in the document, used for styling CSS
and with Javascript code.
It establishes that id may be used for styling CSS several times per page.
It establishes that id is a unique identifier in the website, used for styling CSS,
scripting, and linking within a webpage.
Q19. What is the best semantic markup for the sentence shown?
On July 21, 1969, Neil Armstrong said, "One small step for man, one
giant leap for mankind."
A
<p>
On <time datetime="1969-07-21">July 21, 1969</time>, Neil Armstrong said
<q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
>One small step for man, one giant leap for mankind.</q
>
</p>
B
<p>
On July 21, 1969, Neil Armstrong said,
<q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
>"One small step for man, one giant leap for mankind."</q
>
</p>
C
<p>
On July 21, 1969, Neil Armstrong said,
<q>"One small step for man, one giant leap for mankind."</q>
</p>
D
<p>
On <time datetime="07-21-1969">July 21, 1969</time>, Neil Armstrong said
<q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
>One small step for man, one giant leap for mankind.</q
>
</p>
es
es-spanish
es-es
spanish
Q21. Review the text in the red box in the image shown. What is the best way to
code this in HTML?
ordered list
unordered list inside a nav element
ordered list inside a nav element
unordered list
Q22. What is the best way to code three choices within a form so that the user can
select only one item?
A
<label for="example">Make a choice:</label>
<datalist id="example">
<option value="Choice 1"></option>
<option value="Choice 2"></option>
<option value="Choice 3"></option>
</datalist>
B
<p>Make a choice:</p>
<input id="choices" name="example" />
<datalist value="choices">
<option value="Choice 1"></option>
<option value="Choice 2"></option>
<option value="Choice 3"></option>
</datalist>
C
<label for="example">Make a choice:</label>
<input list="example" id="choices" name="choices" />
<datalist id="choices">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</datalist>
D
<label for="example">Make a choice:</label>
<input list="choices" id="example" name="example" />
<datalist id="choices">
<option value="Choice 1"></option>
<option value="Choice 2"></option>
<option value="Choice 3"></option>
</datalist>
A
<table>
<scope cols="2" style="background-color: yellow">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>
B
<table>
<colgroup span="2" style="background-color: yellow">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>
C
<table>
<group cols="2" style="background-color: yellow">
<tr scope="row">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr scope="row">
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>
D
<table>
<columns colspan="2" style="background-color: yellow">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>
Q26. What is the <hr> tag typically used for? / Alt.: What is the semantic meaning
of the <hr> tag?
This tag is depreciated (alt.: deprecated) and should not be used.
It designates a topic shift within a section at the paragraph level.
It draws a horizontal line.
It designates a shift of topic at the section level. / Alt.: It designates a separation
of sections within an <article> .
This is a confusing question and there can be an arguments for both the
second and the third options being correct.
MDN: The HTML <hr> element represents a thematic break between paragraph-
level elements. Historically, this has been presented as a horizontal rule or line. While
it may still be displayed as a horizontal rule in visual browsers, this element is now
defined in semantic terms, rather than presentational terms, so if you wish to draw a
horizontal line, you should do so using appropriate CSS.
Q27. What should fill the two blanks in the HTML code below?
<section itemscope itemtype="http://schema.org/Restaurant">
<h1 itemprop="name">Nadia's Garden</h1>
<p itemscope ______ ______>
<span itemprop="ratingValue">4.5</span> stars - based on
<span itemprop="reviewCount">120</span> reviews
</p>
</section>
itemprop="aggregateRating" itemref="http://schema.org/AggregateRating"
itemprop="aggregateRating"
itemtype="http://schema.org/AggregateRating"
itemid="aggregateRating" itemtype="http://schema.org/AggregateRating"
itemid="aggregateRating" itemref="http://schema.org/AggregateRating"
Q28. Which HTML snippet links back to the very top of a webpage?
A
<a id="top"></a>
B
<a name="top"></a>
C
<a href="#">back to top</a> <a href="#top">back to top</a>
D
<button href="#">back to top</button> <button href="#top">back to top</but
Q29. Which three tags where deprecated in HTML4 but returned to HTML5?
<rb> <rp> <rt>
Q30. The _ tag is used for marking up a short code snippet, while the _ tag is used
for marking up a longer block of code
<kdb> , <pre>
<pre> , <code>
<kdb> , <mark>
<code> , <pre>
_self
_new
_parent
Q33. What is the most semantically accurate way to mark up the sentence shown
below? Note: "TLAs" stands for "three-letter acronyms."
We are fond of our TLAs in web design.
A
<p>We are fond of our <span title="three-letter acronyms">TLAs</span> in w
B
<p>We are fond of our TLAs in web design.</p>
C
<p>we are fond of our <abbr title="three-letter acronyms">TLAs</abbr> in w
D
<p>we are fond of our <acronym title="three-letter acronym">TLAs</acronym>
<acronym> has been removed in HTML5 and shouldn't be used anymore. Instead
web developers should use the <abbr> element.
Q34. What is the correctly nested markup for this list?
A
<ul>
<li>
office
<ol style="circle">
<li>staple</li>
<li>paper</li>
</ol>
</li>
<li>
groceries
<ol style="circle">
<li>milk</li>
</ol>
</li>
</ul>
B
<ul>
<li>
Office Supplies
<ul>
<li>Stapler</li>
<li>Paper clips</li>
</ul>
</li>
<li>
Groceries
<ul>
<li>Milk</li>
</ul>
</li>
</ul>
C
<ul>
<li>office</li>
<li>staple</li>
<li>paper</li>
<li>groceries</li>
<li>milk</li>
</ul>
title
type
device
media
Q36. What is the semantically correct way to mark up this layout?
A
<p>
"Making money is what you have to do to sustain a business—being driven
and purpose is much more powerful."
</p>
<p><em>Lynda Weinman</em></p>
B
<blockquote>
<q
>"Making money is what you have to do to sustain a business—being driv
value and purpose is much more powerful."</q
>
<cite><em>Lynda Weinman</em></cite>
</blockquote>
C
<blockquote>
<p>
"Making money is what you have to do to sustain a business—being drive
value and purpose is much more powerful."
</p>
<cite>Lynda Weinman</cite>
</blockquote>
D
<section>
<q
>"Making money is what you have to do to sustain a business—being driv
value and purpose is much more powerful."</q
>
<cite>Lynda Weinman</cite>
</section>
Q37. Which choice uses the correct terminology in describing this markup:
<p>info</p> ?
The element opener is <p> , the element closer is </p> , and the element
information is info.
The start tag is <p> , the end tag is </p> , and the enclosed HTML is info.
The start tag is <p> , the end tag is </p> , and the element content is info.
The start element is <p> , the end element is </p> , and the tag content is info.
Q38. What is the difference between <input type="submit" value="click
me"> and <button type="submit">Click me</button> ?
Both will submit a form. However, the <input> can have content other than text,
like an image or nested HTML elements, while the <button> cannot.
Q39. What is the best semantic way to indicate that text refers to keyboard entry?
<p>Press the <tt>Enter</tt> key to proceed.</p>
The browser chooses the first supported format to play with the browser's default
controls.
The browser chooses the best audio format to play with JavaScript-provided
controls.
The browser plays each sound file in order automatically. The user has controls to
stop playback.
The browser chooses the first supported sound file and will loop the sound until
the user stops it.
Q41. What attribute applies a keyboard shortcut hint to the current element?
accesskey
shortcut
keyboard
access
Q42. What is the correct way to code a link that, when clicked, will send an email
to [email protected] with a subject of "Hello"?
<a href="mailto:[email protected]&subject=Hello">Click me</a>
<a href="mailto:[email protected]">Hello</a>
<html>
<body>
<root>
The <html> tag is the root element of an HTML document, which means that
it contains all the contents and tags of the HTML document within it. The
html element represents the root of a document.
1. Source
2. Source
Q44. Which code snippet creates the layout shown, starting at <table> and
ending at </table> ?
A
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td rowspan="2">Table cell 3</td>
</tr>
B
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
<td>Table cell 3</td>
</tr>
C
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td colspan="2">Table cell 3</td>
</tr>
D
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
</tr>
Q45. Which choice is NOT a legal value for the name attribute within a <meta>
tag?
charset
viewport
generator
author
Q46. Which form is coded correctly?
A
<form>
<legend>Title</legend>
<fieldset>
<label for="name">Your name:</label>
<input type="text" name="name" id="name" />
<button type="submit">Submit</button>
</fieldset>
</form>
B
<form>
<fieldset>
<legend>Title</legend>
<p>Your name:</p>
<input type="text" name="name" id="name" />
<input type="submit" value="Submit" />
</fieldset>
</form>
C
<form>
<fieldset>
<legend>Title</legend>
<label for="name">Your name:</label>
<input type="text" name="name" id="name" />
<button type="submit">Submit</button>
</fieldset>
</form>
D
<form>
<legend>Title</legend>
<label for="name">Your name:</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Submit" />
</form>
The text displays over the audio controls, unless CSS is used to position it
elsewhere.
The text displays under the audio controls.
The text displays when the browser cannot play the sound.
The text never displays.
Q49. What is the primary purpose of the <canvas> tag?
It allows raster images to be rendered on the webpage.
It displays annotated images.
It allows drawing on a bitmap via JavaScript.
It allows vector images to be rendered on the webpage.
Q50. Which choice contains three valid block-level elements?
<details> <abbr> <figcaption>
Q51. In the code below, what is the purpose of the lang attribute?
<p lang="en-GB">Welcome to our wonderful website.</p>
http://www.linkedin.com/dir/page.html
page.html
http://www.linkedin.com/page.html
dir/page.html
Q54. What is the correct way to include a stylesheet named style.css in the
<head> of your document?
<style link="style.css">
<style src="style.css"></style>
<link style="style.css">
Q55. You want to have single spacing in between some lines, like in a poem or an
address. Which approach should you use?
Wrap the text in a box that is the right width so everything wraps correctly. Set
the box width with CSS.
Separate lines with a <p> , then use CSS to make single spacing.
Use the <pre> tag to make the line spacing look exactly like you want.
Separate the lines with the <br> tag.
Q56. What does the <wbr> tag do?
It requires the browser to wrap the current line at that point.
It breaks a word into two pieces, using a hyphen to connect the words.
It formats a sentence to be easily breakable.
It presents an opportunity for a break in a very long word, if needed for proper
page display.
Q57. Review the code below. How do you include subnavigation for Link 2 that
includes a link?
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
A
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<ul>
<li><a href="#">Link 2a</a></li>
</ul>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
B
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2a</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
C
<ul>
<nav>
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<nav>
<li><a href="#">Link 2a</a></li>
</nav>
</ul>
</li>
<li><a href="#">Link 3</a></li>
</nav>
</ul>
D
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<nav>
<ul>
<li><a href="#">Link 2a</a></li>
</ul>
</nav>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
/* this is a comment */
<q>
<quote>
<blockquote>
<notation>
Reference (w3schools)
Q61. How will a video look displayed on a fully loaded webpage if the <video>
tag is used and the autoplay attribute is not set?
It will display a random frame from a video, unless the poster attribute is set.
It will display the first frame of the video, unless the poster attribute is set.
It will display nothing unless the poster attribute is set.
It will display a black window unless the poster attribute is set.
Reference (w3schools)
Q62. What is the correct way to describe an empty element / Alt.: What is the
correct way to describe an empty element, such as a line break tag?
It has opening and closing tags but no child content.
It display nothing on a website.
It has no child content and no closing tag.
It has child content but no closing tag.
Reference (MDN Web Docs)
Q63. What is the purpose of async in this code?
<script async src="myscript.js"></script>
When the Play button is pressed, the browser plays the sound over and over
again until the user stops it.
The browser plays the sound once automatically in the background. The user has
no control over the sound.
The browser plays the sound automatically and continuously in the background.
The user may stop the sound at any tune.
It does nothing. Modern browsers require some form of interaction before they let
a page autoplay with audio.
1. (MDN) audio,
2. (MDN) autoplay
Q65. What is the difference between the <head> and <header> tags?
There is only one <head> tag per page, while there may be many <header>
tags.
The <head> tag may contain CSS and Javascript links, while the <header> tag
may contain headings and navigational links.
all of these answers
The <head> tag contains meta information, while the <header> tag contains
navigation, logos, and other page identifying content.
Q66. In this code, what is the purpose of defer?
<script defer src="myscript.js"></script>
A
<caption>
A table
</caption>
<table>
<td>
<tr>
Cell 1
</tr>
<tr>
Cell 2
</tr>
</td>
</table>
B
<caption>
A table
</caption>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
C
<table>
<caption>
A table
</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
D
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<caption>
A table
</caption>
</table>
Q68. Given the file and directory structure shown here, what is the correct
element to place in file profit.html to link to info.html?
<a href="../work/info.html">See Information </a>
B
<input />
<br />
<p></p>
C
<link>
<meta>
<title>
D
<wbr />
<base />
<source />
Q71. Which snippet of HTML, when clicked, makes a phone call on a mobile
device?
<a href="tel:802-555-1212">Call me</a>
<a href="phone">802-555-1212</a>
<a href="tel">802-555-1212</a>
<input type="tel">
<input type="week">
<input type="num">
Reference (MDN)
Q74. What is the most semantic way to mark up this sentence so that "happy talk
must die" is rendered as an inline quote?
As Steve Krug once said, happy talk must die.
<p> As Steve Krug once said, <b> happy talk must die. </b> </p>
<p> As Steve Krug once said, <i> happy talk must die. </i> </p>
<p> As Steve Krug once said, <blockquote> happy talk must die.
</blockquote> </p>
<p> As Steve Krug once said, <q> happy talk must die. </q> </p>
Source: W3Schools
<q> tag Most browsers will display q tags as inline elements with quotes
Q75. What is the most semantically accurate way to make up a main navigation
bar, displayed in a horizontal direction?
A
<p>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</p>
B
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
C
<nav>
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ol>
</nav>
D
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
A
<h4>Mailing Address</h4>
<address>
6410 Via Real <br />
Carpinteria, CA 93013<br />
<a href="mailto:[email protected]">[email protected]</a>
</address>
B
<h4><strong>Mailing Address</h4>
<address><em>
6410 Via Real <br>
Carpinteria, CA 93013<br>
<a href="mailto:[email protected]">[email protected]</a>
</em></address>
C
<h4>Mailing Address</h4>
<p>
<em>
6410 Via Real <br />
Carpinteria, CA 93013<br />
<a href="mailto:[email protected]">[email protected]</a>
</em>
</p>
D
<p><strong>Mailing Address</strong></p>
<p>
<em>
6410 Via Real <br />
Carpinteria, CA 93013<br />
<a href="mailto:[email protected]">[email protected]</a>
</em>
</p>
Source: W3Schools
The <address> tag defines the contact information for the author/owner of
a document or an article. The contact information can be an email address,
URL, physical address, phone number, social media handle, etc. The text in
the <address> element usually renders in italic, and browsers will always
add a line break before and after the <address> element.
A
B
an attribute
a tag
content
an element
Q83. What is the correct way to add a submit URL to a button element?
A
<button submit="http://example.com/process">Process data</button>
B
<button action="http://example.com/process">Process data</button>
C
<button formaction="http://example.com/process">Process data</button>
D
<button method="http://example.com/process">Process data</button>
<p>x<y&z>w</p>
<p>x\<y&z\>w</p>
<p>x<<y&&z>>w
<p>x<y&z>w</p>
This question has an issue, however this answer will count as correct
It's too strange question because all of that methods doesn't work. The
good method is &, <, > using.
<p lang="es">canción</p>
<p lang="es">cancio'n</p>
<p lang="es">canci'on</p>
B
<input>
<option>
<textarea>
C
<button>
<input />
<form></form>
</button>
D
<input /> <label> <meter></meter></label>
Q92. Which choice is the most semantically correct markup for specifying the first
definition of a term?
<p> The <dl> focal length </dl> of a lens gives the distance from the lens to
the image sensor. </p>
<p> The <dfn> focal length <dfn> of a lens gives the distance from the lens to
the image sensor. </p>
<p> The <dt> focal length </dt> of a lens gives the distance from the lens to
the image sensor. </p>
<p> The <dd> focal length </dd> of a lens gives the distance from the lens to
the image sensor. </p>
Definition element => The <dfn> HTML element is used to indicate the term
being defined within the context of a definition phrase or sentence.
**Description Term element => The <dt> HTML element specifies a term in a
description or definition list, and as such must be used inside a <dl>
element.
**Description Details element =>The <dd> HTML element provides the
description, definition, or value for the preceding term (<dt>) in a
description list (<dl>).
Source
Q93. Which choice is the best way to code three choices within a form so that the
user can select multiple items?
:
<input type="radio" name="example" /> Choice 1 <br />
<input type="radio" name="example" /> Choice 2 <br />
<input type="radio" name="example" /> Choice 3
:
<input type="checkbox" name="example" /> Choice 1 <br />
<input type="checkbox" name="example" /> Choice 2 <br />
<input type="checkbox" name="example" /> Choice 3
:
<label><input type="checkbox" name="example" /> Choice 1</label><br />
<label><input type="checkbox" name="example" /> Choice 2</label><br />
<label><input type="checkbox" name="example" /> Choice 3</label>
:
<label><input type="radio" name="example" /> Choice 1</label><br />
<label><input type="radio" name="example" /> Choice 2</label><br />
<label><input type="radio" name="example" /> Choice 3</label>
Source
Q94. How would you mark up a piece of ASCII art (an emoticon) in an accessible
way?
ツ
<pre role="emoticon" aria-label="ASCII emoticon of a shrug">¯\_( )_/
¯</pre>
ツ
<pre role="img" aria-label="ASCII emoticon of a shrug">¯\_( )_/¯</pre>
ツ
<dfn title="ASCII emoticon of a shrug">¯\_( )_/¯</dfn>
Q95. Which example is a standard way in HTML5 for adding author metadata to a
page?
<metadata name="author" content="Author Name">
Q96. Given the following requirements, select the correct input configuration:
An input that allows the user to select from a range of integer values between 0
and 100 (inclusive) in increments of 5
<input type="range" min="0" max="100" by="5" />
<input> elements of type range let the user specify a numeric value which
must be no less than a given value, and no more than another given value.
The step attribute is a number that specifies the granularity that the
value must adhere to.
Source
Q97. Which choice is valid markup for a <head> element?
<head class="Page Section Information" id="head"><title>Page
Title</title></head>
<head><title>Page Title</title><address>[email protected]</address>
</head>
B
<div aria="dpub-comments">
<h3>Comments</h3>
<div aria="dpub-comment">First comment.</div>
<div aria="dpub-comment">Second comment.</div>
</div>
C
<aside>
<h3>Comments</h3>
<aside>First comment.</aside>
<aside>Second comment.</aside>
</aside>
D
<div typeof="comments">
<h3>Comments</h3>
<div typeof="comment">First comment.</div>
<div typeof="comment">Second comment.</div>
</div>
designMode ; true
contenteditable ; true
contenteditable ; yes
<input> elements of type hidden let web developers include data that
cannot be seen or modified by users when a form is submitted. For example,
the ID of the content that is currently being ordered or edited, or a
unique security token. Hidden inputs are completely invisible in the
rendered page, and there is no way to make it visible in the page's
content.Source
Q101. What is the semantic way to add an identifying title to a table?
<table><label>Heading</label>...</table>
<table><title>Heading</title>...</table>
<table><legend>Heading</legend>...</table>
<table><caption>Heading</caption>...</table>
The <caption> HTML element specifies the caption (or title) of a table.
Source
Q102. Which image file referenced in this img element's srcset attribute
should a browser on a small mobile phone load?
<img
srcset="medium.jpg 320w, large.jpg 1280w"
src="small.jpg"
alt="Our favorite image"
sizes="(min-width: 1200px) 640px, 100vw"
/>
small.jpg
medium.jpg
none of them
large.jpg
The browser will: 1. Look at its device width. 2. Work out which media
condition in the sizes list is the first one to be true. 3. Look at the
slot size given to that media query. 4. Load the image referenced in the
srcset list that has the same size as the slot or, if there isn't one, the
first image that is bigger than the chosen slot size. Source
Q103. Which description is coded correctly?
A
<dl>
<dt>Server</dt>
<dd>Software used to serve webpages, like Apache.</dd>
<dd>Hardware used to provide data to other computers.</dd>
<!-- Other terms and descriptions -->
</dl>
B
<dt>
<dl>Server</dl>
<dd>Software used to serve webpages, like Apache.</dd>
<dd> Hardware used to provide data to other computers.</dd>
<!-- Other terms and descriptions -->
</dt>
C
<dl>
<dt>Server</dt>
<dd>Software used to serve webpages, like Apache.</dd>
<dt>Hardware used to provide data to other computers.</dt>
<!-- Other terms and descriptions -->
</dl>
D
<dl>
<dd>Server</dd>
<dt>Software used to serve webpages, like Apache.</dt>
<dt>Hardware used to provide data to other computers.</dt>
<!-- Other terms and descriptions -->
</dl>
Source 1 Source 2
Q104. What is wrong with this code?
<ul>
<h2>Espresso Drinks</h2>
<li>Espresso</li>
<li>Latte</li>
<li>Cappuccino</li>
<li>Mocha</li>
</ul>
Nothing is wrong.
<ul> cannot contain a heading element as a direct child.
B
<table>
<tr>
<th scope="row">Header</th>
<td>10</td>
<td>18</td>
</tr>
</table>
C
<table>
<tr>
<thead scope="row">
Header
</thead>
<td>10</td>
<td>18</td>
</tr>
</table>
D
<table>
<tr>
<th>Header</th>
<td>10</td>
<td>18</td>
</tr>
</table>
B
<dl>
<dd>Server</dd>
<dt>Software used to server webpages, like Apache.</dt>
<dt>Hardware used to provide data to other computers.</dt>
<!--Other terms and descriptions -->
</dl>
C
<dt>
<dl>Server</dl>
<dd>Software used to server webpages, like Apache.</dd>
<dd>Hardware used to provide data to other computers.</dd>
<!--Other terms and descriptions -->
</dt>
D
<dl>
<dt>Server</dt>
<dd>Software used to server webpages, like Apache.</dd>
<dt>Hardware used to provide data to other computers.</dt>
<!--Other terms and descriptions -->
</dl>
<lb>
<br>
<a>
B
<a href="#additional-information" class="Card">
<details>
<summary>Additional Information</summary>
</details>
</a>
C
<a href="#additional-information" class="Card">
<p>Additional Information</p>
<p></p
></a>
D
<a href="#additional-information" class-"Card">
<img src="media.jpeg" alt="More information"></video>
</a>
<pre>
<hr>
<title></title>
<title>Exciting title</title>
Source
Q121. Which link contains a valid URL?
<link rel="stylesheet" href="/styles for me/styles.css">
Source 1 Source 2
Q122. Which example is missing a mandatory closing tag, making it invalid?
<p>Simple paragraph
<ul><li>Simple list</li>
<ul><li>Simple list<ul>
Source
Q123. What is the semantic method for marking up a video with a caption in
browsers that support it?
<video src="video.mp4" caption="video.vtt"></video>
Source
Q124. A white paper has a sidebar and endnotes, both of which are
complementary to the main text. How would you mark them up to make their
distinct roles more broadly accessible?
A
<custom-sidebar aria-label-"Sidebar"›Sidebar...</custom-sidebar><custom-fo
label="Endnotes">Endnotes...</custom-footnote>
B
<aside role="sidebar">Sidebar...</aside><aside role="notes"»Endnotes...</a
C
<aside role="complementary">Sidebar...</aside>
<aside role="supplementary">Endnotes...</aside>
D
<aside aria-label-"Sidebar">Sidebar...</aside><aside aria-label="Endnotes"
Source
Q125. A white paper has a sidebar and endnotes, both of which are
complementary to the main text. How would you mark them up to make their
distinct roles more broadly accesible?
<aside aria-label="Sidebar">Sidebar...</aside><aside aria-
label="Endnotes">Endnotes...</aside>
<custom-sidebar aria-label="Sidebar">Sidebar...</custom-sidebar>
<custom-footnote aria-label="Endnotes">Endnotes...</custom-footnote>
<aside role="Sidebar">Sidebar...</aside><aside
role="Endnotes">Endnotes...</aside>
<aside role="complementary">Sidebar...</aside><aside
role="supplementary">Endnotes...</aside>
Source
Q126. Which video example will autoplay in most browsers?
<video src="video.mp4" autoplay muted></video>
Source
Q127. In which order will these scripts execute, assuming they all take the same
time to download?
<script type="module" src="module.js"></script>
// external module
<script type="async" src="module.js"></script>
// async
<script type="defer" src="module.js"></script>
// defer
<script type="module" src="module.js">
// inline module
</script>
Source
Q129. Users report that a form is not working. What is the culprit?
<form action="/choices" disabled>
<fieldset disabled>
<legend>Choices</legends>
<label>Choice 1 <input type="radio" name="choice" value="choice1" />
<label>Choice 2 <input type="radio" name="choice" value="choice2" />
<label>Choice 3 <input type="radio" name="choice" value="choice3" />
<label>Choice 4 <input type="radio" name="choice" value="choice4" />
<button>Choose!</button>
</fieldset>
</form>
There is no element.
There is no method set on the form.
The form element is disabled.
The fieldset is disabled.