HTML: Optimización HTML
Explora las características avanzadas y técnicas de optimización en HTML 5 para mejorar el rendimiento y la funcionalidad de tus aplicaciones web.
Aprende HTML GRATIS y certifícateHTML 5 ha sido un salto significativo en el desarrollo web, proporcionando nuevas capacidades y mejoras en la semántica y rendimiento. En este módulo, exploraremos características avanzadas y técnicas de optimización que pueden mejorar la funcionalidad y eficiencia de tus aplicaciones web.
Nuevos elementos semánticos
HTML 5 introduce varios elementos semánticos que facilitan la estructura y comprensión del código:
<article>
: Representa una composición independiente en un documento, como una entrada de blog o una noticia.<section>
: Define una sección temática del contenido, como capítulos de un libro.<header>
: Encabezado de una sección o página, generalmente contiene títulos, logotipos o enlaces de navegación.<footer>
: Pie de página de una sección o documento, incluye información de autor, enlaces relacionados, etc.<aside>
: Contenido tangencial al principal, como barras laterales o notas al margen.
Ejemplo de uso:
<article>
<header>
<h1>Título del artículo</h1>
<p>Publicado el 1 de enero de 2024</p>
</header>
<section>
<h2>Introducción</h2>
<p>Contenido introductorio del artículo...</p>
</section>
<footer>
<p>Autor: Nombre del autor</p>
</footer>
</article>
Gestión de multimedia
HTML 5 facilita la integración de multimedia mediante los elementos <audio>
y <video>
, que permiten la inclusión de archivos de audio y vídeo sin necesidad de plugins externos.
Ejemplo de <video>
:
<video controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de vídeo.
</video>
Ejemplo de <audio>
:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Optimización del rendimiento
Para optimizar el rendimiento de las aplicaciones web, HTML 5 proporciona varias técnicas:
Uso de async
y defer
en scripts
Ambos atributos permiten cargar scripts de forma no bloqueante, mejorando el tiempo de carga de la página.
async
: El script se descarga en paralelo con el resto de la página y se ejecuta tan pronto como esté disponible.defer
: El script se descarga en paralelo pero se ejecuta una vez que el documento HTML ha sido completamente analizado.
<script src="script.js" async></script>
<script src="script.js" defer></script>
Compresión y minificación
Reducir el tamaño de los archivos HTML, CSS y JavaScript mediante técnicas de compresión y minificación puede mejorar significativamente el rendimiento. Herramientas como UglifyJS para JavaScript y CSSNano para CSS son recomendadas.
Carga diferida de imágenes
La carga diferida (lazy loading) de imágenes ayuda a mejorar el rendimiento al cargar solo las imágenes que están en el viewport del usuario.
<img src="imagen.jpg" loading="lazy" alt="Descripción de la imagen">
Almacenamiento local
HTML 5 ofrece varias opciones de almacenamiento local que permiten almacenar datos en el navegador del usuario, mejorando la experiencia offline y reduciendo la carga en el servidor.
LocalStorage y SessionStorage
localStorage
: Almacena datos sin fecha de expiración.sessionStorage
: Almacena datos para la duración de la sesión de navegación.
Ejemplo de uso de localStorage
:
// Almacenar dato
localStorage.setItem('clave', 'valor');
// Recuperar dato
let dato = localStorage.getItem('clave');
Lecciones de este módulo de HTML
Lecciones de programación del módulo Optimización HTML del curso de HTML.
Ejercicios de programación en este módulo de HTML
Evalúa tus conocimientos en Optimización HTML con ejercicios de programación Optimización HTML de tipo Test, Puzzle, Código y Proyecto con VSCode.