102 preguntas de entrevista HTML para contratar desarrolladores expertos

HTML es la base del desarrollo web, lo que hace que sea aún más importante contratar a los desarrolladores HTML adecuados. Como reclutador o gerente de contratación, es su responsabilidad hacer las preguntas correctas que revelen la verdadera experiencia en HTML de un candidato, tal como verificaría las habilidades requeridas para un desarrollador HTML.

Esta publicación de blog proporciona una colección detallada de preguntas de entrevista de HTML, adaptadas para varios niveles de experiencia, desde principiantes hasta profesionales experimentados. También hemos incluido un conjunto de preguntas de opción múltiple (MCQ) de HTML para una verificación rápida de conocimientos.

Al aprovechar estas preguntas, puede evaluar con confianza a los candidatos y tomar decisiones de contratación informadas; para optimizar aún más el proceso, considere usar una prueba en línea de HTML-CSS antes de la etapa de la entrevista.

Tabla de contenidos

Preguntas de entrevista HTML para recién graduados

Preguntas de entrevista HTML para juniors

Preguntas de entrevista HTML intermedias

Preguntas de entrevista HTML para experimentados

Preguntas de opción múltiple de HTML

¿Qué habilidades de HTML deberías evaluar durante la fase de la entrevista?

3 consejos para usar preguntas de entrevista HTML

Evaluar las habilidades de HTML de manera efectiva

Descarga la plantilla de preguntas de entrevista HTML en múltiples formatos

Preguntas de entrevista HTML para recién graduados

1. ¿Puedes explicar qué es HTML en términos muy sencillos, como si estuvieras hablando con un niño de cinco años?

Imagina que quieres construir una casa. HTML es como el plano, o el plan, que le dice a la computadora cómo construir una página web. Utiliza etiquetas especiales, que son como instrucciones, para decir cómo deben verse las cosas y dónde deben ir.

Piénsalo como construir con LEGO. Cada bloque de LEGO es un fragmento de contenido (texto, imagen, etc.), y las etiquetas HTML le dicen a la computadora cómo organizar esos LEGO para hacer una página web de aspecto agradable. Por ejemplo, <b> pone el texto en negrita, y <img> pone una imagen en la página.

2. ¿Qué son las etiquetas HTML y puedes darme un par de ejemplos?

Las etiquetas HTML son palabras clave encerradas entre corchetes angulares (< >) que definen cómo los navegadores web formatean y muestran el contenido. Normalmente vienen en pares: una etiqueta de apertura y una etiqueta de cierre. La etiqueta de apertura inicia el efecto de la etiqueta, y la etiqueta de cierre (que incluye una barra inclinada /) lo finaliza.

Los ejemplos incluyen:

<html> y </html>: Estos definen la raíz de un documento HTML.
<p> y </p>: Estos definen un párrafo.
<h1> y </h1>: Estos definen un encabezado de nivel 1.
<a> y </a>: Estos definen un hipervínculo. El atributo href especifica el destino del enlace, por ejemplo, <a href="https://www.example.com">Visitar Ejemplo</a>
<img>: Esta es una etiqueta de cierre automático que se utiliza para incrustar una imagen. El atributo src especifica la fuente de la imagen, por ejemplo, <img src="imagen.jpg" alt="Mi Imagen">

3. ¿Cuál es la estructura básica de un documento HTML? ¿Cuáles son las etiquetas necesarias?

La estructura básica de un documento HTML consiste en una declaración, una sección de encabezado y una sección de cuerpo. Las etiquetas necesarias incluyen:

<!DOCTYPE html>: Esta declaración define el tipo de documento y la versión de HTML que se está utilizando. Debe ser lo primero en su documento HTML.
<html>: Este es el elemento raíz que encierra todos los demás elementos HTML.
<head>: Contiene metainformación sobre el documento HTML, como el título, el conjunto de caracteres y los enlaces a las hojas de estilo.
<title>: Especifica un título para el documento HTML (que se muestra en la barra de título o pestaña del navegador).
<body>: Contiene el contenido visible de la página.

4. ¿Cómo se crea un encabezado en HTML? ¿Cuáles son los diferentes niveles de encabezados?

Para crear un encabezado en HTML, se utilizan las etiquetas <h1> a <h6>. La etiqueta <h1> representa el encabezado más importante, mientras que <h6> representa el menos importante.

Hay seis niveles de encabezados en HTML:

<h1> - Encabezado principal
<h2> - Subtítulo
<h3> - Sub-subtítulo
<h4> - Encabezado de sección
<h5> - Encabezado de sección menor
<h6> - Encabezado menos importante

5. ¿Cómo se crea un párrafo en HTML?

En HTML, se crea un párrafo utilizando la etiqueta <p>. El texto que quieres que forme parte del párrafo va entre las etiquetas de apertura <p> y cierre </p>.

Por ejemplo:

<p>Este es el primer párrafo.</p> <p>Este es el segundo párrafo.</p>

6. ¿Cómo se puede poner texto en negrita o cursiva en HTML?

Para poner texto en negrita en HTML, puedes utilizar las etiquetas <strong> o <b>. <strong> significa importancia semántica, mientras que <b> es puramente presentacional. Por ejemplo: <strong>Este texto está en negrita</strong> o <b>Este texto también está en negrita</b>.

Para poner texto en cursiva, puedes utilizar las etiquetas <em> o <i>. <em> significa énfasis, mientras que <i> también es puramente presentacional. Por ejemplo: <em>Este texto está en cursiva</em> o <i>Este texto también está en cursiva</i>.

7. ¿Cómo se añade una imagen a una página web usando HTML? ¿Qué hace el atributo `src`?

Para añadir una imagen a una página web usando HTML, se utiliza la etiqueta <img>. La sintaxis básica es <img src="ruta/a/tu/imagen.jpg" alt="Texto descriptivo">. El atributo src especifica la fuente o la ruta al archivo de la imagen. Esto le indica al navegador dónde encontrar la imagen para mostrarla. El atributo alt proporciona texto alternativo si la imagen no se puede mostrar.

8. ¿Cómo se crea un enlace a otro sitio web o a una página diferente en el mismo sitio web?

Para crear un enlace en Markdown, se utiliza la siguiente sintaxis: [Texto del enlace](URL). El Texto del enlace es lo que el usuario ve, y la URL es el destino al que se llevará al usuario cuando haga clic en el enlace.

Por ejemplo:

