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:
Excelente post Josué, como siempre hermano! Saludos desde Venezuela.
Éstos 10 se pueden usar ahora mismo… ¿eso significa que incluye el uso en navegadores viejos como IE 6 y 7? Es decir, se pueden usar ahora ¿en qué navegadores? ¿Ninguno da error o alguna complicacion?
Solo los navegadores modernos(Firefox, Chrome, Safari e IE9) soportan HTML5 en su totalidad.
¿Y cómo se verÃa una web con contenido html5 en los navegadores anteriores a los actuales?
¿SerÃa como con el css3? Ejemplo: si pones vértices redondos, los navegadores que soporten css3 los representarán, pero si son viejos, no lo harán pero se seguirá mostrando ese contenedor con los vértices rectos.
¿Sucede algo parecido con el html5? Me gustarÃa cambiar el código de mi web o crear una nueva con esta versión pero tengo esa incertidumbre sobre cómo se verÃa una web en navegadores que no soporten html5.
Saludos
Creo que te refieres a los elementos que puse como ‘semánticos’, pues para que sean compatibles con navegadores antiguos tienes que definirlos como display: block en el CSS:
header, nav, section, aside, footer{
display: block;
}
Pero en el caso de IE(6, 7 y 8) tenemos que ademas usar Javascript para asegurarnos de que estos elementos ‘existan’:
Aunque ahora hay un plugin que se llama HTML5Shiv, basta con incluirlo de esta forma:
Interesante. Muchas gracias. A ver si me pongo.
hola que genial post muchas gracias 😀 siempre aprendo algo nuevo aqui 😀
estoy suscrito como le ago para poner una imagen mia? o editar perfil o algo asi? jeje ^^
Son Gravatars, create uno en Gravatar.com es supersencillo.
Excelente artÃculo!!!!! Una asignatura pendiente y que estoy loco por empezar, es buscar la info para comenzar a aprender HTML5. Lamentablemente por tiempo no he podido. Eso hasta que llegue a este fantástico artÃculo tuyo. Hiper práctico y sencillo, la pincelada justa para introducirnos altiro en las poderosas herramientas que por lo visto trae este nuevo HTML para quienes nos dedicamos al desarrollo web.
Muchas gracias por tan genial artÃculos y un gran saludo a la distancia de un hermano chileno!
Gracias a ti por pasar y por tan elaborado comentario!
Muy buen articulo. Los elementos semánticos funcionan en navegadores antiguos?
Si funcionan, si incluyes un código como este, que se encargara de crear estos elementos que no existen en esos navegadores:
Disculpa pero como se podria hacer el que el autofocus se active despues de haber enviado el formulario
Eso lo tendrÃas que hacer con jQuery: http://api.jquery.com/focus/
Donde tendrÃa que ubicar este codigo exactamente? en cualquier lugar del head? eso te falto aclarar, lamentablemente de las cosas que acá se ven algunas funcionan y otras no en los últimos navegadores, esperemos que se actualizen pronto para soportarlo U.u
Me referÃa al HTML5 Shiv ! xD
Si, va en el head
Hola, no soy muy bueno programando web, le eche un vistazo a todo lo que has publicado y es excelente, encontré lo que buscaba, pero me gustarÃa saber si no me puedes ayudar con guardar sesión en una pagina y el usuario pueda continuar donde se quedo, espero me aya explicado, saludos.
Hola amigos, muy bueno el artÃculo. A continuación adjunto un post complementario que explica cómo validar formularios HTML5 y hacerlo compatible en todos los navegadores. Saludos y ánimo con el blog!
http://programarivm.com/2012/01/mi-primera-web-en-html5-iv-validacion-de-formularios-inteligentes-compatible-con-todos-los-navegadores-gracias-a-modernizr/
Excelente ArtÃculo Josué, me fué muy util. Gracias!!!
Muy buen material!
Buena descripcion
La compartÃ, excelente los tips