linkedin-skill-assessments-quizzes

HTML

Q1. ¿Cuál es el propósito de la etiqueta <track>, y cuándo debe usarse?

Q2. ¿Cuáles son los mejores ejemplos de elementos void?

Q3. En HTML5, ¿qué etiqueta o etiquetas incrustan una página web dentro de una página web?

Q5. ¿Cuál es la mejor manera de aplicar estilo en negrita al texto?

Q7. ¿Qué debe llenar los dos espacios en blanco en el código HTML a continuación?

<address ______ _____>
  <span itemprop="streetAddress">6410 Via Real</span><br />
  <span itemprop="addressLocality">Carpinteria</span>,
  <span itemprop="addressRegion">CA</span>
  <span itemprop="addressCode">93013</span>
</address>

Q8. ¿Cuál es el uso del elemento <aside>?

Q9. ¿Con qué etiquetas está asociado el elemento <source>?

Q10. ¿Qué NO es un atributo válido para el elemento <textarea>?

Q11. ¿Cuál es la mejor manera de codificar la muestra mostrada?

Sample text

<details>
  <summary>Parmesan Deviled Eggs</summary>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

<h4>▸ Parmesan Deviled Eggs</h4>
<p>
  These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
</p>

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

<details>
  <h4>▸ Parmesan Deviled Eggs</h4>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

Q12. ¿Cuál es el propósito del elemento <samp>?

Q13. ¿Cuándo debes usar los elementos <ol> y <ul>?

Q14. ¿Cuál es la diferencia entre los métodos post y get en un formulario?

Q15. ¿Cuál es la diferencia entre las etiquetas <div> y <span>?

Q16. ¿Qué debe llenar el espacio en blanco en el código HTML a continuación?

<form method="post" action="mailto:info@linkedin.com" ____="text/plain"></form>

Q17. ¿Cuál es el marcado correcto para el atributo alt de una imagen?

<img src="cubism.jpg" alt="Version of ""Whistler's Mother"" in cubist style">

<img src="cubism.jpg" alt="Version of "Whistler's Mother" in cubist style">

<img src="cubism.jpg" alt='Version of "Whistler&apos;s Mother" in cubist style' />

<img src="cubism.jpg" alt="Version of \"Whistler's Mother\" in cubist style">

Q18. En el código a continuación, ¿cuál es el propósito del atributo id?

<p id="warning">Be careful when installing this product.</p>

Q19. ¿Cuál es el mejor marcado semántico para la oración mostrada?

On July 21, 1969, Neil Armstrong said, "One small step for man, one giant leap for mankind."

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

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

<p>
  On July 21, 1969, Neil Armstrong said,
  <q>"One small step for man, one giant leap for mankind."</q>
</p>

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

Q20. ¿Qué debe llenar el espacio en blanco en este código HTML?

<a href="https://es.yahoo.com/" hreflang="____" target="_blank">Visita Yahoo</a>

Q21. Revisa el texto en el cuadro rojo en la imagen mostrada. ¿Cuál es la mejor manera de codificar esto en HTML?

Image of footer

Q22. ¿Cuál es la mejor manera de codificar tres opciones dentro de un formulario para que el usuario pueda seleccionar solo un elemento?

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

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

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

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

Q23. ¿Cómo confirmas que un documento está escrito en HTML5?

Q24. ¿Qué logra el código mostrado a continuación?

<picture>
  <source srcset="image1.jpg" media="(min-width: 1000px)" />
  <source srcset="image2.jpg" media="(min-width: 750px)" />
  <img src="image3.jpg" />
</picture>

Source: HTML <picture> Tag

Q25. ¿Qué código producirá esta tabla?

Table with yellow background

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

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

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

<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. ¿Para qué se usa típicamente la etiqueta <hr>? / Alt.: ¿Cuál es el significado semántico de la etiqueta <hr>?

Esta es una pregunta confusa y puede haber argumentos para que tanto la segunda como la tercera opción sean correctas.

