HTML5: Lo qué nos trae de nuevo

Para todos los interesados en el mundo de la programación  y para los que queremos saber  de los estándares que se usan para la creación de páginas y contenidos web, es interesante saber cómo van cambiando con el paso del tiempo y las tecnologías y acuerdos  los que llegan para su funcionamiento. Ése es el caso del HTML 5 del cual es necesario conocer algunos aspectos:   

  • El uso de un códec de paga ( h.264), que será el nuevo lenguaje de internet
  • Uso de etiquetas para audio y  video:

Video

<video id="video" width="640" height="480" volume=".7" controls autoplay>
<source src="video.ogg" type="video/ogg"> </source>
</video>

Audio:

<audio>
<source src="music.oga" type="audio/ogg">
</audio>
  • Nueva estructura

ñEsto si es un dolor de cabeza para los bloggers no familiarizados con html ya que viene cambio nuevo en la forma de hacer contenido y la búsqueda del mismo usando las siguientes etiquetas:

  • article : Una entrada independiente en un blog, sitio o revista.
  • footer : El final de la página, donde se incluyen los modos de contacto, etc.
  • header : No el elemento head, sino la cabecera de una determinada página.
  • nav : Una colección de vínculos a otros sitios o páginas.
  • section : Una sección determinada que incluye su propio encabezamiento.

  • Mark, Aside y Time

Mark  indicará importancia a un determinado texto.

<p>La <mark>etiqueta mark</mark> es utilizada para llamar la atención.</p>

<aside> definie un bloque semántico que representa una nota o explicación, relacionado con alguna otra parte del contenido.

Time:mejora el manejo de fechas y horas.

<time datetime="2010-03-29">Marzo</time>.
<time>09:00</time>
  • Mejoras en <input type…>

Nuevos tipos de ingreso de texto, dependiendo de si es una url o un email,una fecha, etc.

<input type="email">
<input type="url">
<input list="title-list">

<datalist id="title-list">
<option value="...">
</datalist>
  • Cuadro de diálogo

Para los dialogo, la etiqueta <dialog>

<dialog>
<dt> Usuario 1:
<dd> Hola!
<dt> Usuario 2:
<dd> Hola! :)
</dialog>
  • Barra de progreso, canvas, device y embebed

Para indicar  el progreso de una tarea, se empleará la etiqueta <progress> 

<progress>
<span id="objprogress">76</span>%
</progress>

<canvas>Para dibujar gráficos dinámicos e interactivos

<device> permitirá al cliente acceder a varios dispositivos

<embed>  para el  uso de  contenido embebido.

Vía: bitelia y sitio oficial del W3C.

  • que trae de nuevo html5