HTML 5 para principiantes. Usalo ahora, es fácil!

[N4X]

Traducción y adaptación de: HTML 5 for Beginners. Use it now, its easy!

Hay un montón de artículos sobre HTML5, especialmente desde que llegó  Google Wave (porque es la primera app reconocida en ese lenguaje, pero  toda la información que necesitas para poder empezar a usarlo ahora  mismo es algo más complicado de encontrar. En este artículo  vamos a simplificar un poco las cosas.
 

 
 
   Estoy seguro de que ya lo sabeis, Internet Explorer no soporta HTML5.  Sorpresa, sorpresa!. Así que lo primero que aprenderemos a hacer será:  
Hackear IE usando javascript

 
Hay un buen sitio llamado HTML5Doctor que nos da la solución  perfecta. Se trata de un script en javascript que fuerza a IE a 'ver'  los siguientes tags de HTML5:

Código [Seleccionar] Expandir

<article>, <aside>, <audio>, <bb>,  <canvas>, <datagrid>, <datalist>,
<details>,  <dialog>, <eventsource>, <figure>, <footer>,  <header>, <hgroup>,
<mark>, <menu>,  <meter>, <nav>, <output>, progress>,  <section>, <time>,
and last but not least <video>.
Se puede descargar desde aquí
Obviamente usar javascript no es la mejor forma de fijar el problema,  ya que si lo desactivamos la página dejará de funcionar. Lo único que  podemos hacer es asegurarnos que con JS desactivado la página funcionará  correctamente.
HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.
Ahora los navegadores más reconocidos del mercado reconocerán  nuestros códigos (IE, Safari, Chrome, Firefox, Opera)
Empezando a usar HTML5

Uno de los principales beneficios de HTML5 es que podemos deshacernos  en gran parte del código duplicado. No hay que seguir definiendo todo  por una id o una clase porque los elementos por defecto ya están  construidos.
Entre otros elementos, para tus cabeceras puedes usar <header>,  para la navegación <nav>, para el pié, adivina..., <foot>.  También, con el tag <section> puedes dividir tu contenido usando  <article>. Con esos tags podemos lograr que los navegadores capten  la relevancia del contenido de una forma más simple, eso nos ayudará  con el SEO y, por supuesto, significa menos tiempo codeando. De todas  formas podemos seguir usando <div id="header"> pero las nuevas  etiquetas tienen un mejor y más simple uso
Hay otros dos grandes avances en HTML5 con el que se hará la vida más  fácil a los desarrolladores. La primera es:
El tag <video>

 
Para usar el tag <video> tenemos que hacerlo así:

Código [Seleccionar] Expandir

<video src="/video.ogv" >
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
La línea entre <video> y </video> es para aquellos  navegadores que no usen HTML5.
Un problema con este tag es que Apple decidió no dar soporte al  formato abierto OGG en Safari. Así que para dar soporte a todos los  navegadores tendremos que poner 2 sources

Código [Seleccionar] Expandir

<video width=320 height=240 controls>
<source src="/video.ogv" type="video/ogg">
<source src="/video.mp4"; type="video/mp4";>
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>

El segundo avance es:
Validación de formularios

 
Desafortunadamente la mayoría de navegadores aún no dan soporte. De  echo, estoy bastante seguro que Opera es el único que da soporte de  momento. De todas formas he decidido incluirlo porque creo que será una  característica brillante...
Con HTML5 seremos capaces de validar la información de un input  simplemente indicandole que tipo de dato esperamos.

Código [Seleccionar] Expandir

<input type="email" required>
<input type="date">
<input type="url">

También podemos usar el autofocus, de esta forma:

Código [Seleccionar] Expandir

<input type="email" required autofocus>

Que simple es!

[Kasi]

Mmm la verdad es que no pinta nada mal, habrá que empezar a probar cosillas con HTML5

Gracias por el aporte!

[[D4N93R]]

Otra cosa buena es que no hace falta, para valores verdaderos colocar el true, como en tu ejemplo:

Código [Seleccionar] Expandir

<input type="email" required> , esto hace que el código quede más legible.

Y bueno, ahora si todo sigue así, el estándar será mp4

Esperamos ahora más sobre el tema!

[Mr. Crowley]

Interesante 

[jdc]

si que hay inputs interesantes como type="range" muy bueno, aqui encontre una lista para aportar con el mini tuto

<input type="search"> para cajas de búsqueda.
<input type="number"> para adicionar o restar números mediante botones.
<input type="range"> para seleccionar un valor entre dos valores predeterminados.
<input type="color"> seleccionar un color.
<input type="tel"> números telefónicos.
<input type="url"> direcciones web.
<input type="email"> direcciones de email.
<input type="date"> para seleccionar un día en un calendario.
<input type="month"> para meses.
<input type="week"> para semanas.
<input type="time"> para fechas.
<input type="datetime"> para una fecha exacta, absoluta y tiempo.
<input type="datetime-local"> para fechas locales y frecuencia.

Saludos y gracias, muy bueno

EDITO: Encontre otro mas, placehover que hace la marca de agua similar a la de google

ejemplo:

<form>
 <input placeholder="Buscar en elhacker.net">
 <input type="submit" value="Buscar">
</form>

Lamentablemente lo probe con opera y no funciona, solo funciono con Chrome

Aqui algo interesante que encontre tambien.

Cuando utilizan la etiqueta <article> hablan de un contenido especifico osea:

<article>
    Este es un post donde se habla de html5
</article>

Ahora si necesitamos poner contenido relacionado, podemos anidar "article" pòr ejemplo

<article>
    Este es un post donde se habla de html5
       <article>html5 aun no esta en funcionamiento</article>
       <article>Internet explorer aun no soporta html5</article>
</article>

Si se fijan todo tiene relacion con el articulo pero separamos lo mas importante de las observaciones (por decirlo de algun modo )

[raul338]

Muy Buen tuto!!!

HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.

WTF! Se sigue usando la version 2??? :| (el otro no digo nada porque no lo conozco jeje)

[Cygog]

por lo visto html5 tiene una conexion en cuanto a las etiquetas en xml.. <xD> para crear cualquiera que se ocurra xD Luego em lo mirare de mas cerca.

[Pazador]

Interesate las validaciones de los campos del form 
pero prefiero seguir usando js y php para validar el campo email, me eh vuelto casi perfeccionista al validar un mail pero el html5 da como valido el correo .@-.- 
pense que seria facil de descargar un video en las etiquetas html5 pero youtube hace magia para que no se pueda lograr  http://www.youtube.com/html5

[Littl3]

Sin duda validar los forms desde html es una maravilla... también lo seria poder utilizar expresiones regulares.

[jdc]

Sin duda validar los forms desde html es una maravilla... también lo seria poder utilizar expresiones regulares.

en teoria se puede, por ejemplo algo como esto:

<input id="form11" name="part" pattern="[0-9][A-Z]{3}" placeholder="Digit followed by three uppercase letters.">
<code>[0-9][A-Z]{3}</code>

fijate en [pattern="[0-9][A-Z]{3}"] lo malo es que seria tan seguro como proteger un formulario con javascript