MDN: El elemento HTML <hr> representa una ruptura temática entre elementos de nivel de párrafo. Históricamente, esto se ha presentado como una regla o línea horizontal. Aunque todavía puede mostrarse como una regla horizontal en navegadores visuales, este elemento ahora se define en términos semánticos, en lugar de términos de presentación, por lo que si deseas dibujar una línea horizontal, debes hacerlo usando CSS apropiado.

Q27. ¿Qué debe llenar los dos espacios en blanco en el código HTML a continuación?

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

Q28. ¿Qué fragmento HTML enlaza de vuelta a la parte superior de una página web?

<a id="top"></a>

<!-- placed at the top of the page -->

<a href="#top">back to top</a>

<a name="top"></a>

<!-- placed at the top of the page -->

<a href="#top">back to top</a>

<a href="#">back to top</a> <a href="#top">back to top</a>

<button href="#">back to top</button> <button href="#top">back to top</button>

Q29. ¿Qué tres etiquetas fueron depreciadas en HTML4 pero regresaron a HTML5?

Q30. La etiqueta _ se usa para marcar un fragmento de código corto, mientras que la etiqueta _ se usa para marcar un bloque de código más largo

  1. Source: MDN Web Docs code
  2. Source: MDN Web Docs pre

Q31. ¿Qué hace el elemento <label>?

Q32. Para que un enlace se abra en una nueva ventana o pestaña, usa el atributo _

Q33. ¿Cuál es la forma más semánticamente precisa de marcar la oración mostrada a continuación? Nota: “TLAs” significa “three-letter acronyms.”

We are fond of our TLAs in web design.

<p>We are fond of our <span title="three-letter acronyms">TLAs</span> in web design.</p>

<p>We are fond of our TLAs in web design.</p>

<p>we are fond of our <abbr title="three-letter acronyms">TLAs</abbr> in web design.</p>

<p>we are fond of our <acronym title="three-letter acronym">TLAs</acronym> in web design.</p>

<acronym> ha sido eliminado en HTML5 y ya no debe usarse. En su lugar, los desarrolladores web deben usar el elemento <abbr>.

Q34. ¿Cuál es el marcado correctamente anidado para esta lista?

Sample list

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

<ul>
  <li>
    Office Supplies
    <ul>
      <li>Stapler</li>
      <li>Paper clips</li>
    </ul>
  </li>
  <li>
    Groceries
    <ul>
      <li>Milk</li>
    </ul>
  </li>
</ul>

<ul>
  <li>office</li>
  <li>staple</li>
  <li>paper</li>
  <li>groceries</li>
  <li>milk</li>
</ul>

Q35. ¿Qué debe llenar el espacio en blanco a continuación?

<link href="phone.css" rel="stylesheet" _____="print" />

Q36. ¿Cuál es la forma semánticamente correcta de marcar este diseño?

quote

<p>
  "Making money is what you have to do to sustain a business—being driven to make something of value
  and purpose is much more powerful."
</p>
<p><em>Lynda Weinman</em></p>

<blockquote>
  <q
    >"Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."</q
  >
  <cite><em>Lynda Weinman</em></cite>
</blockquote>

<blockquote>
  <p>
    "Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."
  </p>
  <cite>Lynda Weinman</cite>
</blockquote>

<section>
  <q
    >"Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."</q
  >
  <cite>Lynda Weinman</cite>
</section>

Q37. ¿Qué opción usa la terminología correcta al describir este marcado: <p>info</p>?

Q38. ¿Cuál es la diferencia entre <input type="submit" value="click me"> y <button type="submit">Click me</button>?

Q39. ¿Cuál es la mejor manera semántica de indicar que el texto se refiere a la entrada del teclado?

Q40. ¿Qué hace este código?

<audio controls>
  <source src="sound.mp3" type="audio/mpeg" />
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.wav" type="audio/wav" />
</audio>

Q41. ¿Qué atributo aplica una sugerencia de atajo de teclado al elemento actual?

Q42. ¿Cuál es la forma correcta de codificar un enlace que, al hacer clic, enviará un correo electrónico a email@example.com con el asunto de “Hello”?

