Preguntas de Entrevista HTML

Preguntas comunes de HTML en entrevistas frontend

Preguntas Esenciales de Entrevista HTML

Domina los conceptos fundamentales de HTML que se preguntan comúnmente en entrevistas de desarrollador frontend. Esta guía cubre HTML semántico, formularios, accesibilidad, SEO y mejores prácticas.

1. ¿Qué es HTML Semántico y Por Qué es Importante?

HTML semántico usa elementos que describen claramente su significado tanto para el navegador como para el desarrollador. En lugar de usar elementos genéricos <div> y <span>, los elementos semánticos proporcionan contexto sobre el contenido que contienen.

Ejemplo No Semántico:

<div class="header">
  <div class="nav">
    <div class="nav-item">Inicio</div>
  </div>
</div>

Ejemplo Semántico:

<header>
  <nav>
    <a href="/">Inicio</a>
  </nav>
</header>

Beneficios del HTML Semántico:

Mejor accesibilidad para lectores de pantalla
SEO mejorado (los motores de búsqueda entienden mejor el contenido)
Código más fácil de mantener y leer
Mejor para diseño responsivo

2. Explica la Diferencia Entre Elementos de Bloque e Inline

Elementos de bloque: Ocupan todo el ancho disponible y comienzan en una nueva línea.

<div>, <p>, <h1>-<h6>
<section>, <article>, <header>
<footer>, <nav>, <ul>, <ol>

Elementos inline: Solo ocupan el ancho necesario y no comienzan en una nueva línea.

<span>, <a>, <strong>, <em>
<img>, <button>, <input>

<!-- Elementos de bloque ocupan toda la línea -->
<div>Bloque 1</div>
<div>Bloque 2</div>

<!-- Elementos inline están en la misma línea -->
<span>Inline 1</span> <span>Inline 2</span>

3. ¿Qué es el DOCTYPE y Por Qué es Importante?

DOCTYPE (Declaración de Tipo de Documento) informa al navegador qué versión de HTML usar. En HTML5, es simplemente:

<!DOCTYPE html>

Importancia:

Asegura que el navegador renderice la página en modo estándar
Sin DOCTYPE, los navegadores pueden entrar en "modo quirks"
Ayuda a mantener la consistencia entre navegadores

4. Explica la Diferencia Entre <script>, <script async> y <script defer>

<!-- Normal: bloquea el análisis hasta que se ejecute -->
<script src="script.js"></script>

<!-- Async: descarga en paralelo, se ejecuta cuando esté listo -->
<script async src="script.js"></script>

<!-- Defer: descarga en paralelo, se ejecuta después del análisis HTML -->
<script defer src="script.js"></script>

Cuándo usar cada uno:

async: Para scripts independientes (analytics, ads)
defer: Para scripts que dependen del DOM completo
Normal: Cuando el orden de ejecución es crítico

5. ¿Qué son los Atributos data-* y Cuándo Usarlos?

Los atributos data-* permiten almacenar información personalizada en elementos HTML sin usar atributos no estándar.

<div 
  data-user-id="123" 
  data-role="admin"
  data-active="true">
  Usuario
</div>

<script>
const div = document.querySelector('div');
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"
</script>

6. Explica la Importancia de los Atributos alt en Imágenes

El atributo alt proporciona texto alternativo para imágenes:

<img 
  src="logo.png" 
  alt="Logo de la Empresa - TechLead"
  width="200"
  height="50"
>

Beneficios:

Accesibilidad: Los lectores de pantalla leen el texto alt
SEO: Los motores de búsqueda indexan el texto alt
Usabilidad: Se muestra si la imagen no carga
Contexto: Ayuda a entender el propósito de la imagen

7. ¿Qué es ARIA y Cuándo Deberías Usarlo?

ARIA (Accessible Rich Internet Applications) ayuda a hacer el contenido web más accesible:

<!-- Botón personalizado con rol ARIA -->
<div 
  role="button" 
  aria-label="Cerrar ventana modal"
  aria-pressed="false"
  tabindex="0">
  ✕
</div>

<!-- Estado de carga -->
<div aria-live="polite" aria-busy="true">
  Cargando...
</div>

Roles ARIA comunes:

role="button" - Elemento clickeable
role="navigation" - Sección de navegación
role="alert" - Mensaje importante
aria-label - Etiqueta accesible
aria-hidden="true" - Ocultar de lectores de pantalla

8. Explica la Diferencia Entre LocalStorage, SessionStorage y Cookies

Característica	LocalStorage	SessionStorage	Cookies
Capacidad	~5-10MB	~5-10MB	~4KB
Expiración	Nunca	Al cerrar pestaña	Configurable
Acceso	Solo cliente	Solo cliente	Cliente y servidor
Enviado al servidor	No	No	Sí, con cada petición

// LocalStorage
localStorage.setItem('user', 'Juan');
localStorage.getItem('user');
localStorage.removeItem('user');

// SessionStorage
sessionStorage.setItem('token', 'abc123');

// Cookies
document.cookie = "user=Juan; max-age=3600; path=/";

9. ¿Qué son los Meta Tags y Cuáles son los Más Importantes?

<head>
  <!-- Charset -->
  <meta charset="UTF-8">
  
  <!-- Viewport para responsivo -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO -->
  <meta name="description" content="Descripción de la página">
  <meta name="keywords" content="html, css, javascript">
  
  <!-- Open Graph para redes sociales -->
  <meta property="og:title" content="Título">
  <meta property="og:description" content="Descripción">
  <meta property="og:image" content="imagen.jpg">
  
  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
</head>

10. Explica el Propósito de los Formularios y la Validación HTML5

<form action="/submit" method="POST">
  <!-- Requerido -->
  <input type="text" name="nombre" required>
  
  <!-- Email con validación -->
  <input type="email" name="email" required>
  
  <!-- Número con rango -->
  <input type="number" name="edad" min="18" max="100">
  
  <!-- Patrón personalizado -->
  <input 
    type="text" 
    name="telefono" 
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
    placeholder="123-456-7890"
  >
  
  <!-- Longitud mínima/máxima -->
  <input 
    type="password" 
    name="password" 
    minlength="8"
    maxlength="20"
    required
  >
  
  <button type="submit">Enviar</button>
</form>

Atributos de validación HTML5:

required - Campo obligatorio
pattern - Expresión regular para validar
min/max - Valores mínimos y máximos
minlength/maxlength - Longitud del texto
type - Validación basada en el tipo (email, url, etc.)

Mejores Prácticas de HTML

✓ Usa siempre HTML semántico
✓ Incluye atributos alt en todas las imágenes
✓ Usa etiquetas ARIA cuando sea necesario
✓ Valida tu HTML con validadores W3C
✓ Mantén una estructura jerárquica clara de encabezados
✓ Usa formularios HTML5 con validación nativa
✓ Optimiza para accesibilidad y SEO