Pon a prueba tus conocimientos

Quiz de Desarrollo Web

Ponte a prueba con preguntas estilo entrevista. Selecciona un tema en la barra lateral y haz clic para ver las respuestas.

📄

HTML

Pon a prueba tus conocimientos de HTML

📄HTML

¿Cuál es la diferencia entre los elementos <div> y <span>?

<div> es un elemento de bloque que ocupa todo el ancho disponible y comienza en una nueva línea. <span> es un elemento en línea que solo ocupa el ancho necesario y no rompe la línea. Usa <div> para secciones grandes y <span> para piezas pequeñas de contenido dentro del texto.

<div>I take full width</div>
<span>I'm inline</span><span>Next to me</span>

Aprender más →

📄HTML

¿Qué es el HTML semántico y por qué es importante?

El HTML semántico usa elementos que describen claramente su significado (como <header>, <nav>, <article>, <footer>) en lugar de etiquetas <div> genéricas. Mejora la accesibilidad para lectores de pantalla, ayuda al SEO al permitir que los motores de búsqueda entiendan la estructura del contenido y hace el código más legible y mantenible.

<!-- Non-semantic -->
<div class="header">...</div>

<!-- Semantic -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Aprender más →

📄HTML

¿Cuál es la diferencia entre <script>, <script async> y <script defer>?

Un <script> normal bloquea el parseo de HTML hasta que el script se carga y ejecuta. <script async> se carga en paralelo y se ejecuta en cuanto está listo (el orden no está garantizado). <script defer> se carga en paralelo pero se ejecuta después de parsear el HTML, en orden. Usa defer para scripts que necesitan el DOM y async para scripts independientes como analítica.

<!-- Blocks parsing -->
<script src="app.js"></script>

<!-- Loads async, executes when ready -->
<script async src="analytics.js"></script>

<!-- Loads async, executes after DOM -->
<script defer src="app.js"></script>

Aprender más →

📄HTML

¿Cuál es el propósito del atributo alt en las imágenes?

El atributo alt proporciona texto alternativo para imágenes cuando no se pueden mostrar o para lectores de pantalla. Es crucial para la accesibilidad (usuarios con discapacidad visual), el SEO (los buscadores leen el texto alt) y como respaldo cuando las imágenes no cargan. El texto alt debe describir el contenido y el propósito de la imagen.

<!-- Good alt text -->
<img src="chart.png"
     alt="Sales chart showing 50% growth in Q4 2024" />

<!-- Decorative images -->
<img src="decoration.png" alt="" />

Aprender más →

📄HTML

¿Qué son los atributos de datos y cómo se usan?

Los atributos de datos (data-*) permiten almacenar datos personalizados en elementos HTML sin afectar la presentación. JavaScript puede acceder a ellos mediante element.dataset. Son útiles para pasar configuración a JavaScript, guardar estado o añadir metadatos sin elementos DOM extra.

<button data-product-id="123"
        data-action="add-to-cart">
  Add to Cart
</button>

<script>
const btn = document.querySelector('button');
console.log(btn.dataset.productId); // "123"
</script>

Aprender más →

📄HTML

¿Qué es la declaración DOCTYPE y por qué se necesita?

<!DOCTYPE html> le indica a los navegadores que usen el modo estándar en lugar del modo quirks. Sin ella, los navegadores pueden renderizar páginas de forma inconsistente. Inclúyela siempre al inicio de los documentos HTML.

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>

Aprender más →

📄HTML

¿Cuál es la diferencia entre los atributos id y class?

id debe ser único por página y se usa para elementos específicos (anclas, selección en JS). class puede reutilizarse en múltiples elementos para estilos compartidos. Usa clases para estilos e ids para identificación única.

<!-- id: unique identifier -->
<div id="header">One per page</div>

<!-- class: reusable -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>

Aprender más →

📄HTML

¿Qué son los elementos vacíos (void) en HTML?

Los elementos void no pueden tener contenido ni etiqueta de cierre. Ejemplos: <img>, <br>, <hr>, <input>, <meta>, <link>. En HTML5 son auto-cerrados (no se necesita />, aunque se permite).

<img src="photo.jpg" alt="Photo">
<br>
<input type="text">
<meta charset="UTF-8">

Aprender más →

📄HTML

¿Cuál es el propósito de la etiqueta <meta> viewport?

La meta viewport controla cómo se escala la página en dispositivos móviles. width=device-width establece el ancho al del dispositivo, initial-scale=1.0 fija el zoom inicial. Es esencial para diseño responsive.

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

Aprender más →

📄HTML

¿Cuál es la diferencia entre <button> y <input type='button'>?