Q43. ¿Qué etiqueta es el elemento raíz de un documento HTML?

La etiqueta <html> es el elemento raíz de un documento HTML, lo que significa que contiene todos los contenidos y etiquetas del documento HTML dentro de ella. El elemento HTML representa la raíz de un documento.

  1. Source
  2. Source

Q44. ¿Qué fragmento de código crea el diseño mostrado, comenzando en <table> y terminando en </table>?

Table

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td rowspan="2">Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
  <td>Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td colspan="2">Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td>Table cell 3</td>
</tr>

Q46. ¿Qué formulario está codificado correctamente?

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

<form>
  <fieldset>
    <legend>Title</legend>
    <p>Your name:</p>
    <input type="text" name="name" id="name" />
    <input type="submit" value="Submit" />
  </fieldset>
</form>

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

<form>
  <legend>Title</legend>
  <label for="name">Your name:</label>
  <input type="text" name="name" id="name" />
  <input type="submit" value="Submit" />
</form>

Q47. ¿Qué hace el atributo poster en la etiqueta <video>?

Q48. ¿Qué hace este código?

<audio controls src="sound.mp3" type="audio/mpeg">When does this text display?</audio>

Q49. ¿Cuál es el propósito principal de la etiqueta <canvas>?

Q50. ¿Qué opción contiene tres elementos válidos de nivel de bloque?</li>

Q51. En el código a continuación, ¿cuál es el propósito del atributo lang?

<p lang="en-GB">Welcome to our wonderful website.</p>

Q52. ¿Qué formatos de imagen pueden ser mostrados por todos los navegadores web?

Q53. Revisa el código a continuación. ¿Cuál es la URL absoluta para una página llamada page.html?

<base href="http://www.linkedin.com/dir/" />

Q54. ¿Cuál es la forma correcta de incluir una hoja de estilos llamada style.css en el <head> de tu documento?

Q55. Quieres tener espaciado simple entre algunas líneas, como en un poema o una dirección. ¿Qué enfoque debes usar?

De MDN (<br>: El elemento Line Break):

Preocupaciones de accesibilidad

Crear párrafos separados de texto usando <br> no solo es una mala práctica, es problemático para las personas que navegan con la ayuda de tecnología de lectura de pantalla. Los lectores de pantalla pueden anunciar la presencia del elemento, pero no cualquier contenido contenido dentro de <br>s. Esto puede ser una experiencia confusa y frustrante para la persona que usa el lector de pantalla.

Usa elementos <p>, y usa propiedades CSS como margin para controlar su espaciado.

Q56. ¿Qué hace la etiqueta <wbr>?

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

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

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

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

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

Q58. ¿Cuál es la forma correcta de codificar un comentario en HTML?

Q59. ¿Qué afirmación es falsa?

Q60. ¿Cuál es la mejor semántica para usar citas en HTML?

Steve Kruz said: "He will Win"

Reference (w3schools)

Q61. ¿Cómo se verá un video mostrado en una página web completamente cargada si se usa la etiqueta <video> y el atributo autoplay no está configurado?

Reference (w3schools)

Q62. ¿Cuál es la forma correcta de describir un elemento vacío / Alt.: ¿Cuál es la forma correcta de describir un elemento vacío, como una etiqueta de salto de línea?

Reference (MDN Web Docs)

Q63. ¿Cuál es el propósito de async en este código?

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

Q64. ¿Qué hace este código en una página que visitas por primera vez?

<audio autoplay loop src="sound.mp3" type="audio/mpeg"></audio>

  1. (MDN) audio,
  2. (MDN) autoplay

Q65. ¿Cuál es la diferencia entre las etiquetas <head> y <header>?

Q66. En este código, ¿cuál es el propósito de defer?

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

Q67. El código a continuación contiene algunos errores. ¿Qué opción corrige todos los errores?

<table>
  <tr>
    Cell 1
  </tr>
  <td>Cell 2</td>
  <caption>
    A table
  </caption>
</table>

