Want to create interactive content? It’s easy in Genially!

Get started free

HTML 5

María De Pavía

Created on March 24, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

India Horizontal Infographic

Sustainability Infographic

Animated Chalkboard Horizontal Infographic

Genial Infographic

Vintage Circus Vertical Infographic

Advent Calendar

Bio Historical Character

Explore all templates

Transcript

Elementos

Estructura

Comofunciona

Para que sirve

NUEVAS caracteristicas

HTML 5

¿QUE ES?

El HTML5 es un estándar que sirve para definir la estructura, el diseño y el contenido de una página web. En realidad, se trata de un código, un lenguaje (HTML) que define los contenidos que forman parte de una página web, como imágenes, texto, vídeos, juegos, marcos, estilo de letra, etc.

DATOS

Escribe un subtítulo genial aquí para dar contexto

A diferencia de otros códigos, HTML5 es compatible con la mayoría de los navegadores modernos, incluyendo Google Chrome, Mozilla Firefox, Safari, Microsoft Edge y Opera entonces es una muy buena opcion ....

Infografía Robot

UN TÍTULO GENIAL

¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

UN TÍTULO GENIAL

Escribe un subtítulo genial aquí para dar contexto

+190

Aquí puedes poner un título destacado

Tus contenidos gustan, pero solo enganchan si son interactivos. Capta la atención de tu público con una fotografía o ilustración interactiva.

+45k

Un título genial

La estructura básica de un archivo HTML5 es sencilla, pero altamente efectiva. Comienza con <!DOCTYPE html>, seguido de las etiquetas <html>, <head>, y <body>. El <head> contiene metadatos y enlaces a recursos externos, mientras que el <body> incluye el contenido visible.

Estructura de HTML5

HTML5: nuevas características

  • Hay nuevas etiquetas semánticas que facilitan la estructura de los documentos HTML y que reemplazarán a etiquetas de versiones anteriores como <div>, que ayudaban a identificar cada bloque en las páginas web. Esta es la principal evolución con respecto al HTML4, ya que este tipo de etiquetas permite que la página web sea indexada con mayor exactitud por los buscadores. Estas nuevas etiquetas ayudan también a definir mejor la estructura y los componentes de la web y brindan información sobre su contenido y relevancia. El HTML5 diferencia entre un artículo, sección, vídeo, encabezado, etc.
  • Existe la posibilidad de incluir audio y vídeo a través de las etiquetas multimedia.
  • Se integran mejor los gráficos vectoriales escalables (SVG) en lugar de los genéricos que se incluían hasta ahora, como <object>, además de incluir nuevos elementos que nos permiten dibujar en él a través de la etiqueta <canvas>.
  • Se redefinen, modifican o estandarizan ciertos elementos que se repiten en la mayoría de las páginas web.
  • Se pueden incluir fórmulas matemáticas a través de MathML.

enlace

Cómo funciona el HTML5

HTML5 utiliza un protocolo de solicitud/respuesta denominado HTTP para la comunicación entre clientes y servidores. Al iniciar una conexión TCP por parte del cliente, se envía una solicitud HTTP al servidor. El servidor responde a las solicitudes dando derecho de acceso a esos clientes a través de los recursos disponibles. Cuando el cliente y el servidor establecen una conexión, los mensajes que se intercambian poseen una tecnología denominada WebSocket. Y, de hecho, el lenguaje HTML5 consiste en WebSockets que también utilizan la infraestructura HTTP para generar un mecanismo ligero de comunicación entre un cliente y un servidor web. Un explorador web compatible con HTML5 utiliza la API de JavaScript para llevar a cabo las siguientes tareas: ● Abrir una conexión en WebSocket: El explorador web envía un mensaje de actualización HTTP al servidor para cambiar al protocolo WebSocket. ● Iniciar la comunicación a través de la conexión WebSocket: El servidor acepta o rechaza esta solicitud. ● Cerrar las conexiones WebSocket. Así es una conversación cliente-servidor durante una conexión HTML5: ● El cliente envía una solicitud HTTP para actualizar la WebSocket. ● El servidor responde a la solicitud y cambia el protocolo WebSocket. ● El servidor envía fotogramas de WebSocket al cliente. ● El cliente envía una solicitud para cerrar el WebSocket.

Elementos semánticos

<header>: Define el encabezado de una página o sección. <nav>: Contiene enlaces de navegación. <article>: Representa un contenido independiente. <section>: Agrupa contenido relacionado. <footer>: Define el pie de página. <aside>: Contiene contenido relacionado, pero separado del contenido principal. <main>: Identifica el contenido principal del documento.

¿para que sirve?...Estas son algunas de las ventajas de este nuevo lenguaje con respecto a otros: Mejora la experiencia del usuario en los navegadores más utilizados, ya que el HTML5 es compatible con la mayoría de ellos (Google, Safari, Firefox, etc.). Además, es responsive, por lo que se adapta a los distintos dispositivos (tablet, ordenador o móvil). Consigue un mejor posicionamiento en los buscadores. Tanto es así que Google recomienda su uso. Es un lenguaje que puede ser interpretado por numerosos sistemas informáticos. Soporta funcionalidades multimedia e interactivas como vídeos o formularios sin necesidad de tener que instalar plugins. Gracias al sistema API de Javascript (con el que es compatible), se pueden introducir elementos complejos en las webs. Nos referimos a dibujos 3D o mapas interactivos en los documentos.

Presenta tu genially. Con tranquilidad y concisión. Sintetiza el contenido.

La comunicación visual interactiva paso a paso:

  • Planificar la estructura de tu comunicación.
  • Jerarquizarla y darle peso visual a lo principal.
  • Definir mensajes secundarios con interactividad.
  • Establecer un flujo a través del contenido.
  • Medir los resultados.

enlace

Escribe un título genial

¿Sabías que Genially te permite compartir tu creación directamente, sin necesidad de descargas? Listo para que tu público pueda visualizarlo en cualquier dispositivo y darle difusión en cualquier lugar.

Escribe un título genial

¿Sabías que Genially te permite compartir tu creación directamente, sin necesidad de descargas? Listo para que tu público pueda visualizarlo en cualquier dispositivo y darle difusión en cualquier lugar.

¿Sabías que...En Genially encontrarás más de 1.000 plantillas listas para que introduzcas tus contenidos y las personalices, y que te ayudarán a contar tus historias.