Html5

tema1_d

Características principales de HTML5

1. Semántica mejorada

HTML5 introduce etiquetas específicas para estructurar mejor el contenido:

• <header>: Define encabezados o introducciones.
• <footer>: Contiene información de pie de página.
• <article>: Representa contenido independiente y auto-contenido, como artículos de un blog.
• <section>: Agrupa contenido temático relacionado.
• <nav>: Define un conjunto de enlaces de navegación.
• <aside>: Contenido relacionado o complementario al principal.

2. Soporte para multimedia

• <audio>: Permite incrustar audio sin complementos.
  html

  Copiar código

  <audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>

• <video>: Reproduce videos directamente en el navegador.
  html

  Copiar código

  <video controls width="640">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>


3. Gráficos avanzados

• <canvas>: Permite dibujar gráficos y animaciones en 2D mediante JavaScript.
  html

  Copiar código

  <canvas id="miCanvas" width="200" height="100"></canvas>

• SVG (Scalable Vector Graphics): Para gráficos vectoriales escalables directamente en el DOM.
  html

  Copiar código

  <svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>


4. Formularios más potentes

HTML5 mejora los formularios con nuevos tipos de entradas y atributos:

• Tipos de entrada:
  • <input type="email">: Valida correos electrónicos.
  • <input type="date">: Selector de fechas.
  • <input type="number">: Campo para números.
• Atributos útiles:
  • required: Hace un campo obligatorio.
  • placeholder: Texto de ayuda dentro del campo.
  • pattern: Define expresiones regulares para validar entradas.

5. Compatibilidad con APIs modernas

HTML5 se integra con APIs que extienden sus capacidades:

• Geolocalización: Obtener la ubicación del usuario.
  javascript

  Copiar código

  navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});

• API de Almacenamiento Local (localStorage/sessionStorage): Guardar datos en el navegador.
  javascript

  Copiar código

  localStorage.setItem("nombre", "Juan");
console.log(localStorage.getItem("nombre"));


Ventajas de HTML5

1. Soporte multiplataforma: Funciona en navegadores modernos y dispositivos móviles.
2. Reducción de dependencias externas: No se necesitan complementos como Flash.
3. Mejor experiencia de usuario: Contenido multimedia y formularios interactivos más accesibles.
4. Optimización SEO: Etiquetas semánticas ayudan a los motores de búsqueda.

Estructura básica de un documento HTML5