<caption>
  A table
</caption>
<table>
  <td>
    <tr>
      Cell 1
    </tr>
    <tr>
      Cell 2
    </tr>
  </td>
</table>

<caption>
  A table
</caption>
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<table>
  <caption>
    A table
  </caption>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <caption>
    A table
  </caption>
</table>

Q68. Dada la estructura de archivos y directorios mostrada aquí, ¿cuál es el elemento correcto para colocar en el archivo profit.html para enlazar a info.html?

Image of footer

Q69. ¿Cuándo deberías usar el elemento <article>?

Reference (MDN)

Q70. ¿Qué lista comprende tres elementos vacíos?

<area />
<embed />
<strong></strong>

<input />
<br />
<p></p>

<link>
<meta>
<title>

<wbr />
<base />
<source />

Q71. ¿Qué fragmento de HTML, al hacer clic, realiza una llamada telefónica en un dispositivo móvil?

Q72. ¿Cuál es el propósito del atributo class?

Reference (MDN)

Reference (MDN)

Q74. ¿Cuál es la forma más semántica de marcar esta oración para que “happy talk must die” se renderice como una cita en línea?

As Steve Krug once said, happy talk must die.

Fuente: W3Schools

Etiqueta <q> La mayoría de los navegadores mostrarán las etiquetas q como elementos en línea con comillas

Q75. ¿Cuál es la forma más semánticamente precisa de crear una barra de navegación principal, mostrada en dirección horizontal?

<p>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</p>

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

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

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

Q76. ¿Cuál opción es la mejor manera de marcar este diseño?

Image of footer

<h4>Mailing Address</h4>
<address>
  6410 Via Real <br />
  Carpinteria, CA 93013<br />
  <a href="mailto:info@linkedin.com">info@linkedin.com</a>
</address>

<h4><strong>Mailing Address</h4>
<address><em>
  6410 Via Real <br>
  Carpinteria, CA 93013<br>
  <a href="mailto:info@linkedin.com">info@linkedin.com</a>
</em></address>

<h4>Mailing Address</h4>
<p>
  <em>
    6410 Via Real <br />
    Carpinteria, CA 93013<br />
    <a href="mailto:info@linkedin.com">info@linkedin.com</a>
  </em>
</p>

<p><strong>Mailing Address</strong></p>
<p>
  <em>
    6410 Via Real <br />
    Carpinteria, CA 93013<br />
    <a href="mailto:info@linkedin.com">info@linkedin.com</a>
  </em>
</p>

Fuente: W3Schools

La etiqueta <address> define la información de contacto para el autor/dueño de un documento o un artículo. La información de contacto puede ser una dirección de correo electrónico, URL, dirección física, número de teléfono, identificador de redes sociales, etc. El texto en el elemento <address> generalmente se renderiza en cursiva, y los navegadores siempre agregarán un salto de línea antes y después del elemento <address>.

Q77. ¿Cuál es el propósito principal de HTML?

Q78. Para el código HTML a continuación, ¿cuándo se mostrará “Sample Text” al navegador?

<noscript>Sample Text</noscript>

Reference (MDN)

Q79. ¿Cómo se renderizará este código por defecto en la mayoría de los navegadores web?

<details>
  <h4>Mixed Berry Tart.</h4>
  <p>
    Raspberries, blueberries, and strawberries on top of a creamy filling served in a crispy tart.
  </p>
</details>

Q80. ¿Cuál es la diferencia entre <svg> y <canvas>?

Q81. ¿Cuál es la diferencia entre los atributos readonly y disabled para el elemento <textarea>?

  1. Fuente: readonly
  2. Fuente: disabled

Q82. En este código, ¿qué es target?

<a target="_blank">...</a>

Q83. ¿Cuál es la forma correcta de agregar una URL de envío a un elemento button?

<button submit="http://example.com/process">Process data</button>

<button action="http://example.com/process">Process data</button>

<button formaction="http://example.com/process">Process data</button>

<button method="http://example.com/process">Process data</button>

