Esta es una recopilación de algunos de los nuevos elementos de HTML5 que puedes encontrarte en la nueva versión de HTML5
1. Elementos <script> y <link> mas simples
En HTML5 ya no es necesario usar el atributo type cuando declaramos los archivos .css o .js:
<link rel=\"stylesheet\" href=\"estilos.css\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"funciones.js\"></script>
<link rel=\"stylesheet\" href=\"estilos.css\" />
<script src=\"funciones.js\"></script>
2. Nuevo Doctype
La definición del tipo de documento, el doctype, también ha modificado su formato por uno más sencillo e intuitivo:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
3. Mayor elementos semánticos
<div class=\"header\">
</div><div class=\"nav\">
</div><div class=\"content\">
</div><div class=\"sidebar\">
</div><div class=\"footer\">
</div><header>></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>4. Las comillas en HTML5
En HTML5 ya no es necesario que los atributos de los elementos esten encerrados entre comillas, ahora se pueden declarar de la siguiente forma:
<p class=parrafo id=contenido>Esto es un ejemplo de contenido</p>5. Nuevas etiquetas para HTML5
Desaparecen las etiquetas como <embed> y <object> a la hora de incluir audio, animaciones flash y video. Para ello, en la nueva versión HTML5, disponemos de dos nuevas etiquetas <audio> y <video>, así como otra etiqueta <canvas>, que nos permite trabajar con gráficos y animaciones.
6. Nuevas APIS
El nuevo lenguaje HTML5 incorpora nuevas APIS que nos permiten trabajar con bases de datos en local, interactuar por parte del usuario final con distintos elementos de la interfaz (arrastrar y soltar) , mejoras en la Geolocalización, entre otros.
7. Contenido editable
Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos(párrafos, listas, títulos, entre otros) sea editable en el mismo navegador:
<p contenteditable=\"true\">
Esto sería un ejemplo de texto editable.
</p>
8. Validación nativa 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>
9. Autofocus
HTML5 introduce el atributo autofocus para campos de formulario, esta propiedad hace que al cargar la pagina el foco del usuario se centre en el campo de texto deseado, ideal para los campo de búsqueda de una pagina web:
<input type=\"text\" autofocus>
<button>Buscar</button>
10.Canvas
Canvas, es sin lugar a dudas, 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:
<!DOCTYPE html>
<html>
<body>
<canvas id=\"mycanvas\">Tu navegador no soporta canvas</canvas>
<script type=\"text/javascript\">
var canvas=document.getElementById(\'mycanvas\');
var ctx=canvas.getContext(\'2d\');
ctx.fillStyle=\'#ffffff\';
ctx.fillRect(100,100,200,200);
</script>
</body>
</html>
<!--[if lt IE 9]>
<script src=\"//html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<![endif]-->
Más de 10 años trabajando en proyectos SEO donde he conseguido aumentar las ventas a +100 empresas en más de 10 sectores distintos.
