Tips y recursos para empezar con HTML5

Seguro ya habrás escuchando en los últimos meses del HTML5, el nuevo estándar — aún en borrador — del lenguaje básico de la Web. Varias empresas de renombre (Google, Apple, WHATWG) han estado metidas de lleno en el desarrollo y últimamente la información sobre este estándar ha ido aumentando bastante en los últimos meses.

Por el momento se espera a que éste estándar llegue a su versión final hasta el año 2022 y  también a que salga IE9 que promete ofrecer mejor compatibilidad con HTML5, para que este lenguaje se extienda por toda la web y sea compatible en todos los navegadores. Pero si quieres aprender un poco más de este nuevo lenguaje o quieres empezar a crear tus sitios web con éste desde ya, aquí te dejo una lista de características, tips y recursos para empezar con HTML5.

Primero que todo deberías leer el artículo HTML5 ¿Qué es? Y ¿Cómo usarlo? para entender un poco mejor de lo que se hablará en este artículo.

1. Un nuevo Doctype

Lo primero que deberías hacer para “actualizarte” a HTML5 es cambiar el Doctype. El Doctype siempre debe aparecer al principio de todo archivo HTML. Anteriormente en la versión 4 del estándar se tenían varios Doctypes, por ejemplo:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Ahora, con la nueva versión de este lenguaje solo necesitaríamos añadir el siguiente código:



<!DOCTYPE html>


Al hacer esto no se dañarán tus anteriores diseños, pues HTML5 en compatible con las etiquetas que existen en HTML4, pero te permitirá usar las nuevas características de este nuevo estándar.

2. El atributo charset

Antes para definir la codificación de caracteres de tu sitio, debías especificar el siguiente código:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ahora es mucho más fácil, solo debes añadir lo siguiente:


<meta charset="utf-8">

3. El atributo de lenguaje

Ya no es necesario utilizar los atributos xlmns o xml:lang en la etiqueta html, como antes:


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Ahora en HTML5 solo es necesario especificar lo siguiente, para un sitio cuyo lenguaje es el español:


<html lang="es">

4. No se especifican tipos de scripts o estilos

Anteriormente todas las asociaciones hacia un script o estilo externo debían especificar el tipo de archivo asociado con el atributo type, como:


<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

Ahora no es necesario hacer eso, con lo cual el código quedaría así:


<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>

5. No es necesario cerrar etiquetas o comillas

Ya no es necesario rodear con comillas a tus atributos, como tampoco es necesario cerrar tu elementos:


<li class=laclase> Elemento de la lista.

Si quieres puedes hacer lo anterior, HTML5 te lo permite, pero si prefieres un código mejor estructurado deberías hacerlo como antes:


<li class="laclase">Elemento de la lista.</li>

Además los elementos vacíos como link, img, etc. ya no es necesario que lleven “/” al final de la etiqueta:

Antes:


<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<img src="imagen.jpg" alt="Descripción de la imágen."/>

Después:


<link rel="stylesheet" href="stylesheet.css">
<img src="imagen.jpg" alt="Descripción de la imágen.">

6. Elementos no soportados en HTML5

Los siguientes elementos ya no son soportados en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

7. Nuevas etiquetas

Las principales nuevas etiquetas en HTML5, solo buscan añadir un significado semántico superior a lo que anteriormente significaba un div o un span.

Estás etiquetas se pueden utilizar en conjunto con las etiquetas del estándar HTML4.

<header> y <footer>

Los elementos <header> y <footer> reemplazan a <div id=”header”> y <div id=”footer”> y generalmente contienen la sección de la cabecera y pié de página del diseño, pero también pueden ser usados como cabecera y/o pié de página de una sección en especial. Estas etiquetas pueden usarse varias veces en un mismo diseño.

<hgroup>

Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1> <h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos, etc para evitar cortar el flujo del esquema del documento.

<nav>

Esta etiqueta esta diseñada para que coloques los menús de navegación ya sea de la página principal o para un artículo en especial.

<section>

Esta etiqueta indica una sección genérica del sitio: La etiqueta <section> es una agrupación temática de contenidos, generalmente con una cabecera.

<article>

Esta etiqueta representa una sección de contenido independiente. Esta etiqueta se utilizaría para respuestas en un foro, artículos en un blog o comentarios de un artículo.

<aside>

Esta etiqueta se utiliza para representar contenido que no este directamente relacionado con el contenido de la página. Por lo general esta etiqueta es utilizada para representar las barras laterales de los blogs.