formaction — La URL que procesa la información enviada por el botón. Anula el atributo action del propietario del formulario del botón. No hace nada si no hay propietario del formulario. Fuente

Q84. ¿Cuál es el mejor marcado para producir este texto?

x<y&z>w

Esta pregunta tiene un problema, sin embargo esta respuesta contará como correcta Es una pregunta demasiado extraña porque todos esos métodos no funcionan. El método correcto es usar &amp, &lt, &gt.

Q85. ¿Qué está mal con este fragmento de código?

<label>Address:</label> <input type="text" name="address" id="address-input" />

Q86. ¿Cuál es el método predeterminado para el envío de formularios?

Q87. ¿Cuál es el marcado más semánticamente correcto para un comentario lateral en letra pequeña?

Q88. ¿Qué opción producirá la palabra española canción?

Q89. ¿Cuál es el propósito de <caption>?

Q90. El atributo value está asociado con qué conjunto de etiquetas?

<li>
  <input />
  <option></option>
</li>

<input>
<option>
<textarea>

<button>
  <input />
  <form></form>
</button>

<input /> <label> <meter></meter></label>

Q91. ¿Qué está mal con este código?

<img src="https://source.unsplash.com/random">

Q92. ¿Cuál opción es el marcado más semánticamente correcto para especificar la primera definición de un término?

Elemento Definition => El elemento HTML <dfn> se usa para indicar el término que se define dentro del contexto de una frase o oración de definición.
**Elemento Description Term => El elemento HTML <dt> especifica un término en una lista de descripción o definición, y como tal debe usarse dentro de un elemento <dl>.
**Elemento Description Details => El elemento HTML <dd> proporciona la descripción, definición o valor para el término precedente (<dt>) en una lista de descripción (<dl>).

Fuente

Q93. ¿Cuál opción es la mejor manera de codificar tres opciones dentro de un formulario para que el usuario pueda seleccionar múltiples elementos?

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

Los elementos <input> de tipo checkbox se renderizan por defecto como cajas que están marcadas (tildadas) cuando se activan como podrías ver en un formulario oficial del gobierno. La apariencia exacta depende de la configuración del sistema operativo bajo el cual se ejecuta el navegador. Generalmente, es un cuadrado pero puede tener esquinas redondeadas.

Fuente

Q94. ¿Cómo marcarías una pieza de arte ASCII (un emoticono) de manera accesible?

Q95. ¿Cuál ejemplo es una forma estándar en HTML5 para agregar metadatos de autor a una página?

Q96. Dados los siguientes requisitos, selecciona la configuración correcta de input: Un input que permite al usuario seleccionar de un rango de valores enteros entre 0 y 100 (inclusive) en incrementos de 5

Los elementos <input> de tipo range permiten al usuario especificar un valor numérico que no debe ser menor que un valor dado y no mayor que otro valor dado. El atributo step es un número que especifica la granularidad a la que debe adherirse el valor.

Fuente

Q97. ¿Cuál opción es un marcado válido para un elemento <head>?

El elemento HTML <head> contiene información legible por máquina (metadatos) sobre el documento, como su título. La etiqueta <data> se usa para agregar una traducción legible por máquina de un contenido dado. Fuente 1/ Fuente 2

Q98. Necesitas agregar comentarios al blog de la empresa. ¿Cuál es el marcado más semántico para una lista de comentarios?

<aside>
  <h3>Comments</h3>
  <article>First comment.</article>
  <article>Second comment.</article>
</aside>

<div aria="dpub-comments">
  <h3>Comments</h3>
  <div aria="dpub-comment">First comment.</div>
  <div aria="dpub-comment">Second comment.</div>
</div>

<aside>
  <h3>Comments</h3>
  <aside>First comment.</aside>
  <aside>Second comment.</aside>
</aside>

<div typeof="comments">
  <h3>Comments</h3>
  <div typeof="comment">First comment.</div>
  <div typeof="comment">Second comment.</div>
</div>