[Google](https://www.google.com) se mostrará como Google.

[Página sobre nosotros](/about) se puede usar para enlazar a una página local (suponiendo que la página está en /about).

9. ¿Qué es un atributo HTML? Dé algunos ejemplos de atributos HTML comunes.

Un atributo HTML proporciona información adicional sobre un elemento HTML. Los atributos modifican o definen el comportamiento o las características de un elemento. Siempre se especifican en la etiqueta de inicio. Un atributo consta de un nombre y un valor, separados por un signo igual (=), y el valor está encerrado entre comillas.

Ejemplos de atributos HTML comunes incluyen:

src: Especifica la URL de una imagen en un elemento <img> o un script en un elemento <script>.
href: Especifica la URL del destino del enlace en un elemento <a>.
class: Especifica uno o más nombres de clase para un elemento (a menudo se utiliza para apuntar a una clase en una hoja de estilo).
id: Especifica un id único para un elemento.
style: Especifica un estilo CSS en línea para un elemento.
alt: Especifica un texto alternativo para una imagen, si la imagen no se puede mostrar (para la etiqueta <img>).

10. ¿Cuál es la diferencia entre las etiquetas `<h1>` y `<h6>`?

Las etiquetas <h1> a <h6> son etiquetas de encabezado HTML que se utilizan para definir encabezados de diferentes niveles de importancia. <h1> representa el encabezado más importante o de nivel más alto, típicamente el título principal de una página o sección. <h6> representa el encabezado menos importante o de nivel más bajo.

En términos de presentación visual, los navegadores típicamente renderizan las etiquetas <h1> con el tamaño de fuente más grande y el peso más audaz, mientras que las etiquetas <h6> se muestran con el tamaño de fuente más pequeño y potencialmente un peso más ligero. El significado semántico es el diferenciador clave; los motores de búsqueda y las tecnologías de asistencia utilizan estas etiquetas para comprender la estructura y organización del contenido.

11. ¿Cuál es el propósito de la sección `<head>` en un documento HTML?

La sección <head> de un documento HTML contiene metadatos sobre el documento HTML. Estos metadatos no se muestran en la página en sí, pero son cruciales para la forma en que el navegador y otros servicios interpretan y manejan el documento.

Específicamente, el <head> típicamente incluye:

<title>: Define el título que aparece en la pestaña del navegador.
Etiquetas <meta>: Proporcionan información como el juego de caracteres, la descripción, las palabras clave, la configuración de la ventana gráfica y otros metadatos utilizados por los motores de búsqueda y los navegadores.
Etiquetas <link>: Enlazan recursos externos como hojas de estilo CSS, favicons y recursos precargados.
Etiquetas <style>: Integran estilos CSS directamente dentro del documento.
Etiquetas <script>: Incluyen o enlazan código JavaScript (aunque colocar las etiquetas <script> justo antes de la etiqueta </body> de cierre a menudo se prefiere por razones de rendimiento).
<base>: Especifica una URL base para todas las URL relativas en el documento.

12. ¿Cómo se crea una lista desordenada en HTML?

Para crear una lista desordenada en HTML, se utiliza la etiqueta <ul>. Cada elemento dentro de la lista se representa mediante la etiqueta <li> (elemento de la lista). La etiqueta <ul>significa el inicio y el final de la lista desordenada.

Aquí hay un ejemplo simple:

<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>

La apariencia predeterminada son viñetas, pero puede cambiar el estilo de la viñeta usando CSS (por ejemplo, list-style-type: square;).

13. ¿Cómo se crea una lista ordenada en HTML?

Para crear una lista ordenada en HTML, se utiliza el elemento <ol>. Cada elemento de la lista se representa mediante un elemento <li> (elemento de la lista).

Por ejemplo:

<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>

De forma predeterminada, las listas ordenadas se numeran con números arábigos (1, 2, 3...). Puede cambiar el estilo de numeración utilizando el atributo type de la etiqueta <ol> (por ejemplo, type="A" para letras mayúsculas, type="i" para números romanos en minúsculas).

14. ¿Cómo se pueden agregar comentarios a su código HTML? ¿Por qué son útiles los comentarios?

En HTML, los comentarios se agregan utilizando la sintaxis . El navegador ignorará cualquier cosa que se coloque entre estas etiquetas.

Los comentarios son útiles por varias razones:

Explicación del código: Puedes usar comentarios para describir lo que hace una sección específica del código HTML, lo que facilita que otros (o tú mismo en el futuro) entiendan el propósito del código.
Depuración: Durante el desarrollo, puedes comentar temporalmente secciones de código para ayudar a aislar e identificar la fuente de los problemas.
Documentación: Los comentarios pueden servir como una forma de documentación dentro del propio código, proporcionando contexto e información valiosa sin afectar el contenido mostrado.

15. ¿Cuál es la diferencia entre un elemento de nivel de bloque y un elemento en línea? ¿Puedes dar ejemplos?

Los elementos de nivel de bloque ocupan todo el ancho disponible, comenzando en una nueva línea y forzando a los elementos subsiguientes a una nueva línea también. Crean una estructura de bloque clara. Los ejemplos incluyen <div>, <p>, <h1>-<h6>, <form>, <ul>, <ol> y <li>.

Los elementos en línea, por otro lado, solo ocupan el ancho necesario para contener su contenido. Fluyen dentro del texto circundante y no fuerzan nuevas líneas. Ejemplos son <span>, <a>, <img>, <strong>, <em> y <input>. Puedes tener múltiples elementos en línea en la misma línea.

16. ¿Cuál es el propósito del atributo `alt` en la etiqueta `<img>`? ¿Por qué es importante?

El atributo alt en la etiqueta <img> proporciona texto alternativo para una imagen si no se puede mostrar. Esto podría deberse a un enlace roto, a que no se encuentra la imagen o a que el usuario utiliza un lector de pantalla. Es importante para la accesibilidad, ya que permite a los usuarios con problemas de visión comprender el contenido de la imagen.

También ayuda con el SEO. Los motores de búsqueda utilizan el texto alt para comprender de qué se trata la imagen, lo que puede mejorar la clasificación de la página en los resultados de búsqueda. Esencialmente, proporciona contexto donde la imagen no puede ser interpretada visualmente.

17. ¿Cómo se crea una tabla simple en HTML?

Para crear una tabla simple en HTML, se utiliza el elemento <table> como contenedor. Dentro de <table>, se definen filas utilizando el elemento <tr> (fila de la tabla). Dentro de cada <tr>, se añaden celdas de datos de la tabla utilizando el elemento <td> (datos de la tabla) para celdas regulares o <th> (encabezado de la tabla) para celdas de encabezado.

Aquí tienes un ejemplo básico:

<table> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Fila 1, Celda 1</td> <td>Fila 1, Celda 2</td> </tr> <tr> <td>Fila 2, Celda 1</td> <td>Fila 2, Celda 2</td> </tr> </table>

18. ¿Cuál es el propósito de la etiqueta `<div>`?

La etiqueta <div> es un elemento contenedor genérico en HTML. Su propósito principal es agrupar otros elementos HTML. Esta agrupación permite:

Aplicar estilos CSS a una sección de la página.
Manipular los elementos agrupados con JavaScript.
Crear divisiones semánticas dentro de la estructura del documento.

19. ¿Cuál es el propósito de la etiqueta `<span>`?

La etiqueta <span> es un contenedor en línea genérico para contenido de fraseo. Se utiliza para agrupar elementos con fines de estilo o porque comparten valores de atributo como lang o class. Esencialmente, actúa como un gancho para que CSS o JavaScript se dirijan a partes específicas del texto u otros elementos en línea sin agregar significado semántico.

A diferencia de los elementos a nivel de bloque (como <div>), <span> no crea saltos de línea ni afecta el diseño del contenido circundante. Es puramente para aplicar estilos o manipular secciones de texto o elementos en línea.

20. ¿Cómo se incluye una hoja de estilo CSS en un documento HTML?

Hay tres formas principales de incluir una hoja de estilo CSS en un documento HTML:

Hoja de estilo externa: Usando la etiqueta <link> en la sección <head> del documento HTML. Este es el enfoque más común y recomendado. Enlaza a un archivo .css externo. Por ejemplo: <link rel="stylesheet" href="estilos.css">.
Hoja de estilo interna: Incrustando reglas CSS directamente dentro del documento HTML usando la etiqueta <style>, también colocada en la sección <head>. Por ejemplo: <style> body { background-color: #f0f0f0; } </style>.
Estilos en línea: Aplicando estilos directamente a elementos HTML individuales usando el atributo style. Por ejemplo: <p style="color: blue;">Este es un párrafo azul.</p>. Los estilos en línea deben usarse con moderación.

21. ¿Cuál es el propósito de la etiqueta `<meta>` en HTML? ¿Puede dar algunos ejemplos de su uso?

La etiqueta <meta> en HTML proporciona metadatos sobre el documento HTML. Estos metadatos no se muestran en la página en sí, pero son legibles por máquina. Son utilizados por navegadores, motores de búsqueda y otros servicios web para comprender y procesar el documento.

Ejemplos de uso incluyen:

Especificar el juego de caracteres: <meta charset="UTF-8">
Establecer la ventana gráfica para el diseño responsivo: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Proporcionar una descripción para los motores de búsqueda: <meta name="description" content="Una breve descripción de la página.">
Definir palabras clave para los motores de búsqueda: <meta name="keywords" content="HTML, CSS, JavaScript">
Establecer el autor de la página: <meta name="author" content="John Doe">
Controlar el comportamiento del almacenamiento en caché: <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

22. Explique la diferencia entre los atributos `id` y `class` en HTML.

Los atributos id y class en HTML se utilizan para aplicar estilos y comportamiento a los elementos HTML, pero difieren en su propósito y cómo se utilizan.

Los atributos id son identificadores únicos. Cada valor id solo se puede usar una vez por documento HTML. Por lo general, se utilizan para apuntar a un elemento específico e individual para darle estilo o scripting. Los atributos class, por otro lado, se pueden usar varias veces en diferentes elementos a lo largo del documento HTML. Se utilizan para agrupar elementos para que los mismos estilos o scripts se puedan aplicar a múltiples elementos. También puede aplicar múltiples clases a un solo elemento. Aquí hay un ejemplo:

<div id="uniqueElement" class="commonStyle specialStyle">Esto es un div.</div> <p class="commonStyle">Esto es un párrafo.</p>

En este ejemplo, el div tiene un id único y dos clases. El párrafo comparte una clase común con el div.

23. ¿Cómo crearías un formulario simple con un campo de entrada de texto y un botón de enviar?

Para crear un formulario simple con un campo de entrada de texto y un botón de enviar usando HTML, usarías el elemento <form> junto con elementos <input> para el campo de texto y el botón de enviar.

Aquí está el código HTML básico:

<form> <label for="name">Ingrese su nombre:</label><br> <input type="text" id="name" name="name"><br><br> <input type="submit" value="Enviar"> </form>

Este código crea un formulario con una etiqueta, un campo de entrada de texto donde los usuarios pueden ingresar su nombre y un botón de enviar. El atributo type="text" especifica que es un campo de entrada de texto, y type="submit" indica que es un botón de enviar. Cuando se hace clic en el botón de enviar, los datos del formulario se enviarán al servidor (el atributo action de la etiqueta <form> especifica dónde se envían los datos, pero no se especifica aquí). También se proporciona el id, que se puede usar para identificar de forma única el elemento, que luego se puede usar para dar estilo usando css o seleccionar elementos usando javascript.

24. ¿Cuáles son algunas etiquetas semánticas HTML comunes y por qué son importantes para la accesibilidad y el SEO?

Las etiquetas semánticas HTML comunes incluyen: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <nav>, <section>, y <summary>. Estas etiquetas le dan significado a la estructura de una página web, en lugar de solo dictar cómo debe verse el contenido (que es el papel del CSS).

Son importantes para la accesibilidad porque los lectores de pantalla y otras tecnologías de asistencia pueden usar estas etiquetas para comprender mejor el contenido y la estructura de una página, lo que permite a los usuarios con discapacidades navegar y comprender la información de manera más efectiva. Para el SEO, los motores de búsqueda utilizan etiquetas semánticas para comprender el contenido y el contexto de una página web, lo que les ayuda a clasificar la página con mayor precisión en los resultados de búsqueda. El uso de estas etiquetas mejora el SEO de un sitio al facilitar que los motores de búsqueda rastreen e indexen el contenido, lo que lleva a una mejor visibilidad.

25. Si tienes texto en un párrafo, ¿cómo te aseguras de que aparezca en una nueva línea?

Para asegurar que el texto aparezca en una nueva línea en Markdown, puedes usar varios métodos.

Salto de línea: Agrega dos espacios al final de la línea, seguido de un carácter de nueva línea (presionando Enter). Esta es la forma estándar.
Etiqueta de salto de línea HTML: Puedes usar la etiqueta de salto de línea HTML <br> para forzar un salto de línea.
Párrafo: Separa el texto en diferentes párrafos dejando una línea en blanco entre ellos. Cada párrafo comenzará automáticamente en una nueva línea.

26. ¿Cómo incrustas un video de YouTube en una página HTML?

Para incrustar un video de YouTube en una página HTML, generalmente usas una etiqueta <iframe>. Primero, ve al video de YouTube que deseas incrustar, haz clic en el botón 'Compartir', luego selecciona 'Incrustar'. YouTube te proporcionará un fragmento de HTML similar a este:

Simplemente copia y pega este código <iframe> en tu HTML donde quieras que aparezca el video. Puedes ajustar los atributos width y height para controlar el tamaño del video en tu página. Reemplaza VIDEO_ID con el ID real.

Preguntas de la entrevista de HTML para principiantes

1. ¿Qué significa HTML?

HTML significa Lenguaje de Marcado de Hipertexto (HyperText Markup Language). Es el lenguaje de marcado estándar para crear páginas web. HTML proporciona la estructura de una página web, definiendo elementos como encabezados, párrafos, imágenes y enlaces utilizando etiquetas.

2. ¿Puedes explicar la estructura básica de un documento HTML? Es decir, ¿cuáles son las partes importantes?

La estructura básica de un documento HTML gira en torno a un elemento raíz <html>, que contiene dos partes principales: el <head> y el <body>. El <head> contiene metadatos sobre el documento, como el título (mostrado en la pestaña del navegador utilizando la etiqueta <title>), el conjunto de caracteres (<meta charset="UTF-8">), los enlaces a las hojas de estilo (<link rel="stylesheet" href="style.css">) y los scripts. Esta información no se muestra directamente en la página en sí.

El <body> contiene el contenido real de la página web: texto, imágenes, enlaces y otros elementos que los usuarios ven e interactúan. Los elementos comunes dentro del cuerpo incluyen encabezados (<h1> a <h6>), párrafos (<p>), listas (<ul>, <ol>, <li>), imágenes (<img>) y divisiones o contenedores (<div>). Estos elementos se estilizan y se organizan utilizando CSS (enlazado en el <head>).

3. ¿Qué son las etiquetas HTML? Dame un par de ejemplos.

Las etiquetas HTML son los bloques de construcción fundamentales de los documentos HTML. Son palabras clave encerradas entre corchetes angulares (< >) que definen cómo los navegadores web deben formatear y mostrar el contenido. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (por ejemplo, <html>) y una etiqueta de cierre (por ejemplo, </html>), con el contenido colocado entre ellas.

Los ejemplos incluyen:

<html>: Define la raíz de un documento HTML.
<head>: Contiene metadatos sobre el documento HTML, como el título y el conjunto de caracteres.
<body>: Contiene el contenido visible del documento HTML.
<p>: Define un párrafo.
<a>: Define un hipervínculo.

4. ¿Cuál es la diferencia entre las etiquetas de apertura y cierre?

En los lenguajes de marcado como HTML y XML, las etiquetas se utilizan para definir elementos. Una etiqueta de apertura marca el comienzo de un elemento, mientras que una etiqueta de cierre marca el final.

La principal diferencia es la barra diagonal (/). Las etiquetas de apertura no tienen barra diagonal (por ejemplo, <div>), mientras que las etiquetas de cierre incluyen una barra diagonal después del corchete angular de apertura (por ejemplo, </div>). Sin ambas, el navegador o el analizador no pueden interpretar correctamente la estructura y el contenido del documento.

5. ¿Cuál es la etiqueta para hacer un párrafo?

La etiqueta para hacer un párrafo en HTML es <p>.

Por ejemplo:

<p>Este es un párrafo de texto.</p>

6. ¿Cómo se pone algo en negrita en HTML?

En HTML, puedes poner texto en negrita utilizando algunos métodos diferentes:

La etiqueta <strong>: Esta etiqueta representa semánticamente texto importante, y los navegadores normalmente lo renderizan en negrita. <strong>¡Este texto es importante!</strong>
La etiqueta <b>: Esta etiqueta representa texto que debe ser estilísticamente en negrita, sin ninguna importancia adicional. <b>Este texto está en negrita.</b>
CSS: También puede usar la propiedad CSS font-weight para poner texto en negrita. Este enfoque generalmente se prefiere para fines de estilo.

<p style="font-weight: bold;">Este texto está en negrita usando CSS.</p>

7. ¿Cómo se crea un enlace a otro sitio web?

Para crear un enlace a otro sitio web en Markdown, se usa la siguiente sintaxis: [Texto del enlace](URL). Por ejemplo, para crear un enlace a Google, se escribiría [Google](https://www.google.com). Esto se renderizará como un enlace en el que se puede hacer clic que muestra el texto "Google" y lleva al usuario a la página de inicio de Google cuando se hace clic.

También puede agregar un atributo de título al enlace, que se mostrará como una información sobre herramientas cuando el usuario se desplace sobre el enlace: [Texto del enlace](URL "Título"). Por ejemplo: [Google](https://www.google.com "Página de inicio de Google").

8. ¿Qué es una etiqueta de imagen y cómo se usa para mostrar una imagen?

Una etiqueta de imagen, <img>, es un elemento HTML que se usa para incrustar una imagen en una página web. Es una etiqueta de cierre automático, lo que significa que no requiere una etiqueta de cierre como </img>.

Para mostrar una imagen, se utiliza la etiqueta <img> con el atributo src, que especifica la URL o la ruta al archivo de imagen. Por ejemplo: <img src="imagen.jpg" alt="Mi Imagen">. El atributo alt proporciona texto alternativo si la imagen no se puede mostrar.

9. ¿Qué son los encabezados en HTML? ¿Cuántos niveles hay?

Los encabezados en HTML se utilizan para definir la estructura y jerarquía del contenido en una página web. Van desde <h1> hasta <h6>, siendo <h1> el encabezado más importante o de nivel superior y <h6> el menos importante.

Hay seis niveles de encabezados en HTML: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Cada nivel de encabezado representa un nivel diferente de importancia, lo que permite una organización lógica del contenido.

10. ¿Qué es un atributo HTML? Dé un ejemplo.

Un atributo HTML proporciona información adicional sobre un elemento HTML. Los atributos modifican o configuran elementos, controlando su comportamiento o apariencia. Siempre se especifican en la etiqueta de inicio de un elemento y generalmente consisten en un nombre y un valor, separados por un signo igual (=). El valor se encierra entre comillas dobles (aunque las comillas simples también son aceptables en algunos casos).

11. ¿Cómo se añade un comentario a tu código HTML?

Para añadir un comentario en HTML, se utiliza la siguiente sintaxis:

Cualquier cosa que se coloque entre  será ignorada por el navegador y no se mostrará en la página web. Los comentarios son útiles para explicar secciones de código, añadir notas o deshabilitar temporalmente el código durante el desarrollo.

12. ¿Cuál es la diferencia entre una lista con números y una lista con viñetas?

Una lista con números implica un orden o secuencia, donde los elementos tienen una relación o prioridad específica. Ejemplos incluyen pasos en un proceso o elementos clasificados por importancia.

Por el contrario, una lista con viñetas (o cualquier otro marcador desordenado como guiones o asteriscos) simplemente denota una colección de elementos relacionados sin ningún orden inherente. Los elementos tienen el mismo peso y su secuencia no es significativa.

13. ¿Qué etiqueta se utiliza para crear una tabla?

La etiqueta <table> se utiliza para crear una tabla en HTML.

Define la estructura de la tabla, y otras etiquetas como <tr> (fila de la tabla), <th> (encabezado de la tabla) y <td> (celda de datos de la tabla) se utilizan dentro de la etiqueta <table> para crear las filas, los encabezados y las celdas de datos de la tabla.

14. ¿Para qué se utiliza el atributo `src` en la etiqueta `<img>`?

El atributo src en la etiqueta <img> especifica la URL de la imagen que deseas incrustar en el documento HTML. Le dice al navegador dónde encontrar el archivo de imagen para que se pueda mostrar en la página web.

¿Para qué se utiliza el atributo `alt` en la etiqueta `<img>`?

El atributo alt en la etiqueta <img> proporciona texto alternativo para una imagen si la imagen no se puede mostrar. Esto es crucial para la accesibilidad, ya que los lectores de pantalla utilizan el texto alt para describir la imagen a los usuarios con discapacidad visual.

También sirve como marcador de posición si la imagen no se carga debido a enlaces rotos, problemas de red o formatos de archivo incorrectos. Los motores de búsqueda también utilizan el texto alt para comprender el contenido de la imagen, mejorando el SEO.

¿Cuál es el propósito del elemento `<head>` en un documento HTML?

El elemento <head> en un documento HTML sirve como contenedor de metadatos sobre el documento HTML. Estos metadatos no se muestran en la propia página web, pero son cruciales para los navegadores, los motores de búsqueda y otros servicios web.

Normalmente incluye cosas como el título del documento (que aparece en la pestaña del navegador), la declaración del conjunto de caracteres, los enlaces a las hojas de estilo CSS, los enlaces a los favicons, las metadescripciones para el SEO y JavaScript. Proporciona información esencial sobre la naturaleza del documento y cómo debe procesarse.

¿Cuál es el propósito del elemento `<body>` en un documento HTML?

El elemento <body> en un documento HTML define el contenido del documento. Contiene todos los elementos visibles, como texto, imágenes, enlaces, listas, tablas y más, que los usuarios verán en la página web. Esencialmente, es el contenedor de todo lo que compone el contenido real de la página web.

La etiqueta <body> sigue a la etiqueta <head> y su contenido es lo que el navegador renderiza. Atributos como onload y onunload se pueden establecer en el elemento <body> para activar código Javascript al abrir o salir de la página web.

18. ¿Cómo se enlaza un archivo CSS externo a tu documento HTML?

Para enlazar un archivo CSS externo a un documento HTML, utiliza el elemento <link> dentro de la sección <head> de tu archivo HTML.

Específicamente, el atributo rel debe establecerse en "stylesheet", el atributo type en "text/css" y el atributo href en la ruta de tu archivo CSS. Aquí hay un ejemplo:

19. Explica la diferencia entre elementos de nivel de bloque y elementos en línea.

Los elementos de nivel de bloque, como <div>, <p>, <h1>-<h6> y <ul>/<ol>/<li>, ocupan todo el ancho disponible y siempre comienzan en una nueva línea. Crean un bloque visual en la página. Puedes establecer propiedades de ancho y altura en ellos.

Los elementos en línea, como <span>, <a>, <img>, <strong> y <em>, solo ocupan el ancho necesario para contener su contenido. Fluyen dentro del texto circundante y no comienzan en una nueva línea. Las propiedades de ancho y altura generalmente no se aplican. Los elementos en línea se utilizan a menudo para estilizar o anotar partes de un texto sin interrumpir el flujo general del párrafo.

20. ¿Cuáles son algunos elementos comunes de formulario HTML?

Los elementos comunes de formulario HTML permiten a los usuarios ingresar y enviar datos. Algunos elementos de uso frecuente incluyen: <input> (para campos de texto, contraseñas, casillas de verificación, botones de radio y cargas de archivos), <textarea> (para entrada de texto de varias líneas), <select> (para listas desplegables), <button> (para enviar o activar acciones) y <label> (para asociar una etiqueta de texto con un elemento de entrada).

Específicamente, el atributo type del elemento <input> dicta su comportamiento, como type="text", type="email", type="password", type="radio", type="checkbox", type="file" y type="submit". El elemento <form> en sí es el contenedor de estos elementos de entrada, que define a dónde se enviarán los datos al enviarse.

21. ¿Cómo se crea un campo de entrada de texto simple en HTML?

Para crear un campo de entrada de texto simple en HTML, se usa la etiqueta <input> con el atributo type establecido en "text".

Atributos como id y name son útiles para hacer referencia al campo de entrada en JavaScript o al enviar un formulario. También puede agregar atributos como placeholder para dar al usuario una pista sobre la entrada esperada.

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

La etiqueta <meta> proporciona metadatos sobre el documento HTML. Estos metadatos no se muestran en la página en sí, sino que son legibles por máquina.

Se utiliza para diversos propósitos, incluyendo: especificar la codificación de caracteres, la descripción de la página, palabras clave, autor, la configuración de la ventana gráfica para diseño adaptable y otros datos que los motores de búsqueda y navegadores pueden usar para manejar o mostrar la página correctamente. Por ejemplo:

<meta charset="UTF-8"> especifica la codificación de caracteres.
<meta name="description" content="Una descripción de la página."> proporciona un resumen para los motores de búsqueda.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> configura la ventana gráfica para diseño adaptable.

23. ¿Cómo se puede poner una palabra o frase en cursiva en HTML?

En HTML, se puede poner una palabra o frase en cursiva usando la etiqueta <em> (que significa énfasis) o la etiqueta <i> (que es puramente de presentación y significa cursiva). Mientras que <i> simplemente renderiza el texto en cursiva, <em> está destinado a indicar énfasis semántico. Visualmente, ambos a menudo se renderizan como cursiva en un navegador, pero los lectores de pantalla y otras tecnologías de asistencia pueden interpretar <em> de manera diferente.

Por ejemplo:

<em>Este texto está enfatizado.</em>

<i>Este texto está en cursiva.</i>

24. ¿Cuál es el propósito de la declaración `<!DOCTYPE html>`?

La declaración <!DOCTYPE html> es una instrucción para el navegador web sobre la versión HTML utilizada para escribir la página. Le dice al navegador cómo renderizar la página correctamente, asegurando que se adhiere al estándar HTML especificado. Al incluir esta declaración, estás ayudando al navegador a evitar el modo quirks y a usar el modo estándar, lo que lleva a una renderización más consistente y predecible en diferentes navegadores.

Esencialmente, es una señal de que has escrito HTML adecuado y que el navegador debe interpretarlo en consecuencia. Si bien técnicamente no es una etiqueta HTML, su presencia es crucial para garantizar la mejor experiencia de usuario posible y mantener la compatibilidad.

25. ¿Puedes describir qué son las entidades HTML y por qué son útiles?

Las entidades HTML son secuencias de caracteres especiales que representan caracteres que están reservados en HTML o que no se pueden escribir fácilmente en un teclado estándar. Comienzan con una ampersand (&) y terminan con un punto y coma (;). Son útiles porque te permiten mostrar caracteres que de otro modo podrían interpretarse como código HTML o simplemente no están disponibles en el conjunto de caracteres.

Por ejemplo:

< representa < (signo menor que)
> representa > (signo mayor que)
& representa & (ampersand)
" representa " (comillas dobles)
' representa ' (apóstrofo/comilla simple)
  representa un espacio de no separación

Preguntas de la entrevista intermedia de HTML

1. Explica el concepto de HTML semántico y por qué es importante para la accesibilidad web y el SEO.

HTML semántico se refiere al uso de elementos HTML para transmitir el significado o propósito del contenido que encierran, en lugar de solo su apariencia. Por ejemplo, usar elementos como <article>, <nav>, <aside>, <header> y <footer> para estructurar una página en lugar de solo etiquetas <div>. HTML semántico es crucial para la accesibilidad web porque los lectores de pantalla y otras tecnologías de asistencia se basan en estos elementos semánticos para comprender la estructura y el significado del contenido, lo que les permite brindar una mejor experiencia de usuario a las personas con discapacidades.

Para SEO, los motores de búsqueda utilizan HTML semántico para comprender mejor el contexto y la relevancia de las páginas web. Al usar elementos semánticos, proporciona a los motores de búsqueda señales claras sobre el contenido, lo que puede mejorar la clasificación de su sitio web en los resultados de búsqueda. El código semántico también tiende a ser más limpio y más fácil de mantener, lo que contribuye a la calidad general del sitio web, lo que los motores de búsqueda favorecen.

2. ¿Cómo manejan los formularios HTML los diferentes tipos de validación de entrada (por ejemplo, correo electrónico, número, campos obligatorios)? ¿Puede proporcionar ejemplos?

Los formularios HTML manejan la validación de entrada a través de varios atributos y tipos de entrada. Por ejemplo, type="email" valida automáticamente la entrada para un formato de correo electrónico válido. type="number" restringe la entrada a valores numéricos. El atributo required asegura que un campo no se pueda enviar vacío. Estas validaciones son principalmente del lado del cliente, lo que proporciona retroalimentación inmediata al usuario.

Aquí hay algunos ejemplos:

Correo electrónico: <input type="email" name="email" required>
Número: <input type="number" name="cantidad" min="1" max="5">
Obligatorio: <input type="text" name="nombre_de_usuario" required>
Patrón: <input type="text" name="código_de_país" pattern="[A-Za-z]{3}" title="Código de país de tres letras">

Si bien HTML5 proporciona validación básica, es importante complementarla con la validación del lado del servidor para la seguridad y la integridad de los datos.

3. Describe la diferencia entre los elementos `<div>` y `<section>`. ¿Cuándo usarías uno en lugar del otro?

Tanto <div> como <section> son elementos de nivel de bloque utilizados para agrupar contenido, pero difieren semánticamente. <div> es un contenedor genérico sin significado semántico. Se utiliza únicamente para fines de estilo o scripting cuando ningún otro elemento más específico es adecuado.

<section>, por otro lado, representa una agrupación temática de contenido, típicamente con un encabezado. Usa <section> cuando el contenido forma una parte distinta de un documento, como un capítulo, una pestaña en una interfaz con pestañas o un área distinta de una página. Usarías un <div> si solo necesitas un contenedor para aplicar estilos o ejecutar JavaScript, y un <section> si la agrupación de contenido tiene un significado semántico dentro de la estructura del documento.

4. ¿Cuáles son las ventajas de usar etiquetas semánticas HTML5 como `<article>`, `<aside>`, `<nav>` y `<footer>`?

Las etiquetas semánticas de HTML5 ofrecen varias ventajas sobre el uso de elementos <div> genéricos. Mejoran la legibilidad y el mantenimiento del código porque las propias etiquetas describen el propósito del contenido (por ejemplo, <nav> indica claramente una sección de navegación). Esto también mejora la accesibilidad, ya que los lectores de pantalla pueden usar estas etiquetas para comprender y navegar mejor la estructura de la página, brindando una mejor experiencia de usuario para personas con discapacidades.

Además, las etiquetas semánticas benefician el SEO. Los motores de búsqueda pueden comprender mejor el contenido y su relevancia, lo que podría mejorar las clasificaciones de búsqueda. También pueden proporcionar estructura al estilo css. Por ejemplo:

<article> <header> <h1>Título del artículo</h1> </header> <p>Contenido del artículo...</p> <footer> <p>Fecha de publicación</p> </footer> </article>

5. ¿Cómo se puede incrustar audio y video en HTML, y cuáles son algunas consideraciones para la compatibilidad entre navegadores?

Puede incrustar audio y video en HTML usando los elementos <audio> y <video>, respectivamente. Para video, la estructura básica es:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tu navegador no soporta la etiqueta de video. </video>

Similar se usa para audio. Las consideraciones clave para la compatibilidad entre navegadores incluyen proporcionar múltiples formatos de origen (como MP4, WebM y Ogg para video; MP3, WAV y Ogg para audio) dentro de los elementos <source> para garantizar que al menos un formato sea compatible con el navegador del usuario. El uso del atributo controls habilita los controles de reproducción básicos. Se pueden usar polyfills o bibliotecas de JavaScript para navegadores más antiguos que carecen de soporte nativo. Además, la especificación de atributos type para las fuentes ayuda al navegador a identificar y seleccionar rápidamente formatos compatibles.

6. Explica el propósito del elemento `\`<canvas>`` y cómo se puede utilizar para dibujar gráficos utilizando JavaScript.

El elemento <canvas> en HTML actúa como un contenedor para contenido gráfico, que se puede dibujar usando JavaScript. Proporciona una superficie de dibujo (un mapa de bits) donde se pueden renderizar formas, imágenes, texto y animaciones. El canvas en sí mismo está inicialmente en blanco hasta que se utiliza JavaScript para definir y renderizar gráficos en él.

Para dibujar en un canvas, primero se obtiene un contexto de renderizado 2D usando canvas.getContext('2d'). Este objeto de contexto proporciona métodos para dibujar formas (rectángulos, círculos, trayectorias), aplicar estilos (colores, gradientes) y manipular el canvas. Por ejemplo, ctx.fillRect(x, y, ancho, altura) dibuja un rectángulo relleno. ctx.drawImage(imagen, x, y) dibuja una imagen en el canvas. El elemento canvas combinado con JavaScript proporciona potentes capacidades gráficas del lado del cliente.

7. ¿Qué son los Web Workers en HTML5 y cómo pueden mejorar el rendimiento de las aplicaciones web?

Los Web Workers en HTML5 permiten ejecutar scripts en segundo plano, independientemente del hilo principal de una página web. Esto evita cuellos de botella en el rendimiento causados por tareas de larga duración o computacionalmente intensivas que, de otro modo, bloquearían la interfaz de usuario.

Al usar Web Workers, puede mejorar significativamente el rendimiento de las aplicaciones web al:

Descargar tareas como procesamiento de imágenes, análisis de datos o cálculos complejos a hilos en segundo plano.
Mantener el hilo principal receptivo y asegurar una experiencia de usuario fluida, incluso durante el procesamiento intensivo.
Utilizar los procesadores de múltiples núcleos de manera más eficiente.

8. ¿Cómo se gestionan las diferentes codificaciones de caracteres en HTML para asegurar la correcta visualización del texto?

Para gestionar diferentes codificaciones de caracteres en HTML y asegurar la correcta visualización del texto, el paso más crucial es declarar la codificación de caracteres correcta en la sección <head> de su documento HTML. Esto se hace típicamente usando la etiqueta <meta charset="UTF-8">, que especifica la codificación UTF-8. UTF-8 es una codificación ampliamente soportada que puede representar caracteres de la mayoría de los idiomas.

Si está trabajando con contenido que no es UTF-8 (aunque muy desaconsejado), debe asegurarse de que su editor de texto guarde el archivo en la codificación correcta. Además, si su página HTML se sirve desde un servidor, asegúrese de que el encabezado HTTP Content-Type también especifica el juego de caracteres correcto (por ejemplo, Content-Type: text/html; charset=ISO-8859-1). Si la codificación declarada no coincide con la codificación real del documento HTML, es posible que los caracteres no se representen correctamente, lo que resultará en una salida distorsionada o inesperada. Siempre verifique la configuración del servidor también.

9. ¿Para qué se utilizan los atributos `data-*`?

Los atributos data-* se utilizan para almacenar datos personalizados privados de la página o la aplicación. Permiten incrustar atributos de datos personalizados en cualquier elemento HTML.

JavaScript (o CSS) puede acceder a estos datos y utilizarlos para mejorar la experiencia del usuario, sin necesidad de búsquedas en la base de datos del lado del servidor ni procesamiento adicional. Se puede acceder a los datos utilizando element.dataset.propertyName en JavaScript (donde propertyName es la parte del nombre del atributo después de data-, convertida a camelCase).

10. Explique la diferencia entre cookies, sessionStorage y localStorage en el contexto del almacenamiento web HTML5.

Las cookies, sessionStorage y localStorage son todas tecnologías de almacenamiento web que se utilizan para almacenar datos en un navegador web, pero difieren en su alcance y persistencia.

Las cookies son pequeños archivos de texto que los sitios web almacenan en la computadora de un usuario para recordar información sobre ellos, como los detalles de inicio de sesión o las preferencias. Se puede acceder a ellos tanto por el servidor como por el JavaScript del lado del cliente. sessionStorage almacena datos solo durante la duración de una sesión del navegador (es decir, hasta que se cierra la pestaña o ventana del navegador). localStorage proporciona una forma de almacenar datos de forma persistente, lo que significa que los datos se almacenan sin fecha de caducidad y están disponibles en todas las sesiones del navegador hasta que se eliminan explícitamente. Se puede acceder a los datos de sessionStorage y localStorage solo desde el lado del cliente.

11. Describe cómo crear imágenes responsivas usando el elemento `<picture>` y el atributo `srcset`.

Para crear imágenes responsivas usando el elemento <picture>, se envuelven múltiples elementos <source> y un elemento <img> de respaldo. Cada elemento <source> enlaza a una fuente de imagen diferente usando el atributo srcset y especifica condiciones de medios usando el atributo media. El navegador luego selecciona la imagen más apropiada en función de la consulta de medios.

Por ejemplo:

El atributo srcset en la etiqueta <source> puede incluir múltiples URL de imágenes junto con sus anchos (por ejemplo, image-small.jpg 320w, image-large.jpg 640w). Esto permite que el navegador elija la mejor imagen en función de la resolución de la pantalla y la densidad de píxeles.

12. ¿Cómo se puede optimizar el código HTML para una carga de página más rápida y un mejor rendimiento?

Para optimizar HTML para una carga más rápida y un mejor rendimiento:

Minimizar el tamaño HTML: Eliminar comentarios, espacios en blanco y código redundante innecesarios. Utilizar herramientas de minificación HTML.
Optimizar el uso de imágenes: Usar formatos de imagen apropiados (WebP, JPEG, PNG), comprimir imágenes, usar imágenes responsivas (<picture> o atributo srcset en <img>), y cargar imágenes de forma perezosa.
Priorizar el contenido visible sin desplazamiento: Estructurar el HTML para que el contenido visible sin necesidad de desplazarse se cargue primero. Aplazar la carga de elementos no críticos.
Usar CSS y JavaScript eficientes: Externalizar archivos CSS y JavaScript, minificarlos y cargar JavaScript de forma asíncrona o aplazarlo hasta el final del cuerpo. Reducir la complejidad del CSS usando selectores eficientes.
Aprovechar el almacenamiento en caché del navegador: Configurar los encabezados de caché apropiados para permitir que los navegadores almacenen en caché los activos estáticos.
Reducir las manipulaciones del DOM: Minimizar el número de elementos del DOM y la frecuencia de las manipulaciones del DOM, ya que estas pueden ser operaciones costosas.
Usar una CDN: Servir activos estáticos desde una Red de Distribución de Contenido (CDN) para reducir la latencia.

13. Explicar el concepto de roles y atributos ARIA, y cómo mejoran la accesibilidad para usuarios con discapacidades.

Los roles y atributos ARIA (Aplicaciones de Internet Enriquecidas Accesibles) se utilizan para hacer que el contenido web sea más accesible para personas con discapacidades, especialmente cuando se utilizan tecnologías de asistencia como lectores de pantalla. Los roles definen el tipo de elemento (por ejemplo, role="button" para un botón personalizado hecho de un div), mientras que los atributos proporcionan información o estados adicionales (por ejemplo, aria-label="Cerrar" para una etiqueta descriptiva, aria-expanded="true" para indicar que un elemento está expandido).

Mejoran la accesibilidad proporcionando información semántica que no está inherentemente disponible en HTML estándar, particularmente para contenido dinámico y componentes de interfaz de usuario personalizados. Por ejemplo, si crea un menú desplegable personalizado usando elementos div, los roles y atributos ARIA pueden indicarle a un lector de pantalla que es un menú, qué hace cada elemento y si el menú está actualmente abierto o cerrado, lo que permite a los usuarios interactuar con él de manera efectiva.

14. ¿Cómo se crean formularios accesibles en HTML, incluyendo etiquetas, mensajes de error y navegación por teclado?

Para crear formularios accesibles, use elementos <label> asociados con las entradas del formulario a través del atributo for que coincida con el id de la entrada. Proporcione mensajes de error claros y concisos usando aria-live="assertive" para anunciar los errores inmediatamente a los lectores de pantalla, y muéstrelos visualmente cerca del campo de entrada correspondiente. Use elementos HTML semánticos y atributos ARIA (por ejemplo, aria-describedby) para mejorar la accesibilidad. Asegúrese de un orden de tabulación adecuado para la navegación por teclado usando el atributo tabindex si es necesario.

Considere el uso de bibliotecas de validación que proporcionen funciones de accesibilidad integradas. Por ejemplo, use JavaScript para mejorar las interacciones del formulario y el manejo de errores, pero asegúrese de que la funcionalidad principal siga siendo accesible incluso sin JavaScript habilitado. Ejemplo: <label for="name">Nombre:</label> <input type="text" id="name" name="name" aria-required="true">

15. ¿Cuáles son las diferentes formas de enlazar a recursos externos (por ejemplo, hojas de estilo, scripts) en HTML, y cuáles son sus mejores casos de uso?

HTML ofrece varias formas de enlazar a recursos externos:

<link>: Se utiliza principalmente para hojas de estilo (rel="stylesheet"). Se coloca en el <head> y es la forma estándar de incluir CSS. Se utiliza mejor cuando necesita aplicar estilos a su documento HTML. Ejemplo: <link rel="stylesheet" href="style.css">
<script>: Se utiliza para incluir archivos JavaScript. Se puede colocar en el <head> o antes de la etiqueta de cierre </body>. Colocarlo antes de la etiqueta de cierre </body> puede mejorar el rendimiento de carga de la página, ya que el análisis HTML no se bloquea mientras se descarga el script. Ejemplo: <script src="script.js"></script>
<img>: Se utiliza para incrustar imágenes. El atributo src apunta a la fuente de la imagen. Ejemplo: <img src="image.jpg" alt="Image">
<a> (etiqueta de anclaje): Crea hipervínculos a otras páginas web o recursos. Ejemplo: <a href="https://example.com">Visitar Ejemplo</a>
<object> y <embed>: Estos se pueden usar para incrustar varios tipos de contenido externo, como películas Flash, archivos PDF u otros medios, pero se usan con menos frecuencia que <script> y <link> para recursos comunes. Son útiles cuando se necesita incrustar tipos de contenido muy específicos con complementos especializados. <object data="file.pdf" type="application/pdf"></object>

16. Describe el propósito de las etiquetas `<meta>` en la sección `<head>` de un documento HTML y su impacto en el SEO y el comportamiento del navegador.

Las etiquetas <meta> en la sección <head> de un documento HTML proporcionan metadatos sobre el documento HTML. Estos datos no se muestran directamente en la página, sino que son utilizados por los navegadores, los motores de búsqueda y otros servicios web. Definen cosas como el conjunto de caracteres, la descripción, las palabras clave, el autor, la configuración de la ventana gráfica y más.

Las etiquetas <meta> impactan significativamente en el SEO y el comportamiento del navegador. Para el SEO, la etiqueta description a menudo es utilizada por los motores de búsqueda para mostrar un fragmento de tu página en los resultados de búsqueda. Las keywords solían ser importantes, pero ahora tienen menos impacto. La etiqueta robots controla cómo los rastreadores de los motores de búsqueda indexan y siguen los enlaces en la página. Con respecto al comportamiento del navegador, la etiqueta viewport es crucial para el diseño adaptable, asegurando que la página se represente correctamente en diferentes tamaños de pantalla. La etiqueta charset especifica la codificación de caracteres para el documento, lo que ayuda al navegador a mostrar el texto correctamente.

17. ¿Cuál es el propósito del atributo `alt` en la etiqueta `<img>` y cómo contribuye a la accesibilidad?

El atributo alt en la etiqueta <img> proporciona texto alternativo para una imagen si la imagen no se puede mostrar. Esto podría deberse a un enlace roto, a que el usuario tenga las imágenes deshabilitadas o a que el usuario utilice un lector de pantalla.

Para la accesibilidad, el atributo alt es crucial. Los lectores de pantalla utilizan el texto alt para describir la imagen a los usuarios con discapacidad visual, permitiéndoles comprender el contenido y el contexto de la imagen. Un texto alt bien escrito proporciona una descripción significativa del propósito y el contenido de la imagen dentro del contexto de la página. Un texto alt faltante o mal escrito puede obstaculizar significativamente la comprensión y la navegación del sitio web por parte del usuario.

18. Explique el concepto de componentes web y cómo se pueden usar para crear elementos HTML reutilizables.

Los componentes web son un conjunto de estándares web que le permiten crear elementos HTML personalizados y reutilizables con estilo y comportamiento encapsulados. Son agnósticos a la plataforma, lo que significa que funcionan en cualquier navegador moderno y se pueden usar con cualquier framework o biblioteca de JavaScript, o incluso sin uno. Los conceptos principales son:

Elementos personalizados: Define tus propias etiquetas HTML. Registras estas etiquetas usando JavaScript, asociándolas con una clase que gestiona su comportamiento.
Shadow DOM: Proporciona encapsulación al ocultar la estructura DOM interna, el estilo y el comportamiento de un componente del resto del documento. Esto evita conflictos y asegura que el componente funcione como se espera, independientemente del entorno circundante.
Plantillas HTML: Los elementos <template> y <slot> proporcionan una forma de definir estructuras HTML reutilizables que se pueden clonar e insertar en el DOM. <slot> permite la inyección dinámica de contenido dentro de un elemento personalizado.

19. ¿Cómo se manejan los problemas de intercambio de recursos de origen cruzado (CORS) al incrustar recursos de diferentes dominios en HTML?

Los problemas de CORS surgen cuando una página web de un origen intenta acceder a un recurso de un origen diferente. Los navegadores bloquean estas solicitudes de forma predeterminada por razones de seguridad. Para manejar CORS, el servidor que aloja el recurso necesita incluir encabezados HTTP específicos en su respuesta. El encabezado más común es Access-Control-Allow-Origin. Establecerlo en * permite solicitudes de cualquier origen, pero generalmente es mejor especificar el(los) origen(es) exacto(s) que están permitidos. Por ejemplo, Access-Control-Allow-Origin: https://example.com permitiría solicitudes solo desde example.com.

Otros encabezados relacionados incluyen Access-Control-Allow-Methods (especifica los métodos HTTP permitidos como GET, POST), Access-Control-Allow-Headers (enumera los encabezados de solicitud permitidos) y Access-Control-Allow-Credentials (indica si se debe incluir información de cookies y autenticación). Si no controla el servidor, a veces puede usar un servidor proxy en su propio dominio para obtener el recurso y luego servirlo a su página. Esto omite CORS porque la solicitud parece provenir del mismo origen.

20. ¿Cuál es el propósito del elemento `<template>`, y cómo se puede usar con JavaScript para crear contenido dinámico?

El elemento <template> en HTML sirve como un contenedor para guardar contenido HTML que no se renderiza inmediatamente cuando se carga la página. Su propósito principal es definir fragmentos reutilizables de HTML que se pueden clonar e insertar en el DOM usando JavaScript, lo que permite la generación de contenido dinámico. El contenido dentro de un <template> es inerte hasta que se activa explícitamente mediante un script. Esto lo hace adecuado para plantillas del lado del cliente, lo que le permite definir una estructura una vez y llenarla con datos variables dinámicamente.

Para usar <template> con JavaScript, primero selecciona el elemento template usando una consulta DOM. Luego, accedes a su contenido a través de la propiedad content, que devuelve un DocumentFragment. A continuación, puedes clonar el contenido del DocumentFragment usando cloneNode(true) para crear una copia, y finalmente insertar esta copia en el DOM usando métodos como appendChild o insertBefore. Por ejemplo:

const template = document.getElementById('my-template'); const clone = template.content.cloneNode(true); document.body.appendChild(clone);

21. ¿Cómo se usa HTML para crear tablas accesibles, asegurando que sean utilizables por lectores de pantalla y otras tecnologías de asistencia?

Para crear tablas HTML accesibles, usa elementos HTML semánticos y atributos ARIA. Usa los elementos <table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, y <td> apropiadamente para estructurar la tabla. Usa elementos <th> para los encabezados de columna y fila, y asócialos con las celdas de datos apropiadas usando el atributo scope (scope="col" para los encabezados de columna, scope="row" para los encabezados de fila). Para tablas complejas, usa el elemento <caption> para proporcionar una descripción del propósito de la tabla. Usa el atributo aria-describedby para vincular la tabla a una descripción más detallada en otra parte de la página. Evita usar tablas para fines de diseño; CSS debe usarse para eso.

Asegure un contraste suficiente entre los colores del texto y el fondo. Pruebe la tabla con un lector de pantalla como NVDA o VoiceOver para asegurarse de que se interpreta correctamente. Proporcione formas alternativas de acceder a los datos si la estructura de la tabla es inherentemente inaccesible para algunos usuarios (por ejemplo, una descarga CSV). Por ejemplo:

<table> <caption>Ahorros mensuales</caption> <thead> <tr> <th scope="col">Mes</th> <th scope="col">Ahorros</th> </tr> </thead> <tbody> <tr> <th scope="row">Enero</th> <td>$100</td> </tr> <tr> <th scope="row">Febrero</th> <td>$80</td> </tr> </tbody> </table>

Preguntas de entrevista HTML para experimentados

1. Explica el concepto de 'shadow DOM' y sus casos de uso en el desarrollo web.

Shadow DOM es un estándar web que proporciona encapsulación para los componentes web. Permite a los desarrolladores crear subárboles DOM aislados dentro de un elemento, lo que significa que los estilos y scripts definidos dentro del shadow DOM no se filtran y afectan al documento principal, y viceversa. Este aislamiento evita conflictos de nombres y facilita la construcción de componentes reutilizables.

Los casos de uso incluyen:

Estilo de componentes: Encapsular los estilos de los componentes para evitar conflictos con los estilos globales u otros componentes.
Desarrollo de widgets: Creación de widgets autónomos con su propia estructura y estilo internos.
Aislamiento de código de terceros: Incrustar código de terceros sin preocuparse de que interfiera con los estilos o scripts de su aplicación. Por ejemplo, considere esto:

<my-element> #shadow-root <style> p { color: blue; } </style> <p>Este párrafo es azul porque está dentro del shadow DOM.</p> </my-element> <p>Este párrafo no es azul, está en el light DOM.</p>

2. Describe las diferencias entre `localStorage`, `sessionStorage` y cookies, y cuándo usarías cada uno.

Las diferencias clave entre localStorage, sessionStorage y las cookies residen en su capacidad de almacenamiento, duración y accesibilidad.

localStorage: Ofrece la mayor capacidad de almacenamiento (alrededor de 5-10MB), persiste los datos indefinidamente (hasta que se eliminan explícitamente) y solo es accesible por el origen que los almacenó. Úselo para almacenar datos que deben persistir entre sesiones, como las preferencias del usuario o datos sin conexión.
sessionStorage: Tiene una capacidad de almacenamiento similar a localStorage, pero los datos solo duran la duración de la sesión del navegador (hasta que se cierra la pestaña o ventana del navegador). También está vinculado al origen. Ideal para almacenar datos temporales relacionados con una sesión específica, como datos de formulario o el contenido del carrito de compras antes de pagar.
Cookies: Tienen la menor capacidad de almacenamiento (alrededor de 4KB), pueden tener tiempos de caducidad configurables y pueden ser accedidas por el servidor y los scripts del lado del cliente. Las cookies se utilizan a menudo para administrar sesiones, rastrear la actividad del usuario y personalizar las experiencias del usuario. Por ejemplo, document.cookie = "nombre_de_usuario=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/"; establece una cookie.

3. ¿Qué son los componentes web y cómo contribuyen al HTML modular y reutilizable?

Los componentes web son un conjunto de estándares web que le permiten crear elementos HTML personalizados y reutilizables con estilo y comportamiento encapsulados. Contribuyen al HTML modular y reutilizable al permitir que los desarrolladores definan sus propias etiquetas HTML, extendiendo efectivamente el vocabulario HTML.

Esto se logra a través de varias tecnologías clave:

Custom Elements (Elementos personalizados): Definen nuevas etiquetas HTML y su lógica JavaScript asociada.
Shadow DOM (DOM Sombra): Encapsula la estructura interna, el estilo y el comportamiento de un componente, evitando conflictos con el resto de la página.
HTML Templates (Plantillas HTML): Proporcionan una forma de definir fragmentos de HTML reutilizables que se pueden clonar e insertar en el DOM.
ES Modules (Módulos ES): formato estándar para empaquetar código JavaScript para su reutilización.

Por ejemplo:

<my-component></my-component>

4. ¿Cómo optimizaría HTML para un mejor rendimiento de SEO?

Para optimizar HTML para un mejor SEO, concéntrese en HTML semántico, datos estructurados y elementos web esenciales. Use palabras clave relevantes en <title>, <meta description>, atributos alt para imágenes y etiquetas de encabezado (<h1> a <h6>).

Priorice la velocidad del sitio optimizando imágenes, minimizando HTML/CSS/JavaScript y aprovechando el almacenamiento en caché del navegador. Implemente el marcado de esquema utilizando JSON-LD para proporcionar a los motores de búsqueda contexto sobre su contenido. Asegúrese de la compatibilidad con dispositivos móviles con un diseño adaptable y una etiqueta meta viewport configurada correctamente. Mantenga la estructura de su sitio lógica utilizando etiquetas semánticas HTML5 apropiadas (<article>, <nav>, <aside>, <footer>).

5. Discuta las consideraciones de accesibilidad al construir formularios HTML.

Al construir formularios HTML, la accesibilidad es primordial. Es crucial usar elementos <label> asociados con sus respectivos elementos <input>, <textarea> o <select> usando el atributo for, que coincida con el id del control del formulario. Esto proporciona contexto para los usuarios de lectores de pantalla. Asegure un contraste de color suficiente entre el texto y el fondo. Proporcione instrucciones y mensajes de error claros y concisos, asociándolos con los campos de formulario relevantes usando aria-describedby. Use elementos HTML5 semánticos como <fieldset> y <legend> para agrupar los controles de formulario relacionados.

La accesibilidad del teclado también es vital. Asegúrese de que los elementos del formulario sean enfocables y que el orden de enfoque sea lógico. Use el atributo tabindex con moderación y solo cuando sea necesario para ajustar el orden de enfoque natural. Proporcione métodos de entrada alternativos para los usuarios que no pueden usar un mouse. Valide la entrada en el lado del servidor, no solo en el lado del cliente, y presente los errores de manera accesible. Considere usar atributos ARIA cuando sea necesario para proporcionar información semántica adicional, como aria-required para indicar campos obligatorios.

6. Explique el uso de los atributos ARIA y su papel en la mejora de la accesibilidad web.

Los atributos ARIA (Accessible Rich Internet Applications) son atributos HTML que definen formas de hacer que el contenido web y las aplicaciones web (especialmente aquellas desarrolladas con JavaScript) sean más accesibles para personas con discapacidades. Proporcionan un significado semántico a los elementos, lo que permite que las tecnologías de asistencia, como los lectores de pantalla, interpreten y transmitan correctamente la estructura, el comportamiento y el estado de los elementos de la interfaz de usuario. ARIA esencialmente cierra la brecha cuando los elementos HTML estándar carecen de la semántica necesaria para describir interacciones complejas o contenido dinámico.

Al usar atributos ARIA como aria-label, aria-describedby, aria-hidden, aria-live, y roles como role="button", role="navigation", o role="alert", los desarrolladores pueden proporcionar información crucial a las tecnologías de asistencia. Esto garantiza que los usuarios que dependen de estas tecnologías puedan entender e interactuar con el contenido web de manera efectiva. ARIA no cambia la apariencia visual de una página web, sino que estrictamente mejora su accesibilidad y comprensión semántica.

7. ¿Qué son microdatos, RDFa y JSON-LD, y cómo se utilizan para mejorar el contenido web semántico?

Microdatos, RDFa y JSON-LD son tecnologías web semánticas utilizadas para incrustar datos estructurados dentro del contenido HTML, lo que facilita que los motores de búsqueda, rastreadores web y otras aplicaciones entiendan y procesen la información en una página web. Añaden significado semántico al contenido, yendo más allá de la mera presentación.

Microdatos: Utiliza atributos HTML5 (itemscope, itemtype, itemprop) para definir elementos y sus propiedades directamente dentro del HTML. Es relativamente fácil de implementar debido a su estrecha integración con HTML, pero puede saturar el código HTML.
RDFa (Resource Description Framework en Atributos): Extiende HTML con atributos que corresponden a conceptos RDF, lo que permite expresar datos estructurados utilizando vocabularios como Schema.org. RDFa es más flexible y permite relaciones más complejas que Microdatos.
JSON-LD (JSON para Datos Vinculados): Utiliza un formato JSON para incrustar datos estructurados, ya sea directamente en una etiqueta <script> dentro del HTML o enlazado desde un archivo externo. JSON-LD es preferido por su clara separación de datos de la presentación y su facilidad de uso con JavaScript.

8. Describe diferentes motores de plantillas HTML y sus beneficios.

Los motores de plantillas HTML te permiten crear páginas HTML dinámicas al incrustar marcadores de posición o lógica dentro del código HTML. Algunas opciones populares incluyen: Handlebars.js: Plantillas simples, sin lógica. Los beneficios son su facilidad de uso y legibilidad. Pug (anteriormente Jade): Utiliza una sintaxis concisa y espacios en blanco para la estructura, lo que conduce a plantillas más limpias. Es beneficioso para los desarrolladores que prefieren la brevedad. Mustache: Similar a Handlebars, enfatizando las plantillas sin lógica. EJS (JavaScript incrustado): Permite incrustar JavaScript directamente dentro de HTML, proporcionando la máxima flexibilidad, pero potencialmente reduciendo la claridad del código. React JSX: Una extensión de sintaxis de Javascript que permite incrustar sintaxis similar a HTML dentro de Javascript.

9. ¿Cómo se puede mejorar el rendimiento de renderizado de una página HTML compleja?

Para mejorar el rendimiento de renderizado de una página HTML compleja, concéntrese en optimizar varias áreas clave. En primer lugar, minimizar las solicitudes HTTP combinando archivos CSS y JavaScript, utilizando sprites CSS y aprovechando el almacenamiento en caché del navegador. En segundo lugar, optimizar CSS evitando selectores complejos, usando reglas CSS eficientes (por ejemplo, la propiedad contain) y eliminando CSS no utilizado. En tercer lugar, optimizar JavaScript aplazando la carga de scripts no críticos (usando atributos async o defer), rebotando o limitando los manejadores de eventos y usando algoritmos eficientes. Finalmente, optimizar el DOM reduciendo su tamaño, evitando reflows y repaints innecesarios y utilizando técnicas como el DOM virtual (si se utiliza un framework como React). Comprimir imágenes y usar una Red de Distribución de Contenido (CDN) también puede mejorar significativamente los tiempos de carga de la página.

Específicamente, considera estos puntos:

Reducir el tamaño del DOM: Simplificar la estructura HTML.
Optimizar imágenes: Utilizar formatos apropiados (WebP), comprimirlas y usar imágenes responsivas (elemento <picture> o atributo srcset).
Carga diferida (Lazy loading): Cargar imágenes y otros recursos solo cuando sean visibles en la ventana gráfica.
División de código (Code splitting): Dividir los paquetes de JavaScript en fragmentos más pequeños.
Almacenamiento en caché del navegador (Browser caching): Aprovechar el almacenamiento en caché del navegador estableciendo encabezados HTTP apropiados.
Perfilado (Profiling): Utilizar las herramientas de desarrollo del navegador para identificar cuellos de botella de rendimiento.

10. Explica el uso de los service workers y su impacto en la experiencia del usuario.

Los service workers son archivos JavaScript que se ejecutan en segundo plano, separados de una página web. Actúan como un proxy entre el navegador web y la red, lo que permite funciones como el acceso sin conexión, las notificaciones push y la sincronización en segundo plano. Mejoran la experiencia del usuario al proporcionar tiempos de carga más rápidos, una mayor fiabilidad y funcionalidades atractivas.

Específicamente, los service workers interceptan las solicitudes de red, lo que les permite almacenar en caché los activos y servir contenido incluso cuando el usuario está desconectado. Esto mejora drásticamente el rendimiento percibido, haciendo que las aplicaciones web se sientan más receptivas y parecidas a las aplicaciones. Además, pueden entregar notificaciones push, lo que permite a los sitios web volver a interactuar con los usuarios incluso cuando el sitio no está abierto activamente. Esto se logra utilizando eventos como install, activate, fetch y push para administrar el ciclo de vida del service worker y manejar las solicitudes de red. Por ejemplo, el evento fetch permite interceptar solicitudes:

self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });

11. Discuta las implicaciones de seguridad del uso de iframes en HTML.

Los iframes pueden introducir varios riesgos de seguridad. Una preocupación importante es el clickjacking, donde un atacante superpone un iframe transparente encima de un sitio web legítimo, engañando a los usuarios para que hagan clic en algo diferente de lo que perciben. De manera similar, los iframes se pueden usar para ataques de scripting de sitios cruzados (XSS) si el contenido del iframe proviene de una fuente no confiable. Si la fuente del iframe tiene vulnerabilidades XSS, puede comprometer potencialmente toda la página.

Para mitigar estos riesgos, use el atributo sandbox para restringir las capacidades del iframe. Establecer encabezados Content-Security-Policy (CSP) apropiados también puede ayudar a evitar que se ejecuten scripts maliciosos dentro del iframe o la página principal. Siempre valide y sanitice cualquier dato que se pase entre el iframe y la página principal, especialmente cuando use postMessage para la comunicación. Recuerde incrustar solo contenido de fuentes confiables.

12. Describe el proceso de creación de imágenes responsivas utilizando el elemento `<picture>` y el atributo `srcset`.

El elemento <picture> ofrece una forma flexible de servir diferentes fuentes de imagen basadas en varios criterios, como el tamaño de la pantalla, la resolución o la compatibilidad con formatos. El proceso implica usar el elemento <picture> como contenedor, con uno o más elementos <source> dentro para definir diferentes opciones de imagen y un elemento <img> final para la reserva.

Cada elemento <source> utiliza el atributo srcset para especificar los archivos de imagen y sus correspondientes consultas de medios (usando el atributo media) o densidades de píxeles (usando descriptores w). Luego, el navegador selecciona la imagen más apropiada según los criterios definidos. El elemento <img> proporciona una imagen predeterminada si ninguno de los elementos <source> coincide o si el navegador no admite el elemento <picture>. Por ejemplo:

13. ¿Cómo se manejan las diferentes codificaciones de caracteres en HTML para evitar problemas de visualización?

Para manejar diferentes codificaciones de caracteres en HTML y evitar problemas de visualización, lo más importante es declarar la codificación de caracteres en la sección <head> de su documento HTML utilizando la etiqueta <meta>. Específicamente, use <meta charset="UTF-8">. UTF-8 es la codificación de caracteres más ampliamente compatible y puede representar casi cualquier carácter de cualquier idioma. Esto le indica al navegador cómo interpretar los bytes en su archivo HTML.

Si estás trabajando con datos externos (como de una base de datos o una API), asegúrate de que los datos también estén codificados en UTF-8 antes de mostrarlos en tu HTML. Si los datos están en una codificación diferente (por ejemplo, Latin-1 o ISO-8859-1), necesitarás convertirlos a UTF-8 antes de renderizarlos en el navegador utilizando las bibliotecas o funciones adecuadas en tu lenguaje de backend. Por ejemplo, en Python, podrías usar data.encode('utf-8').decode('latin-1') si los datos de origen están codificados en Latin-1.

14. Explica los beneficios y desventajas de usar preprocesadores HTML como Pug o Haml.

Los preprocesadores HTML como Pug (anteriormente Jade) y Haml ofrecen beneficios como una mayor legibilidad del código a través de una sintaxis concisa, una mejor mantenibilidad a través de características como variables, mixins (bloques de código reutilizables) y herencia de plantillas, y una mejor organización del código al promover la modularidad. También pueden reducir la duplicación de código, lo que lleva a archivos más pequeños y fáciles de administrar.

Sin embargo, los inconvenientes incluyen una curva de aprendizaje más pronunciada para los desarrolladores que no están familiarizados con la sintaxis específica, el paso de construcción adicional requerido para compilar el código del preprocesador en HTML, lo que puede aumentar los tiempos de construcción, y los posibles desafíos de depuración, ya que el navegador solo ve el HTML compilado, lo que dificulta rastrear los problemas hasta el código original del preprocesador. Usarlos también acopla estrechamente su proyecto a un preprocesador específico, lo que hace que las migraciones futuras sean más complejas. Por ejemplo:

div p Hola, mundo!

se convierte en

<div><p>Hola, mundo!</p></div>

15. ¿Cómo se puede integrar HTML con tecnologías de backend para crear páginas web dinámicas?

HTML se puede integrar con tecnologías de backend para crear páginas web dinámicas a través de varios mecanismos. El enfoque más común implica el uso de lenguajes de scripting del lado del servidor como Python, PHP, Node.js, Java o Ruby para procesar datos y generar contenido HTML dinámicamente. El backend procesa las solicitudes del usuario, interactúa con las bases de datos (si es necesario) y construye la respuesta HTML que se enviará al navegador del usuario. Los datos a menudo se pasan desde el backend a la plantilla HTML utilizando motores de plantillas. Por ejemplo, en Python con Flask:

from flask import Flask, render_template app = Flask(name) @app.route('/') def index(): name = "John Doe" return render_template('index.html', name=name)

En este ejemplo, la variable name se pasa a la plantilla index.html donde se puede usar para insertar dinámicamente el valor.

Además, tecnologías como AJAX (JavaScript asíncrono y XML) permiten actualizar partes de una página web sin requerir una recarga completa de la página. El código JavaScript que se ejecuta en el navegador puede hacer peticiones al backend y luego actualizar dinámicamente el contenido HTML basándose en los datos recibidos. Las API del backend, a menudo implementadas utilizando los principios RESTful, proporcionan puntos finales para que el código JavaScript interactúe.

16. Describe el uso de atributos de datos personalizados (data-*) y sus ventajas.

Los atributos de datos personalizados, con el prefijo data-, permiten almacenar información adicional directamente dentro de los elementos HTML. Luego, JavaScript puede acceder y utilizar estos datos para mejorar la interactividad o personalizar el comportamiento sin necesidad de depender de otros medios, como búsquedas del lado del servidor o nombres de clase no semánticos.

Las ventajas de usar atributos data-* incluyen:

Clara separación de preocupaciones: Mantiene los datos relacionados con la interfaz de usuario dentro del HTML, separado de la lógica de JavaScript.
Fácil acceso a través de JavaScript: element.dataset proporciona una forma sencilla de leer y modificar los datos. Por ejemplo:

const element = document.getElementById('myElement'); const value = element.dataset.myValue; // Accediendo a data-my-value element.dataset.myValue = 'new value'; // Estableciendo data-my-value

HTML semántico y válido: Los atributos personalizados son HTML5 válido, lo que evita problemas de validación. Esto mejora el mantenimiento.

17. ¿Cuáles son las diferentes formas de incrustar contenido multimedia (audio, video) en HTML, y cuál es la más adecuada para diferentes situaciones?

Hay varias formas de incrustar contenido multimedia en HTML: los elementos <embed>, <object> y <video>/<audio>. El enfoque moderno y preferido es usar los elementos <video> y <audio> porque son semánticamente correctos y proporcionan controles integrados y funciones de accesibilidad. Por ejemplo:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tu navegador no soporta la etiqueta de video. </video> <audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Tu navegador no soporta el elemento de audio. </audio>

<embed> y <object> son métodos más antiguos y generalmente se utilizan para contenido que las etiquetas <video> y <audio> no admiten de forma nativa o para compatibilidad con navegadores más antiguos. Sin embargo, la dependencia de complementos y recursos externos puede hacer que estos métodos sean menos fiables y menos seguros.

18. ¿Cómo se asegura la compatibilidad entre navegadores al escribir HTML?

Para asegurar la compatibilidad entre navegadores en HTML, me concentro en usar HTML, CSS y JavaScript válidos y estándar. Uso una declaración DOCTYPE para asegurar que los navegadores rendericen la página en modo estándar. También utilizo resets de CSS como Normalize.css para reducir las inconsistencias en el estilo predeterminado entre navegadores. Las pruebas exhaustivas en múltiples navegadores (Chrome, Firefox, Safari, Edge y potencialmente versiones más antiguas o navegadores menos populares como Opera) y dispositivos son cruciales, utilizando las herramientas de desarrollo del navegador para la depuración.

También uso prefijos de navegador con moderación y solo cuando es realmente necesario, ya que depender en gran medida de ellos puede generar problemas de mantenimiento. La detección de funciones con JavaScript (usando bibliotecas como Modernizr) ayuda a determinar si un navegador admite una función en particular, lo que me permite proporcionar soluciones alternativas para navegadores más antiguos. Evitar elementos y atributos HTML obsoletos y seguir los estándares W3C contribuye aún más a la compatibilidad. Finalmente, siempre valido mi código HTML y CSS usando validadores en línea para detectar cualquier error potencial que pueda causar problemas de representación en diferentes navegadores.

19. Explique el uso de WebSockets y eventos enviados por el servidor (SSE) en aplicaciones HTML.

WebSockets y Eventos Enviados por el Servidor (SSE) son mecanismos para habilitar la comunicación en tiempo real entre un servidor y una aplicación web, pero difieren en sus capacidades y casos de uso. WebSockets proporciona un canal de comunicación dúplex completo, lo que permite enviar datos en ambas direcciones simultáneamente. Esto los hace adecuados para aplicaciones que requieren comunicación bidireccional y de baja latencia, como aplicaciones de chat, juegos en línea y paneles de datos en tiempo real.

SSE, por otro lado, proporciona un canal de comunicación unidireccional, donde el servidor envía datos al cliente. SSE se basa en el protocolo HTTP y es más simple de implementar que WebSockets, ya que no requiere un protocolo personalizado. SSE es ideal para aplicaciones donde el servidor necesita transmitir actualizaciones al cliente, como feeds de redes sociales, actualizaciones de noticias o cotizaciones bursátiles. SSE maneja automáticamente la reconexión si la conexión se interrumpe, lo que no es compatible con WebSockets. Para usar SSE, el servidor envía datos con el Content-Type configurado en text/event-stream. Los clientes usan la API EventSource para escuchar las actualizaciones.

20. Discuta las ventajas y desventajas de usar un enfoque CSS-in-JS en comparación con los archivos CSS tradicionales en un proyecto HTML.

CSS-en-JS ofrece varias ventajas sobre el CSS tradicional. El alcance (scoping) a menudo se basa en componentes, lo que reduce los conflictos de nombres y la filtración de estilos no deseados. Permite el estilo dinámico basado en el estado y las props de JavaScript, mejorando la reutilización de componentes. La colocación de estilos con los componentes mejora el mantenimiento y la organización del código. Sin embargo, hay inconvenientes. Las soluciones CSS-en-JS a menudo introducen una sobrecarga de tiempo de ejecución, lo que podría afectar el rendimiento, especialmente en la carga inicial de la página. Pueden aumentar la complejidad de la depuración y el estilo debido a las capas de abstracción involucradas. Además, la sintaxis puede ser menos familiar que el CSS estándar, lo que requiere una curva de aprendizaje para los desarrolladores y potencialmente un bloqueo del proveedor.

21. ¿Cómo puedes validar el código HTML para asegurarte de que cumple con los estándares web?

Puedes validar el código HTML utilizando validadores en línea como el Servicio de Validación de Marcado W3C (validator.w3.org). Estas herramientas comprueban tu HTML contra los estándares web establecidos e identifican errores o advertencias.

Alternativamente, muchos editores de código e IDE ofrecen funciones o extensiones de validación HTML integradas. Estos a menudo señalan problemas en tiempo real mientras escribes código. Ejemplos incluyen el uso de VS Code con la extensión HTMLHint. El uso de estas herramientas durante el desarrollo ayuda a detectar errores de forma temprana.

22. Describe el proceso de creación de una plantilla de correo electrónico HTML que se represente correctamente en diferentes clientes de correo electrónico.

Crear plantillas de correo electrónico HTML que se representen consistentemente en varios clientes de correo electrónico requiere un enfoque específico debido al soporte limitado de CSS y las inconsistencias en la representación. La clave es utilizar diseños basados en tablas para la estructura, ya que muchos clientes de correo electrónico no admiten completamente las técnicas modernas de diseño CSS como flexbox o grid. El estilo CSS en línea es crucial porque algunos clientes de correo electrónico eliminan las etiquetas <style> o las hojas de estilo externas. Limite su CSS a lo que es ampliamente compatible (principalmente CSS1 y algunas propiedades CSS2), evitando selectores complejos o propiedades abreviadas. Pruebe a fondo su plantilla de correo electrónico utilizando herramientas de prueba de correo electrónico como Litmus o Email on Acid, que proporcionan vistas previas en diferentes clientes de correo electrónico y dispositivos.

Además, optimice las imágenes comprimiéndolas para reducir el tamaño del archivo y utilice texto alternativo para la accesibilidad y cuando las imágenes estén bloqueadas. Tenga en cuenta las diferencias en la representación de imágenes en los diferentes clientes. Evite el uso de imágenes de fondo, ya que el soporte es inconsistente. Incluya siempre una versión de texto plano de su correo electrónico para los clientes que no admiten HTML o para los usuarios que prefieren texto plano. Finalmente, considere usar un enfoque de diseño responsivo utilizando consultas de medios con moderación, ya que el soporte varía. Las pruebas siguen siendo primordiales para garantizar una experiencia consistente.

23. Explique el concepto de mejora progresiva y su importancia en el desarrollo web.

La mejora progresiva es una estrategia de desarrollo web que prioriza proporcionar un nivel básico de funcionalidad y contenido a todos los usuarios, independientemente de su navegador, dispositivo o condiciones de red. Luego, superpone características más avanzadas y mejoras visuales para los usuarios con navegadores y dispositivos más capaces. La idea central es garantizar la accesibilidad y la usabilidad para todos, al mismo tiempo que se aprovechan las últimas tecnologías cuando sea posible.

Su importancia radica en su enfoque para crear sitios web que funcionen para la audiencia más amplia posible. Evita el error de construir sitios que solo funcionan en los navegadores más nuevos o las conexiones más rápidas, asegurando una experiencia de usuario más inclusiva y robusta. Esto contrasta con la degradación elegante, donde se construye primero para la mejor experiencia y luego se intenta que funcione en sistemas más antiguos.

24. ¿Cómo se implementa la internacionalización (i18n) y la localización (l10n) en una aplicación HTML?

La internacionalización (i18n) implica diseñar una aplicación HTML para que sea adaptable a diferentes idiomas y regiones sin requerir cambios de ingeniería. La localización (l10n) es el proceso de adaptar la aplicación para una configuración regional específica, incluyendo la traducción de texto y el ajuste del formato.

En las aplicaciones HTML, i18n/l10n se puede implementar utilizando varias técnicas:

Paquetes de recursos/archivos JSON: Almacenar el texto traducido en archivos separados (por ejemplo, JSON) para cada idioma. La aplicación carga dinámicamente el archivo apropiado según la configuración regional del usuario.
Atributo lang de HTML: Utilizar el atributo lang en la etiqueta <html> para especificar el idioma del documento (<html lang="fr">). Esto ayuda a los navegadores y a las tecnologías de asistencia.
JavaScript: Utilizar JavaScript para reemplazar dinámicamente el texto en el HTML con cadenas traducidas de los paquetes de recursos. Bibliotecas como i18next y Polyglot.js simplifican este proceso.
CSS: Utilizar CSS para ajustar los estilos según el idioma, como familias de fuentes o dirección del texto (por ejemplo, para idiomas de derecha a izquierda).
Etiquetas Meta: Utilizar etiquetas meta para declarar el idioma de la página, aunque el atributo lang es más importante.

25. Discuta el uso de HTML en el desarrollo de aplicaciones móviles (por ejemplo, usando frameworks como Ionic o React Native).

HTML, junto con CSS y JavaScript, juega un papel importante en el desarrollo de aplicaciones móviles, particularmente a través de frameworks de aplicaciones híbridas como Ionic, React Native (con algunas salvedades) y Cordova. Estos frameworks permiten a los desarrolladores construir aplicaciones móviles multiplataforma usando tecnologías web. Ionic se basa en gran medida en HTML para estructurar la interfaz de usuario, utilizando componentes web que se estilizan con CSS y se potencian con JavaScript (típicamente Angular, React o Vue). Estos luego se envuelven en un contenedor nativo para ser desplegados en iOS y Android. Si bien React Native no usa directamente HTML, utiliza una sintaxis JSX que es similar a HTML, para definir componentes de la interfaz de usuario, estos componentes se traducen luego en elementos de la interfaz de usuario nativos, lo que resulta en un mejor rendimiento en comparación con soluciones como Ionic.

Esencialmente, el uso de HTML (o sintaxis similar a HTML) en estos frameworks permite a los desarrolladores web aprovechar sus habilidades existentes para crear aplicaciones móviles, promoviendo la reutilización del código y ciclos de desarrollo más rápidos. La principal ventaja es escribir una vez, ejecutar en cualquier lugar, pero los desarrolladores deben ser conscientes de las limitaciones de rendimiento en comparación con las aplicaciones verdaderamente nativas, especialmente al elegir tecnologías como Ionic.

26. Explique los beneficios de usar una arquitectura basada en componentes para construir interfaces HTML.

La arquitectura basada en componentes promueve la reutilización, haciendo que el desarrollo sea más rápido. Los componentes pueden usarse en diferentes partes de la aplicación, reduciendo la duplicación de código. Esta arquitectura también mejora el mantenimiento; cuando un componente necesita ser actualizado, los cambios se localizan, minimizando el riesgo de afectar otras partes de la aplicación. Además, los componentes a menudo se diseñan para ser independientes y modulares, lo que mejora la organización del código y la capacidad de prueba.

Este enfoque también fomenta una mejor separación de responsabilidades. Cada componente se centra en una funcionalidad o parte específica de la interfaz de usuario. Los componentes individuales se pueden desarrollar, probar y mantener de forma independiente, lo que lleva a una mayor velocidad de desarrollo y una mejor calidad general. Frameworks como React, Angular y Vue.js aprovechan en gran medida este paradigma utilizando bloques de código como:

//Ejemplo de React function MyComponent() { return (<h1>¡Hola, mundo!</h1>); }

27. ¿Cómo gestionas y optimizas los scripts de terceros incluidos en tus páginas HTML?

Gestionar y optimizar los scripts de terceros implica varias estrategias. En primer lugar, carga los scripts de forma asíncrona utilizando los atributos async o defer para evitar bloquear el hilo principal. Coloca los scripts antes de la etiqueta de cierre </body> cuando se utiliza defer. Supervisa el rendimiento de los scripts utilizando las herramientas de desarrollo del navegador o herramientas de supervisión del rendimiento de terceros para identificar los scripts de carga lenta o que consumen muchos recursos. Reduce el número de scripts de terceros y auditarlos regularmente para asegurarte de que siguen siendo necesarios.

La optimización adicional incluye el uso de una Red de Distribución de Contenido (CDN) para una carga más rápida y el aprovechamiento del almacenamiento en caché del navegador mediante la configuración de encabezados HTTP apropiados. Considere la carga diferida de scripts que no se necesitan inmediatamente. Por ejemplo, se puede utilizar la API IntersectionObserver. Además, use herramientas para concatenar y minificar scripts para reducir el tamaño del archivo y las solicitudes HTTP. Emplee la Integridad de Subrecursos (SRI) para asegurar la integridad de los scripts de las CDN. Ejemplo:

28. Describa las técnicas para la carga diferida de imágenes y otros recursos en HTML.

La carga diferida optimiza el rendimiento del sitio web al aplazar la carga de recursos no críticos hasta que sean necesarios. Para las imágenes, la técnica principal es usar el atributo loading="lazy" en la etiqueta <img>. Esto le dice al navegador que solo cargue la imagen cuando esté cerca del área visible. Para navegadores más antiguos o escenarios más complejos, se pueden usar soluciones basadas en JavaScript. Estas soluciones generalmente implican monitorear la posición de desplazamiento y cargar recursos cuando entran en la vista.

Otros recursos, como videos o iframes, también se pueden cargar de forma diferida utilizando técnicas de JavaScript similares o el atributo loading="lazy" donde sea compatible. Bibliotecas como lozad.js pueden simplificar la implementación de la carga diferida para varios tipos de recursos. Por ejemplo:

29. ¿Cómo se manejan los estilos de impresión en HTML para optimizar la salida impresa de una página web?

Para optimizar los estilos de impresión en HTML, utiliza consultas de medios CSS específicamente dirigidas a la impresión. La consulta de medios @media print te permite definir estilos que solo se aplicarán cuando se imprima la página. Dentro de este bloque, oculta elementos innecesarios como barras de navegación, anuncios y componentes interactivos usando display: none;. Ajusta los tamaños de fuente, los colores y el diseño para asegurar la legibilidad en papel. Por ejemplo, usa texto más oscuro sobre un fondo blanco.

Mejoras adicionales implican controlar los saltos de página utilizando propiedades CSS como page-break-before, page-break-after y page-break-inside. Considera usar unidades como em, rem o pt para los tamaños de fuente en los estilos de impresión para asegurar una representación consistente en diferentes impresoras. Recuerda probar a fondo tus estilos de impresión utilizando la función de vista previa de impresión del navegador.

30. Explica el uso de la Política de Seguridad de Contenido (CSP) para mejorar la seguridad de las aplicaciones HTML.

La Política de Seguridad de Contenido (CSP) es un estándar de seguridad que ayuda a prevenir el scripting entre sitios (XSS), el clickjacking y otros ataques de inyección de código. Funciona permitiéndote definir una lista blanca de fuentes desde las que el navegador está autorizado a cargar recursos. Esta lista blanca se especifica usando la cabecera HTTP Content-Security-Policy o la etiqueta <meta> en tu HTML.

Las directivas CSP controlan las fuentes para varios tipos de recursos como scripts (script-src), estilos (style-src), imágenes (img-src), fuentes (font-src), y más. Por ejemplo, Content-Security-Policy: script-src 'self' https://example.com; permite scripts solo desde el mismo origen y https://example.com. Al definir explícitamente estas fuentes permitidas, CSP reduce significativamente la superficie de ataque de tu aplicación, mitigando el impacto de las vulnerabilidades potenciales. También ofrece la directiva report-uri para informar de las violaciones de la política.

HTML MCQ

Pregunta 1.

¿Qué etiqueta HTML se utiliza para definir el encabezado más importante (más grande)?

Opciones:

Pregunta 2.

¿Qué etiqueta HTML se utiliza para definir una imagen?

Opciones:

Pregunta 3.

¿Qué etiqueta HTML se utiliza para insertar un salto de línea simple?

Opciones:

Pregunta 4.

¿Qué etiqueta HTML se utiliza para definir una lista desordenada?

Opciones:

Pregunta 5.

¿Qué etiqueta HTML se utiliza para definir un párrafo?

Opciones:

Pregunta 6.

¿Qué etiqueta HTML se utiliza para definir un hipervínculo?

Opciones:

Pregunta 7.

¿Qué etiqueta HTML se utiliza para definir una tabla?

Opciones:

Pregunta 8.

¿Qué etiqueta HTML se utiliza para crear una lista ordenada?

Opciones:

Pregunta 9.

¿Qué etiqueta HTML se utiliza para incrustar un vídeo en una página HTML? Opciones:

Opciones:

Pregunta 10.

¿Qué etiqueta HTML se utiliza para definir una hoja de estilo interna?

Opciones:

102 preguntas de entrevista HTML para contratar desarrolladores expertos

Tabla de contenidos

Preguntas de entrevista HTML para recién graduados

1. ¿Puedes explicar qué es HTML en términos muy sencillos, como si estuvieras hablando con un niño de cinco años?

2. ¿Qué son las etiquetas HTML y puedes darme un par de ejemplos?

3. ¿Cuál es la estructura básica de un documento HTML? ¿Cuáles son las etiquetas necesarias?

4. ¿Cómo se crea un encabezado en HTML? ¿Cuáles son los diferentes niveles de encabezados?

5. ¿Cómo se crea un párrafo en HTML?

6. ¿Cómo se puede poner texto en negrita o cursiva en HTML?

7. ¿Cómo se añade una imagen a una página web usando HTML? ¿Qué hace el atributo `src`?

8. ¿Cómo se crea un enlace a otro sitio web o a una página diferente en el mismo sitio web?

9. ¿Qué es un atributo HTML? Dé algunos ejemplos de atributos HTML comunes.

10. ¿Cuál es la diferencia entre las etiquetas `<h1>` y `<h6>`?

11. ¿Cuál es el propósito de la sección `<head>` en un documento HTML?

12. ¿Cómo se crea una lista desordenada en HTML?

13. ¿Cómo se crea una lista ordenada en HTML?

14. ¿Cómo se pueden agregar comentarios a su código HTML? ¿Por qué son útiles los comentarios?

15. ¿Cuál es la diferencia entre un elemento de nivel de bloque y un elemento en línea? ¿Puedes dar ejemplos?

16. ¿Cuál es el propósito del atributo `alt` en la etiqueta `<img>`? ¿Por qué es importante?

17. ¿Cómo se crea una tabla simple en HTML?

18. ¿Cuál es el propósito de la etiqueta `<div>`?

19. ¿Cuál es el propósito de la etiqueta `<span>`?

20. ¿Cómo se incluye una hoja de estilo CSS en un documento HTML?

21. ¿Cuál es el propósito de la etiqueta <meta> en HTML? ¿Puede dar algunos ejemplos de su uso?

22. Explique la diferencia entre los atributos id y class en HTML.

23. ¿Cómo crearías un formulario simple con un campo de entrada de texto y un botón de enviar?

24. ¿Cuáles son algunas etiquetas semánticas HTML comunes y por qué son importantes para la accesibilidad y el SEO?

25. Si tienes texto en un párrafo, ¿cómo te aseguras de que aparezca en una nueva línea?

26. ¿Cómo incrustas un video de YouTube en una página HTML?

Preguntas de la entrevista de HTML para principiantes

1. ¿Qué significa HTML?

2. ¿Puedes explicar la estructura básica de un documento HTML? Es decir, ¿cuáles son las partes importantes?

3. ¿Qué son las etiquetas HTML? Dame un par de ejemplos.

4. ¿Cuál es la diferencia entre las etiquetas de apertura y cierre?

5. ¿Cuál es la etiqueta para hacer un párrafo?

6. ¿Cómo se pone algo en negrita en HTML?

7. ¿Cómo se crea un enlace a otro sitio web?

8. ¿Qué es una etiqueta de imagen y cómo se usa para mostrar una imagen?

9. ¿Qué son los encabezados en HTML? ¿Cuántos niveles hay?

10. ¿Qué es un atributo HTML? Dé un ejemplo.

11. ¿Cómo se añade un comentario a tu código HTML?

12. ¿Cuál es la diferencia entre una lista con números y una lista con viñetas?

13. ¿Qué etiqueta se utiliza para crear una tabla?

14. ¿Para qué se utiliza el atributo `src` en la etiqueta `<img>`?

18. ¿Cómo se enlaza un archivo CSS externo a tu documento HTML?

19. Explica la diferencia entre elementos de nivel de bloque y elementos en línea.

20. ¿Cuáles son algunos elementos comunes de formulario HTML?

21. ¿Cómo se crea un campo de entrada de texto simple en HTML?

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

23. ¿Cómo se puede poner una palabra o frase en cursiva en HTML?

24. ¿Cuál es el propósito de la declaración `<!DOCTYPE html>`?

25. ¿Puedes describir qué son las entidades HTML y por qué son útiles?

Preguntas de la entrevista intermedia de HTML

1. Explica el concepto de HTML semántico y por qué es importante para la accesibilidad web y el SEO.

2. ¿Cómo manejan los formularios HTML los diferentes tipos de validación de entrada (por ejemplo, correo electrónico, número, campos obligatorios)? ¿Puede proporcionar ejemplos?

3. Describe la diferencia entre los elementos `<div>` y `<section>`. ¿Cuándo usarías uno en lugar del otro?

4. ¿Cuáles son las ventajas de usar etiquetas semánticas HTML5 como `<article>`, `<aside>`, `<nav>` y `<footer>`?

5. ¿Cómo se puede incrustar audio y video en HTML, y cuáles son algunas consideraciones para la compatibilidad entre navegadores?

6. Explica el propósito del elemento \<canvas>`` y cómo se puede utilizar para dibujar gráficos utilizando JavaScript.

7. ¿Qué son los Web Workers en HTML5 y cómo pueden mejorar el rendimiento de las aplicaciones web?

8. ¿Cómo se gestionan las diferentes codificaciones de caracteres en HTML para asegurar la correcta visualización del texto?

9. ¿Para qué se utilizan los atributos data-*?

10. Explique la diferencia entre cookies, sessionStorage y localStorage en el contexto del almacenamiento web HTML5.

11. Describe cómo crear imágenes responsivas usando el elemento <picture> y el atributo srcset.

12. ¿Cómo se puede optimizar el código HTML para una carga de página más rápida y un mejor rendimiento?

13. Explicar el concepto de roles y atributos ARIA, y cómo mejoran la accesibilidad para usuarios con discapacidades.

14. ¿Cómo se crean formularios accesibles en HTML, incluyendo etiquetas, mensajes de error y navegación por teclado?

15. ¿Cuáles son las diferentes formas de enlazar a recursos externos (por ejemplo, hojas de estilo, scripts) en HTML, y cuáles son sus mejores casos de uso?

16. Describe el propósito de las etiquetas <meta> en la sección <head> de un documento HTML y su impacto en el SEO y el comportamiento del navegador.

17. ¿Cuál es el propósito del atributo alt en la etiqueta <img> y cómo contribuye a la accesibilidad?

18. Explique el concepto de componentes web y cómo se pueden usar para crear elementos HTML reutilizables.

19. ¿Cómo se manejan los problemas de intercambio de recursos de origen cruzado (CORS) al incrustar recursos de diferentes dominios en HTML?

20. ¿Cuál es el propósito del elemento `<template>`, y cómo se puede usar con JavaScript para crear contenido dinámico?

21. ¿Cómo se usa HTML para crear tablas accesibles, asegurando que sean utilizables por lectores de pantalla y otras tecnologías de asistencia?

Preguntas de entrevista HTML para experimentados

1. Explica el concepto de 'shadow DOM' y sus casos de uso en el desarrollo web.

2. Describe las diferencias entre `localStorage`, `sessionStorage` y cookies, y cuándo usarías cada uno.

3. ¿Qué son los componentes web y cómo contribuyen al HTML modular y reutilizable?

4. ¿Cómo optimizaría HTML para un mejor rendimiento de SEO?

5. Discuta las consideraciones de accesibilidad al construir formularios HTML.

21. ¿Cuál es el propósito de la etiqueta `<meta>` en HTML? ¿Puede dar algunos ejemplos de su uso?

22. Explique la diferencia entre los atributos `id` y `class` en HTML.

6. Explica el propósito del elemento `\`<canvas>`` y cómo se puede utilizar para dibujar gráficos utilizando JavaScript.

9. ¿Para qué se utilizan los atributos `data-*`?

11. Describe cómo crear imágenes responsivas usando el elemento `<picture>` y el atributo `srcset`.

16. Describe el propósito de las etiquetas `<meta>` en la sección `<head>` de un documento HTML y su impacto en el SEO y el comportamiento del navegador.

17. ¿Cuál es el propósito del atributo `alt` en la etiqueta `<img>` y cómo contribuye a la accesibilidad?

12. Describe el proceso de creación de imágenes responsivas utilizando el elemento `<picture>` y el atributo `srcset`.