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ícate

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');
Empezar curso de HTML

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.