El elemento HTML <article> representa una composición autocontenida en un documento, página, aplicación o sitio, que está destinada a ser distribuible o reutilizable de forma independiente (por ejemplo, en sindicación). Ejemplo: un comentario enviado por el usuario. Fuente

Q99. Para hacer algo editable por el usuario, necesitas establecer el atributo _ en _

El atributo global contenteditable es un atributo enumerado que indica si el elemento debe ser editable por el usuario. Si es así, el navegador modifica su widget para permitir la edición. El atributo debe tomar uno de los siguientes valores: true o una cadena vacía, que indica que el elemento es editable; false, que indica que el elemento no es editable. Fuente

Q100. ¿Cuál opción es la forma estándar de incluir un valor en un formulario sin hacerlo visible o editable por el usuario?

Los elementos <input> de tipo hidden permiten a los desarrolladores web incluir datos que no pueden ser vistos o modificados por los usuarios cuando se envía un formulario. Por ejemplo, el ID del contenido que se está ordenando o editando actualmente, o un token de seguridad único. Los inputs ocultos son completamente invisibles en la página renderizada, y no hay forma de hacerlos visibles en el contenido de la página. Fuente

Q101. ¿Cuál es la forma semántica de agregar un título identificativo a una tabla?

El elemento HTML <caption> especifica el caption (o título) de una tabla. Fuente

Q102. ¿Qué archivo de imagen referenciado en el atributo srcset de este elemento img debería cargar un navegador en un teléfono móvil pequeño?

<img
  srcset="medium.jpg 320w, large.jpg 1280w"
  src="small.jpg"
  alt="Our favorite image"
  sizes="(min-width: 1200px) 640px, 100vw"
/>

El navegador: 1. Mirará el ancho de su dispositivo. 2. Determinará qué condición de medios en la lista de tamaños es la primera en ser verdadera. 3. Mirará el tamaño del slot dado a esa media query. 4. Cargará la imagen referenciada en la lista srcset que tenga el mismo tamaño que el slot o, si no hay una, la primera imagen que sea más grande que el tamaño del slot elegido. Fuente

Q103. ¿Qué descripción está codificada correctamente?

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

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

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

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

Fuente 1 Fuente 2

Q104. ¿Qué está mal con este código?

<ul>
  <h2>Espresso Drinks</h2>
  <li>Espresso</li>
  <li>Latte</li>
  <li>Cappuccino</li>
  <li>Mocha</li>
</ul>

El modelo de contenido de ul solo acepta "Cero o más elementos li y elementos de soporte de script". Fuente

Q105. Un diseñador te dio código CSS que solo debe ejecutarse cuando el dispositivo que renderiza la página está en modo oscuro. ¿Cómo incrustarías ese código?

Q106. ¿Cómo marcarías un encabezado para una fila de tabla?

<table>
  <thead scope="row">
    <th row="1">Header</th>
  </thead>
  <tr>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <th scope="row">Header</th>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <thead scope="row">
      Header
    </thead>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <th>Header</th>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

Q107. ¿Qué declaración es correcta?

Fuente

Q108. Los usuarios informan que un formulario no funciona. ¿Cuál es el culpable?

<form action="/choices" disabled>
  <fieldset disabled>
    <legend>choices</legend>
    <label>Choice 1 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 2 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 3 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 4 <input type="radio" name="choice" value="choice1" /></label>
    <button>Choose!</button>
  </fieldset>
</form>

Un fieldset deshabilitado es inutilizable y no se puede hacer clic en él. Fuente

Q109. ¿Qué lista de descripción está codificada correctamente?

<dl>
  <dt>Server</dt>
  <dd>Software used to server webpages, like Apache.</dd>
  <dd>Hardware used to provide data to other computers.</dd>
  <!--Other terms and descriptions -->
</dl>

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

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

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

Q110. ¿Qué significa la a en la etiqueta HTML?

Fuente

Q111. ¿Cuál es el elemento HTML correcto para insertar un salto de línea?

Q112. El atributo global HTML, “contenteditable” se usa para

Q113. Los elementos HTML que no están destinados a almacenar contenido u otros elementos se llaman elementos _