Cuando necesites una sección con propósitos netamente de posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta <div> en vez de usar las etiquetas mencionadas anteriormente.

Este sería un ejemplo de código web utilizando estás etiquetas:



<body>
<header>
<hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup>
<nav>
<ul>
<li><a href="/enlace1">Enlace 1</a>
<li><a href="/enlace2">Enlace 2</a>
<li><a href="/enlace3">Enlace 3</a>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Título del artículo</h1>
<p>Datos del artículo: autor, fecha, etc.</p>
</header>
<p>Contenido del artículo</p>
</article>
<!--Más artículos -->
</section>
<aside>
Barra lateral
</aside>
<footer>
<p><small>© copyright 2011 Trazos Web</small></p>
</footer>
</body>


8. Hacer contenido editable

Esta característica permite editar cualquier parte del texto contenido dentro del elemento con este atributo. Solo debes añadir:


contenteditable="true"

Al elemento que quieras hacer editable, por ejemplo:


<body>
<h2> Lista </h2>
<ul contenteditable="true">
<li> Elemento #1</li>
<li> Elemento #2
<li> Elemento #3</li>
</ul>
</body>

Hacer que el contenido sea editable

9. Atributo requerido

Ahora los formularios permiten el atributo ‘required‘ para especificar que un campo es requerido.  Esto significa que los datos del formulario no serán enviados si el campo marcado como requerido está vacío. Puedes utilizar este atributo de dos formas:


<input type="text" name="Input1" required>

o


<input type="text" name="Input1" required="required">

10. Campo para email

Si se aplica el tipo email (type=”email”)en un campo de un formulario, el navegador solo permitirá ingresar direcciones de email en dicho campo. Este atributo solo sirve, por ahora, en pocos navegadores.

Un ejemplo sería:


<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />

<button type="submit"> Enviar </button>
</form>
</body>


Campo para email

11. El atributo placeholder

Este atributo permite rellenar el campo con un valor predeterminado y una vez que el usuario hace clic en el campo este valor desaparece. Por el momento, este atributo solo sirve en algunos navegadores.


<input name="email" type="email" placeholder="[email protected]" />


El atributo placeholder

12. Uso de expresiones regulares

Si deseas que  en un campo de un formulario solo se puedan escribir solo un número máximo de caracteres, o solo mayúsculas, etc., esto lo puedes hacer mediante expresiones regulares utilizadas directamente en el código HTML:


<form action="" method="post">
<label for="username">Nombre de Usuario: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Enviar </button>
</form>


El anterior código haría que el campo solo acepte un texto de máximo 10 caracteres, mínimo 4 y solo letras tanto mayúsculas como minúsculas.

13. La etiqueta <mark>

Esta etiqueta sirve para resaltar un texto. Puede ser útil cuando un usuario realiza una búsqueda, para resaltar la palabra o frase buscada en el sitio web:


<h3> Resultados de la búsqueda </h3>
<p>Seguro ya habrás escuchando en los últimos meses del <mark>HTML5</mark>, el nuevo estándar. </p>

La etiqueta <mark>

14. La etiqueta <audio>

Con esta etiqueta puedes añadir audio a tu sitio sin necesidad de plugins. Esta etiqueta permite los codecs de audio ogg (ogg, oga), mp3, wav y AAC, aunque cada navegador soporta diferentes codecs.


<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

La etiqueta <audio>

15. La etiqueta <video>

Esta etiqueta es similar a <audio> solo que permite añadir videos directamente sin necesidad de algún plugin.Esta etiqueta permite los videos con los codecs ogg (ogv), H.264 (mp4), WebM y pues cada navegador soporta diferentes codecs.


<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>

La etiqueta <video>

16. Internet Explorer y HTML5

Desafortunadamente Internet Explorer no entiende los nuevos elementos de HTML5, pero podemos  añadir el script de Remy Sharp que permite solucionar la incompatibilidad de IE6, 7 y 8 con HTML5 y problema solucionado:


<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

17. Crear plantillas con HTML5

Estos son algunos tutoriales para que aprendas a crear desde cero una plantilla con HTML5:

18. Hojas de Referencia (Cheat Sheets) de HTML5

Estas son algunas de las hojas de referencia sobre HTML5 que hay en la Web, contienen todas las nuevas características de HTML5 y una pequeña explicación de estas:

19. HTML5 para principiantes de Armando Sosa

20. Infografía

