HTML: Características avanzadas y optimización
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.
HTML 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 Características avanzadas y optimización del curso de HTML.
Ejercicios de programación en este módulo de HTML
Evalúa tus conocimientos en Características avanzadas y optimización con ejercicios de programación Características avanzadas y optimización de tipo Test, Puzzle, Código y Proyecto con VSCode.