HTML: Características avanzadas y optimización

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');