0 Comentarios en “Tips y recursos para empezar con HTML5”

  • Pingback: Tweets that mention Tips y recursos para empezar con HTML5 | Trazos Web -- Topsy.com()

  • Wow, qué buen post! Mucha información y muy completa. ¡Gracias! 😀

  • Exelente post, solo espero que algún día por fin quede erradicado IE6!!!

  • Muy bueno el articulo 😀 lo recomiendo en twitter

  • WAAAWWWW que articulo tan bueno.
    No solo muy completo sino ademas muy bien explicado, esos detalles de los que hablas que muchos hemos evitado, como en mi caso al seguir con el clasico html4, pero visto de esta manera, ya comenzare a trabajar con HTML5.
    Como siempre lo unico que deja dudas son los usuarios de IE…
    pero bueno pienso que merecen no tener acceso a ciertas paginas… por seguir on IE

  • Cuidado con el HTML5, dicen que va a pasar a ser importante

  • Asi es bolas chinas, todas las modificaciones que trae, va a ser el denotador al cambio.

    De todos modos aprovecho la excelente info que nos han proporcionado, muy buen trabajo.

    Un slaudo

    Gracias

  • Mis webs ya están en HTML5

  • Aquí tienes una web fácil de ver y entender, no entiendo esto de google y su HTML5

  • Cuidado con el HTML5, dicen que va a pasar a ser importante

  • Gracias por el post . Me va avenir muy bien , sobre todo el tema de insertar videos sin necesidad de plugins.

  • sin lugar a dudas html5 ayudara a muchos webmaster a simplificar su trabajo y ofrecer contenidos mas claros y limpio de errores en internet, Explorer anuncio la pronta salida del I9 con soporte para html5.
    buena info, mis saludos.

  • Mi pregunta es, el wordpress actual esta configurado para usar el html5? o eso es solo para paginas Html?

  • Pingback: Guía de HTML5 | Marcofbb()

  • Pingback: HTML5 » Blog Archive » 15 temas gratuitos para WordPress en HTML5()

  • Es casi necesario subirse al carro del HTML5, será un cambio muy importante. El esquema muy bueno, enhorabuena! Pero, no habrá que esperar hasta el 2022, verdad 😉

  • Alejandro Lopez Peñalva

    Estimado Armando, la verdad es que he estado viendo tu video, me parece interesante, me gustaria mantener una conversacion contigo via skype, para ello necesito tu e-mail. Tengo un programa de Tv que trata temas cientificos, tecnologicos, de salud, etc. Espero contestacion, te envio saludos.

  • rimboe

    Hola buenas,

    Os recomiendo www.foroshtml5.com para todos los que queráis aprender y saber más sobre HTML.

    Estan creando una comunidad de habla hispana sobre el tema, es un foro joven que pinta muy bien.

    Saludos!

  • Pingback: peregrinosasantiago.com » Archive » mas!()

  • Pingback: nuevo ost « Ahoren Music()

  • Saludos, buen articulo pero:

    1.- La versión final NO ES para el 2022, es para finales del 2012

    2.- Aunque citas las etiquetas de no se usan, deberías dar detalles de como usarlas ahora, por ejemplo: En lugar de se va a hacer de esta forma…

    Saludos
    Edward Ocando
    Venezuela
    www.SoyDesarrollador.net

  • Html5 no estructuro diferente las paginas porque si, si no por el fomento a la web semantica

  • vennenno

    Sos un capo… buenísima info.

  • Enhorabuena por el artículo, es de gran calidad. Me asusta un poco que esté acabado sobre el 2022 (espero seguir teniendo ganas de estar en esto 🙂 ).

  • Pingback: 99 utilidades HTML5 y CSS3 | ceslava | diseño & cursos()

  • Post de lujo 😉

  • Muchas gracias por el artículo parece bastante sencilla la adaptación al menos con unos ejemplos como los que planteas.
    Gracias

  • Hola.

    muchas gracias por este post, de verdad que HTML5 esta buenazo, las nuevas etiquetas..
    Lo que mas me gusto es que podemos poner grupos de dentro de cada sección.

    podemos tener varios en la web, claro cada uno de manera independiente en cada sección.

    Slds..

  • Muy bueno, gracias!

  • Bastante aceptable el articulo y aun más cuando explican las propiedades del HTML5. Recomendado +1.

  • Gracias por los códigos, estaba actualizando la web y me fueron de mucha ayuda.
    Saludos

  • Muchas gracias por esta aportación, muy útil.

  • Gracias de verdad, nos ha ayudado mucho