El HTML5

HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web.

HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento.

Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML.

Todas las variantes de HTML abren las instrucciones con <> y los cierran con </>. Por ejemplo, <p>text</p>

HTML5

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que trae HTML5.

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos.

El HTML5 introduce nuevas formas de escribir código, así que la sintaxis entre ellos puede variar ligeramente.

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.

Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web.

DIFERENCIA DE ESTRUCTURA

10 diferencias esenciales entre HTML4 y HTML5

1. HTML5 continúa en progreso

Si bien está claro el hecho de tener una web maquetada en HTML4 nos permite contar con un estándar de soluciones ya que HTML4 tiene a diferencia de HTML5 que está aún en proceso experimental y de desarrollo, es muy probable que muchas cosas sigan cambiando con el tiempo, y generando algunas dificultades, situación a la que ya no está sujeto ningún producto web hecho en HTML4

2. Sintaxis simplificada

La declaración de tipo de documento de forma más sencilla es sólo una de las muchas novedades de HTML5. Ahora solo tienes que escribir solamente: <DOCTYPE HTML!>. La sintaxis de HTML5 es compatible conHTML4 y XHTML1, pero no con SGML.

3. Elemento <canvas> poniendo en su lugar a Flash

Flash ha sido un dolor de cabeza para unos y una maravilla para otros muchos usuarios de la Web, por lo que hay una importante cantidad de desarrolladores nada contentos con la forma en la que HTML5 trata a Flash; pero es cierto que para todos los demás usuarios que estamos cansados de los vídeos en flash que tardan años en cargarse y funcionar, el nuevo elemento <canvas> y su utilidad para la representación de gráficos es un sueño hecho realidad.

Aunque es cierto que hasta hoy el elemento <canvas> no ofrece todas las ventajas de Flash hay mucho que hace suponer que se acerca el día en que esta herramienta quede obsoleta ante el potencial de HTML5 y su magnífica integración.

4. Nuevos elementos <header> y <footer>

HTML5 esta desarrollado con la intención de reflejar mejor la nueva anatomía de los sitios web. Es por eso que hay algunos elementos nuevos, como <header> y <footer>, que están diseñados específicamente para marcar estas partes de la web.

Con este desarrollo en el lenguaje ya no es necesario identificar a estos dos elementos con la etiqueta <div>.

5. Nuevos elementos <section> y <article>

Al igual que los elementos <header> y <footer>, el <section> y <article> en HTML5 permitirá a los desarrolladores marcar estas áreas de la página como tal.

Además de hacer el código más estructurado, este también tendrá un efecto positivo en tus esfuerzos de SEO ya que para los motores de búsqueda será más fácil el ranking de tu página.

6. Nuevos elementos <menu> y <figure>

El elemento nuevo <menu> puede ser utilizado no solo para los menús convencionales, sino también para las barras de herramientas y menús contextuales, aunque en realidad estos no son los elementos más utilizados en una página.

Del mismo modo, el elemento <figure> es una forma adicional útil para organizar el texto y las imágenes en tu página de una manera profesional. Es cierto que se pueden definir los menús y las cifras en una hoja de estilo pero es bueno que se pueda utilizar en la construcción de elementos de HTML5.

7. Nuevos elementos <audio> y <video>

Son probablemente dos de las novedades más útiles para HTML5. Como su nombre indica, se utilizan para insertar archivos de audio y vídeo.

También hay algunos nuevos elementos multimedia y atributos, tales como <track>, que ofrece pistas de texto para el elemento de vídeo con estas incorporaciones HTML5 está consiguiendo definitivamente que la Web 2.0 sea más amigable. El problema es que al tiempo que HTML5 se convierte en una tecnología ampliamente aceptada, la Web 2.0 podría ser noticia vieja.

8. Un nuevo nivel de las formas

<form> y <forminput> vivieron una gran cantidad de revisiones y ahora tienen muchos atributos nuevos (y los modificados, también). Si estás usando con frecuencia las formas tomate un tiempo para revisar las novedades con más detalle.

9. No más <b> y <font>

Esto es un cambio más que yo no entiendo todavía del todo. No creo que la eliminación de la <b> y elementos <font> vaya a ayudar mucho. Pero las directrices oficiales dicen que estos elementos se manejan mejor en CSS.

10. Han desaparecido <frame>, <center> y <big>

Seguramente no recuerdas cuando fue la última vez que utilizaste una de estas etiquetas lo cual indica que ha sido una buena decisión, todo lo que sea deshacernos de nomenclatura inútil es bienvenido.

Nuevos elementos

Los tiempos modernos requieren nuevos elementos para proporcionar una web más semántica, completa y homogénea. Para ello se han añadido una buena serie de elementos que nos permitirán encapsular más nuestro contenido.

• <article />

Elemento que nos permite declarar un trozo del contenido como artículo. Ideal para blogs o periódicos.

• <aside />

Representa un trozo de contenido que se relaciona muy levemente con el resto del contenido.

• <dialog />

Elemento que permite representar conversaciones.

• <figure />

Podrás usarlo para asociar con un caption un contenido incrustado, como por ejemplo gráficos o vídeo.

• <footer />

Parece que me han leído la mente o quizás leyeron este post. Sección dela página para contener información sobre el autor, copyright, etc.

• <header />

Representa a la sección de cabecera.

• <nav />

Representa la sección de la página orientada a la navegación.

• <section />

Elemento que indica que se trata de una sección genérica.

• <audio />

• <video />

Para el contenido multimedia. Es un elemento dedicado para contenido de plugins.

• <m />

Representa el texto marcado.

• <meter />

Usado para representar medidas, por ejemplo el tamaño del disco usado.

• <time />

Usado para mostrar fechas y/o tiempo.

• <canvas />

Usado para mostrar gráficos renderizados en tiempo real, por ejemplo gráficos, juegos, etc.

• <commnad />

Relacionado con los comandos que el usuario puede invocar.

• <datagrid />

Ideal para mostrar un árbol de datos o una tabla tabulada.

• <details />

Muestra información adicionar si el usuario lo demanda.

• <datalist />

Junto con el nuevo atributo list para los

• <input />

Puede ser usado para crear combo boxes.

• <event-sources />

Puede ser usado para capturar eventos enviados desde servidor.

• <output />

Nos indica que tipo de salida vamos producir con nuestra página.

• <progress />

Representa una barra de proceso de una tarea, por ejemplo descargar. Los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para indicar los diferentes tipos de elementos de entrada posibles.

El XHTML estricto te permite crear sitios con un HTML 100% perfecto, sin dejar pasar ningún error. Se debe respetar correctamente las reglas de anidación, cierre de etiquetas, atributos correspondientes, etc.

• El XHTML transicional te deja pasar algunos errores en el HTML. A lo largo del tiempo los navegadores han creado sus propias etiquetas

...