Tips y recursos para empezar con HTML5

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:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

1 <!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:

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

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

1 <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:

1 <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:

1 <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:

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

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

1 <link rel="stylesheet" href="stylesheet.css">
2 <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:

1 <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:

1 <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:

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

Después:

1 <link rel="stylesheet" href="stylesheet.css">
2 <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:

01 <body>
02 <header>
03 <hgroup>
04 <h1>Título de la página</h1>
05 <h2>Subtítulo de la página</h2>
06 </hgroup>
07 <nav>
08 <ul>
09 <li><a href="/enlace1">Enlace 1</a>
10 <li><a href="/enlace2">Enlace 2</a>
11 <li><a href="/enlace3">Enlace 3</a>
12 </ul>
13 </nav>
14 </header>
15 <section>
16 <article>
17 <header>
18 <h1>Título del artículo</h1>
19 <p>Datos del artículo: autor, fecha, etc.</p>
20 </header>
21 <p>Contenido del artículo</p>
22 </article>
23 <!--Más artículos -->
24 </section>
25 <aside>
26 Barra lateral
27 </aside>
28 <footer>
29 <p><small>© ShadowMaster</small></p>
30 </footer>
31 </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:

1 contenteditable="true"

Al elemento que quieras hacer editable, por ejemplo:

1 <body>
2 <h2> Lista </h2>
3 <ul contenteditable="true">
4 <li> Elemento #1</li>
5 <li> Elemento #2
6 <li> Elemento #3</li>
7 </ul>
8 </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:

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

o

1 <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:

1 <body>
2 <form action="" method="get">
3 <label for="email">Email:</label>
4 <input id="email" name="email" type="email" />
5
6 <button type="submit"> Enviar </button>
7 </form>
8 </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.

1 <input name="email" type="email" placeholder=igarduno@shadowmaster.com.mx />

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:

01 <form action="" method="post">
02 <label for="username">Nombre de Usuario: </label>
03 <input type="text"
04 name="username"
05 id="username"
06 placeholder="4 <> 10"
07 pattern="[A-Za-z]{4,10}"
08 required>
09 <button type="submit">Enviar </button>
10 </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:

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

<img title=”La etiqueta ” src=”=”http://www.shadowmaster.com.mx/mark-html5.png&#8221; alt=”La etiqueta ” width=”528″ height=”103″ />

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.

1 <audio controls>
2 <source src="demo-audio.ogg" />
3 <source src="demo-audio.mp3" />
4 </audio>

<img title=”La etiqueta ” src=”=”http://www.shadowmaster.com.mx/audio-html5.png&#8221; alt=”La etiqueta ” width=”367″ height=”55″ />

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.

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

<img title=”La etiqueta ” src=”http://www.shadowmaster.com.mx/video-html5.png&#8221; alt=”La etiqueta ” width=”349″ height=”234″ />

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:

1 <!--[if IE]>
3 <![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. Infografía

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s