Esta es una recopilación de 10 nuevos elementos de HTML5 que puedes empezar a usar ahora mismo.
1. Nuevo Doctype
Lo primero que esta en toda pagina web, el doctype, es hora ya de cambiar ese antiguo, largo e inmemorizable doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Por el nuevo corto y simple doctype de HTML5:
<!DOCTYPE html>
2. Elementos <script> y <link> mas simples
En HTML5 ya no es necesario usar el atributo type cuando llamamos archivos .css o .js:
<link rel="stylesheet" href="estilos.css" type="text/css" />
<script type="text/javascript" src="funciones.js"></script>
Sin embargo aun es necesario declarar un rel en el caso de los estilos:
<link rel="stylesheet" href="estilos.css" />
<script src="funciones.js"></script>
3. Las comillas en HTML5
En HTML5 ya no es necesario que los atributos de los elementos esten envueltos entre comillas, ahora podemos declararlos asi:
<p class=parrafo id=contenido>Lorem ipsum dolor sit amet</p>
4. Elementos mas semánticos
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
El código anterior puede ser reemplazado por los nuevos elementos header y footer de HTML5:
<header></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
Hay que notar que una pagina web puede tener multiples de estos elementos, por ejemplo puede haber un header para la pagina entera y un header para cada articulo en el caso de un blog y lo mismo con el footer.
Nota: estos elementos no son soportados nativamente en navegadores antiguos como IE 6, 7 y 8, para hacer que sean compatibles puedes usar HTML5 Shiv, un minúsculo archivo JS que se encarga de ‘crear’ estos elementos que no existen en navegadores antiguos:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
5. Contenido editable
Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos(párrafos, listas, títulos, etc) sea editable en el mismo navegador, por ejemplo un párrafo:
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
</p>
6. Placeholders en campos de textos
Placeholders se les conoce al texto que se esta en los campos de textos cuando estos no están activos, antes de HTML5 habia que usar algo de Javascript para lograr este efecto, pero ahora ya casi todos los navegadores soportan esta nueva facultad:
<input name="username" type="text" placeholder="Ingrese su username" />
7. Validación nativa en HTML5
En HTML5 podemos declarar el atributo required en los campos de un formulario que queremos que sean obligatorios de rellenar:
<form method="post" action="">
<input type="text" required>
<button>Enviar</button>
</form>
Este atributo es soportado solo por las ultimas versiones de navegadores.
8. Autofocus
HTML5 introduce tambien el atributo autofocus para campos de formulario, esta facultad hace que al cargar la pagina el foco del usuario se concentre en el campo de texto deseado, ideal para el campo de búsqueda de una pagina web:
<input type="text" autofocus> <button>Buscar</button>
9. Tipos específicos de campos de formulario
Si declaramos type=»number» a un campo de texto, este solo permitira que se ingresen numeros:
<form>
<input type="number" />
<button type="submit">Enviar</button>
</form>
Lo mismo para fechas:
<form>
<input type="date" />
<button type="submit">Enviar</button>
</form>
Y para URLs y emails:
<form>
<input type="url" />
<input type="email" />
<button type="submit">Enviar</button>
</form>
10. Canvas
Canvas, es sin duda alguna uno de los elementos mas interesantes que introduce HTML5, el canvas es un plano vacío en el cual podemos dibujar graficos con la ayuda de Javascript:
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<canvas id="micanvas">Tu navegador no soporta canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById('micanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#b8dc69';
ctx.fillRect(0,0,200,200);
</script>
</body>
</html>
Resultado:
