PREGUNTAS Y RESPUESTAS
En estos momentos doy respuesta a 306 Preguntas.
¿Cómo reproduzco audio de forma nativa con la etiqueta «audio»?
Usa «audio» para reproducir sonido en HTML5. Añade «source» para varios formatos (MP3, Ogg, WAV) y usa atributos como controls, loop y preload.
¿Qué es una imagen adaptable («responsive image»)?
Las imágenes adaptables se ajustan al dispositivo del usuario usando «img» con srcset/sizes para cambio de resolución, o «picture» para dirección de arte y formatos.
¿Puedo insertar SVGs directamente en mi HTML?
Puedes insertar SVGs directamente en HTML. Ventajas: menos peticiones HTTP, control con CSS y JS, escalabilidad perfecta y mejor accesibilidad.
¿Cómo ha mejorado HTML moderno la forma de enlazar CSS?
HTML moderno mejora el enlace de CSS con rel="preload" para carga no bloqueante, uso avanzado de media para estilos condicionales, y Shadow DOM para CSS encapsulado en componentes.
¿Cómo mejora HTML moderno la selección de elementos con CSS?
HTML moderno no crea selectores CSS, pero sus nuevos elementos semánticos, tipos de input y atributos (como ARIA) ofrecen mejores «ganchos» para una selección CSS más precisa y significativa.
¿Cómo interactúa JavaScript con los nuevos elementos de HTML5?
JavaScript interactúa con elementos HTML5 vía DOM y APIs específicas: controla «video»/«audio», dibuja en «canvas», gestiona «dialog», y usa «template» para contenido dinámico.
¿Es mejor poner los scripts de JavaScript en el «head» o antes de cerrar el «body»?
Es mejor poner scripts JavaScript antes de «/body» para evitar bloqueo de renderizado y asegurar acceso al DOM. Alternativamente, usa «script defer» en «head» para carga asíncrona.
¿Cómo afectan los «custom elements» (parte de Web Components) a la escritura de HTML?
Los «custom elements» (Web Components) permiten crear tus propias etiquetas HTML (ej. «mi-componente»), haciendo el HTML más semántico, modular y reutilizable mediante atributos y «slot».
¿Cómo se enlaza una hoja de estilos CSS a un documento HTML?
Enlaza CSS a HTML usando «link rel="stylesheet" href="ruta/estilo.css"» dentro de la etiqueta «head». Esto asegura que los estilos se apliquen al cargar la página.
¿Se puede incluir CSS directamente en HTML?
Sí, puedes incluir CSS en HTML usando «style» en el «head» (interno) o el atributo style en elementos (en línea). Ideal para estilos específicos de página o elemento.
¿Puede HTML funcionar sin CSS o JavaScript?
Sí, HTML funciona sin CSS ni JavaScript. HTML estructura el contenido, que se muestra con estilos básicos del navegador y sin interactividad avanzada.
¿Cuáles son algunas buenas prácticas para escribir HTML limpio y mantenible?
Escribe HTML limpio y mantenible usando semántica, validación, indentación, alt en imágenes, separando responsabilidades (HTML, CSS, JS) y comentando con claridad.
¿Debo preocuparme por las etiquetas HTML obsoletas?
Sí, evita etiquetas HTML obsoletas como «font» o «frame». No garantizan compatibilidad futura, afectan la accesibilidad, invalidan tu HTML y dificultan el mantenimiento.
¿Cómo afecta la estructura del DOM al rendimiento de mi web?
La estructura del DOM afecta al rendimiento web. Un DOM complejo ralentiza el renderizado, el cálculo de estilos y la manipulación con JavaScript, y aumenta el coste de reflujos/repintados.
¿Es buena práctica usar IDs o clases para todo?
No uses IDs o clases para todo. IDs para elementos únicos y «hooks» JS. Clases para estilos reutilizables. Aprovecha selectores de tipo y descendencia.
¿Es importante validar mi código HTML?
Sí, validar tu HTML es crucial. Asegura compatibilidad entre navegadores, facilita la depuración, mejora la accesibilidad, mantenibilidad y prepara tu web para el futuro.
¿Con qué herramientas puedo validar mi HTML?
Valida tu HTML con el servicio en línea del W3C (validator.w3.org), extensiones para editores de código (como HTMLHint para VS Code) o herramientas CLI como HTMLHint o html-validate.
¿Cómo optimizo mi HTML para que cargue más rápido?
Optimiza HTML para carga rápida: minifica el código, reduce nodos DOM, usa imágenes adaptables (srcset, loading="lazy"), carga CSS/JS eficientemente (defer) y habilita compresión Gzip/Brotli.
¿Qué es el «prefetch» o «preload» y cómo se usa en HTML para optimizar la carga?
preload descarga recursos críticos de alta prioridad para la página actual (requiere atributo as). prefetch descarga recursos de baja prioridad para navegación futura. Ambos optimizan la carga.
¿Cómo puedo mejorar el SEO técnico usando solo HTML?
Mejora el SEO técnico con HTML usando: «title», meta descripción, alt en imágenes, «h1»-«h6» jerárquicos, semántica («main», «article»), «link rel="canonical"»>, lang y viewport.
¿Cómo soluciono problemas de codificación de caracteres?
Soluciona problemas de codificación (acentos, ñ) asegurando UTF-8: guarda archivos como UTF-8, añade «meta charset="UTF-8"» al inicio del «head» HTML, y configura el servidor para enviar cabeceras UTF-8.
¿Por qué mi formulario HTML5 no valida como espero?
Si la validación HTML5 no funciona, revisa: el atributo novalidate en «form», formnovalidate en botones, atributos de validación (required, type, pattern) en inputs e interferencia de JavaScript.
¿Qué hago si una nueva etiqueta o atributo HTML no funciona en un navegador antiguo?
Si una etiqueta/atributo HTML nuevo no funciona en navegadores antiguos, usa mejora progresiva, contenido de respaldo, polyfills/shivs (JavaScript para simular funcionalidad), o detección de características.
¿Cómo regenerar las miniaturas en WordPres?
Regenera miniaturas en WordPress con el plugin «reGenerate Thumbnails Advanced» (vía interfaz) o WP-CLI (wp media regenerate --yes en línea de comandos) para eficiencia y control.
¿Cómo puedo cargar plugins solo cuando sean necesarios?
Para cargar plugins condicionalmente en WordPress, desactiva sus assets (CSS/JS) globalmente con wp_dequeue_style/script y luego cárgalos con wp_enqueue_style/script usando condicionales (is_page(), etc.). Para usuarios avanzados.
¿Qué son las unidades unidades de consulta de contenedor (Container Query Units) y cuándo conviene usarlas?
Descubre las unidades de consulta de contenedor en CSS. Escala tipografía y espaciados de forma fluida según el tamaño de su contenedor. ¡CSS adaptable!