<button> puede contener contenido HTML (iconos, texto) y tiene type='submit' por defecto en formularios. <input type='button'> solo muestra el texto del value. Prefiere <button> por flexibilidad y accesibilidad.

<button type="button">
  <span>🔥</span> Click Me
</button>

<input type="button" value="Click">

Aprender más →

📄HTML

¿Para qué se utiliza el elemento <template>?

<template> contiene HTML que no se renderiza hasta que lo activa JavaScript. El contenido se analiza pero no se muestra. Útil para plantillas del lado del cliente sin mostrar contenido prematuramente.

<template id="card-template">
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
</template>

<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
</script>

Aprender más →

📄HTML

¿Qué son los atributos ARIA y cuándo deberías usarlos?

Los atributos ARIA (Accessible Rich Internet Applications) mejoran la accesibilidad para contenido dinámico. Usa aria-label para etiquetas, aria-hidden para ocultar elementos decorativos y role para el propósito del elemento. Úsalos solo cuando la semántica nativa de HTML no sea suficiente.

<button aria-label="Close menu">×</button>
<div role="alert">Error occurred</div>
<span aria-hidden="true">🔒</span>

Aprender más →

📄HTML

¿Cuál es la diferencia entre <section> y <article>?

<article> es contenido autocontenido y distribuible de forma independiente (entrada de blog, comentario, widget). <section> agrupa contenido relacionado temáticamente dentro de un documento. Los artículos pueden contener secciones y las secciones pueden contener artículos.

<article>
  <h1>Blog Post Title</h1>
  <section>
    <h2>Introduction</h2>
    <p>...</p>
  </section>
</article>

Aprender más →

📄HTML

¿Cómo creas formularios accesibles?

Usa <label> con el atributo for que coincida con el id del input. Agrupa inputs relacionados con <fieldset> y <legend>. Añade aria-describedby para textos de ayuda. Usa required y autocomplete. Proporciona mensajes de error claros.

<label for="email">Email:</label>
<input type="email" id="email"
  aria-describedby="email-help" required>
<span id="email-help">We'll never share</span>

Aprender más →

📄HTML

¿Para qué se usan <figure> y <figcaption>?

<figure> envuelve contenido autocontenido como imágenes, diagramas o código. <figcaption> proporciona un pie de figura. Es útil para imágenes con leyenda, permitiendo moverlas sin perder contexto.

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>
    Figure 1: Q4 sales increased 50%
  </figcaption>
</figure>

Aprender más →

📄HTML

¿Cuál es la diferencia entre <strong> y <b>, <em> y <i>?

<strong> indica importancia (los lectores de pantalla lo enfatizan), <b> es solo estilo en negrita. <em> indica énfasis/entonación, <i> es estilo en cursiva o voz alternativa. Usa etiquetas semánticas para significado y presentacionales solo para estilo.

<p><strong>Warning:</strong> Important!</p>
<p><em>Really</em> important</p>

<p><b>Bold</b> but not important</p>
<p><i>Technical term</i></p>

Aprender más →

📄HTML

¿Cuáles son los nuevos tipos de input en HTML5?

HTML5 añadió: email, url, tel, number, range, date, time, datetime-local, month, week, color, search. Proporcionan validación integrada y teclados optimizados para móviles.

<input type="email" required>
<input type="date">
<input type="range" min="0" max="100">
<input type="color">

Aprender más →

📄HTML

¿Qué son los elementos <details> y <summary>?

<details> crea un widget de revelado que se puede abrir/cerrar. <summary> proporciona el encabezado visible. Es un acordeón nativo sin JavaScript. Usa el atributo open para iniciar expandido.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content here...</p>
</details>

<details open>
  <summary>Starts open</summary>
  <p>Visible by default</p>
</details>

Aprender más →

📄HTML

¿Cuál es el propósito del atributo lang?

El atributo lang especifica el idioma del contenido. Se establece en <html> para toda la página. Ayuda a los lectores de pantalla a pronunciar correctamente, habilita la traducción del navegador y mejora el SEO para segmentación por idioma.

<html lang="en">
  <body>
    <p>English content</p>
    <p lang="es">Contenido en español</p>
  </body>
</html>

Aprender más →

📄HTML

¿Cuál es la diferencia entre localStorage y sessionStorage?

Ambos almacenan cadenas clave-valor en el navegador. localStorage persiste hasta que se borra manualmente. sessionStorage se borra cuando se cierra la pestaña. Ambos tienen un límite aproximado de 5MB. Ninguno se envía al servidor como las cookies.

// Persists forever
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');

// Clears on tab close
sessionStorage.setItem('temp', 'data');

Aprender más →