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>
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>
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="dacj@trazos-web.com" />
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>
<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>
<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>
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:
- HTML5 & CSS3: Las tecnicas que pronto vas a utilizar.
- Diseñando un blog con HTML5.
- Codificar una plantilla en HTML5 desde cero.
- Crea un sitio web elegante con HTML5 y CSS3.
- Codificando un plantilla en HTML5 & CSS3 de un sitio web de una sola página.
- Codifica un portafolio con HTML5 & CSS3.
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:
- HTML5 Visual Cheat Sheet.
- HTML5 Cheat Sheet (PDF).
- HTML5 Pocket Book.
- HTML5 Canvas Cheat Sheet.
- HTML5 Quick Reference Guide.
- HTML5: New Standars por Web Interactivity.
febrero 1st, 2011 a las 6:10 AM
Wow, qué buen post! Mucha información y muy completa. ¡Gracias!
febrero 1st, 2011 a las 10:37 AM
Exelente post, solo espero que algún día por fin quede erradicado IE6!!!
febrero 1st, 2011 a las 5:40 PM
Muy bueno el articulo
lo recomiendo en twitter
febrero 1st, 2011 a las 7:02 PM
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
febrero 16th, 2011 a las 11:32 AM
Cuidado con el HTML5, dicen que va a pasar a ser importante
febrero 16th, 2011 a las 2:11 PM
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
febrero 16th, 2011 a las 2:35 PM
Mis webs ya están en HTML5
febrero 16th, 2011 a las 2:42 PM
Aquí tienes una web fácil de ver y entender, no entiendo esto de google y su HTML5
febrero 17th, 2011 a las 5:17 AM
Cuidado con el HTML5, dicen que va a pasar a ser importante
febrero 19th, 2011 a las 4:58 PM
Gracias por el post . Me va avenir muy bien , sobre todo el tema de insertar videos sin necesidad de plugins.
febrero 20th, 2011 a las 10:42 AM
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.
marzo 30th, 2011 a las 2:29 PM
Mi pregunta es, el wordpress actual esta configurado para usar el html5? o eso es solo para paginas Html?
mayo 6th, 2011 a las 3:59 AM
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
junio 15th, 2011 a las 7:41 PM
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.
julio 24th, 2011 a las 3:46 PM
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!
octubre 14th, 2011 a las 1:13 PM
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
noviembre 15th, 2011 a las 9:59 PM
Html5 no estructuro diferente las paginas porque si, si no por el fomento a la web semantica
diciembre 1st, 2011 a las 12:20 PM
Sos un capo… buenísima info.
enero 9th, 2012 a las 2:24 PM
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
).