Skip to content

Latest commit

 

History

History
303 lines (237 loc) · 7.51 KB

html-quiz.md

File metadata and controls

303 lines (237 loc) · 7.51 KB

HTML

When should you use the <aside> element?

  • when the content can be removed without detracting from the page's message
  • for anything you want to move to the side, like a pull quote box, a sidebar, or an image with text wrapping around it
  • for anything in parentheses
  • for anything in a sidebar

What is the best way to code the sample shown?

Sample text

  • A
<details>
  <summary>Parmesan Deviled Eggs</summary>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>
  • B
<h4>▸ Parmesan Deviled Eggs</h4>
<p>
  These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
</p>
  • C
<details open>
  <summary>Parmesan Deviled Eggs</summary>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>
  • D
<details>
  <h4>▸ Parmesan Deviled Eggs</h4>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

What is the difference between the <div> and <span> tags?

  • <div> is used where a generic block-level tag is needed, while <span> is used where a generic inline tag is needed.
  • <div> is used for major divisions on a page, while <span> is used to span across columns.
  • <div> is the industry-standard default tag, but you could use <span> if you prefer.
  • <div> is used where a generic inline tag is needed, while <span> is used where a generic block-level tag is needed.

What does the code shown below accomplish?

<picture>
  <source srcset="image1.jpg" media="(min-width: 1000px)" />
  <source srcset="image2.jpg" media="(min-width: 750px)" />
  <img src="image3.jpg" />
</picture>
  • It displays image1.jpg at 1000px and higher, image2.jpg at 750-999px, and image3.jpg at 749px and lower.
  • It displays image1.jps at 1000px and higher and image2.jpg at 750-999px, image3.jpg is a default in case <picture> is not supported.
  • It displays image1.jpg at 1000px and higher and image2.jpg at 750px and higher, image3.jpg is a default in case <picture> is not supported.
  • It displays image1.jpg, image2.jpg and image3.jpg at 1000px and higher.

What does the <label> element do?

  • It labels webpages with important information.
  • It creates an ID for a corresponding input element.
  • It overrides the name attribute's value on a child input element.
  • It programmatically associates a text label with an interface element.

What is the correctly nested markup for this list?

Sample 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>

What should fill the blank below?

<link href="print.css" rel="stylesheet" _____="print" />
  • title
  • type
  • device
  • media

Which code snippet creates the layout shown, starting at <table> and ending at </table>?

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>

What is the purpose of async in this code?

<script async src="myscript.js"></script>

  • It downloads the script from the server when resources allow.
  • It runs the script after HTML parsing is complete.
  • It runs the script when the script is ready.
  • It pauses the parsing of HTML code while the script runs.

In this code, what is the purpose of defer?

<script defer src="myscript.js"></script>

  • It downloads the script from the server when resources allow.
  • It runs the script after HTML parsing is complete.
  • It runs the script when the script is ready.
  • It pauses the parsing of HTML code while the script runs.

When should you use the <article> element?

  • For blog posts and other social media items
  • For the main content area of your website
  • When the content stands alone as a unit, is suitable for syndication, or is reusable
  • To associate comments with a blog post

For the HTML code below, when will "Sample Text" display to the browser?

<noscript>Sample Text</noscript>
  • when there is no JavaScript used on this webpage
  • when JavaScript is not supported by the browser or if JavaScript is disabled in the browser
  • when JavaScript is disabled in the web browser
  • when JavaScript is not supported by the web browser

What is the difference between the <svg> and <canvas>?

  • <svg> produces vector graphics, while <canvas> produces raster graphics.
  • <svg> integrates with JavaScript, while <canvas> does not.
  • <svg> produces raster graphics, while <canvas> produces vector graphics.
  • <svg> cannot be used as a background image, while <canvas> can be used as a background

What is the difference between the readonly and disabled attributes for the <textarea> element?

  • readonly allows clicking in the <textarea> element. disabled prevents all interaction with the control.
  • readonly is invalid attribute for <textarea>, while disabled is a valid attribute.
  • disabled allows clicking in the <textarea> element. readonly prevents all interaction with the control.
  • disabled is invalid attribute for <textarea>, while readonly is a valid attribute.

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>

A designer gave you CSS code that should run only when the device rendering the page is in dark mode. How would you embed that code?

  • <style media="light-mode: false">/* CSS code */</style>
  • <style media="color-mode: dark">/* CSS code */</style>
  • <style media="prefers-color-scheme: dark">/* CSS code */</style>
  • <style media="color-scheme: dark">/* CSS code */</style>