Fuente

Q114. El atributo _ de un elemento label HTML es un mecanismo de referencia para indicar a qué input o elemento está vinculada la etiqueta

Fuente

Q115. Codificar en HTML proporciona cuál de los siguientes?

Q116. ¿Qué elemento HTML es el contenedor para todos los aspectos renderizables del documento?

Q117. La “h” en la etiqueta HTML h1 es abreviatura de _

Fuente

Q118. ¿Cuál es un uso inválido del elemento <a>?

<a href="#additional-information" class="Card">
  <video src="media.mp4" width="400" height="300"></video>
</a>

<a href="#additional-information" class="Card">
  <details>
    <summary>Additional Information</summary>
  </details>
</a>

<a href="#additional-information" class="Card">
  <p>Additional Information</p>
  <p></p
></a>

<a href="#additional-information" class-"Card">
  <img src="media.jpeg" alt="More information"></video>
</a>

Q119. ¿Cómo mostrar texto preformateado en HTML?

Q120. ¿Cuál es un elemento title válido?

Fuente

Q121. ¿Qué enlace contiene una URL válida?

Fuente 1 Fuente 2

Q122. ¿Qué ejemplo falta una etiqueta de cierre obligatoria, haciéndolo inválido?

Fuente

Q123. ¿Cuál es el método semántico para marcar un video con caption en navegadores que lo soporten?

Fuente

Q124. Un white paper tiene una barra lateral y notas finales, ambas complementarias al texto principal. ¿Cómo las marcarías para hacer sus roles distintos más ampliamente accesibles?

<custom-sidebar aria-label-"Sidebar"›Sidebar...</custom-sidebar><custom-footnote aria-
label="Endnotes">Endnotes...</custom-footnote>

<aside role="sidebar">Sidebar...</aside>
<aside role="notes">Endnotes...</aside>

<aside role="complementary">Sidebar...</aside>
<aside role="supplementary">Endnotes...</aside>

<aside aria-label-"Sidebar">Sidebar...</aside><aside aria-label="Endnotes">Endnotes...</aside>

Fuente

Q125. Un white paper tiene una barra lateral y notas finales, ambas complementarias al texto principal. ¿Cómo las marcarías para hacer sus roles distintos más ampliamente accesibles?

Fuente

Q126. ¿Qué ejemplo de video se reproducirá automáticamente en la mayoría de los navegadores?

Fuente

Q127. ¿En qué orden se ejecutarán estos scripts, asumiendo que todos toman el mismo tiempo para descargar?

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

Q128. ¿Cuál es el método compatible hacia atrás de convertir un círculo en un SVG en un enlace?

Fuente

Q129. Los usuarios informan que un formulario no funciona. ¿Cuál es el culpable?

  <form action="/choices" disabled>
    <fieldset disabled>
      <legend>Choices</legends>
      <label>Choice 1 <input type="radio" name="choice" value="choice1" /></label>
      <label>Choice 2 <input type="radio" name="choice" value="choice2" /></label>
      <label>Choice 3 <input type="radio" name="choice" value="choice3" /></label>
      <label>Choice 4 <input type="radio" name="choice" value="choice4" /></label>
      <button>Choose!</button>
    </fieldset>
  </form>

Q130. ¿Qué está mal con esta tabla?

<table>
  <legend>A two body table!</legend>
  <col />
  <col />
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
  </tbody>
</table>

Fuente

Q131. En este código, ¿cuál es el propósito del atributo id?

<p id="warning">Be careful when installing this product.</p>

Fuente

Q132. ¿Qué representa el elemento HTML <em>?

Fuente

Q133. El elemento **_** se usa para renderizar gráficos simples como arte lineal, gráficos y otros elementos gráficos personalizados en el lado del cliente.

Q134. ¿Qué atributo no es esencial bajo <iframe>?

Q135. ¿Qué significa HTML?

Q136. ¿Cuál de los siguientes elementos HTML se usa para crear una lista no ordenada?

This site is open source. Improve this page.