Está en la página 1de 8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

Inicio Sobre Nosotros Aydanos a mejorar Contacto


Buscar

General Herramientas Aprender HTML Aprender CSS Aprender PHP Aprender SQL Aprender JavaScript

Novedades del HTML5

27 de febrero de 2013 YoNoProgramo 1 En este artculo voy a hablar de las novedades, mejoras y cambios que trajo HTML en su ltima versin, HTML5. Cambios muy importantes a tener en cuenta a la hora de aprender a programar. Ha pasado tiempo desde que se empez a trabajar con ella, pero no est de ms recordarlo para aquellos que an tengan pendientes cambios en su pgina web, as como para que aquellos que ahora mismo estn aprendiendo sepan identificar un cdigo obsoleto al verlo. Fueron muchos los cambios y muchas las etiquetas que sufrieron cambios, ya sea modificndose para hacerlas ms sencillas al uso o bien eliminndolas o cambindolas por otras; adems se han crearon de otras muchas nuevas.

www.yonoprogramo.com/novedades-de-html5/

1/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

HTML5 A continuacin veremos una lista con los cambios ms importantes :


Novedades HTML5
1.- Nuevo Doctype 2.- Cambios en la llamada de elementos Script y Link 3.- Uso de comillas 4.- Nuevas etiquetas para la estructura 5.- Etiquetas de vdeo y audio 6.- Autofocus en formularios 7.- Placeholder en formularios 8.- strong>Validacin de campos en formulario 9.- Contenido editable en formularios 10.- Ms tipos de campos en formularios 11.- Canvas

Haz clic en Leer ms para conocer detalladamente y con ejemplos dichos cambios.

1. Nuevo Doctype

Ir arriba

Antes de la aparicin del HTML, el funcionamiento del Doctype era muy complejo, veamos como era su declaracin:
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Con HTML5 la declaracin de este Doctype se ha simplificado muchsimo, hacindonos posible memorizarla:
1 <!DOCTYPE html>

2. Cambios en la llamada de elementos Script y Link


En las etiquetas link y script ya no es necesario hacer uso del atributo type, haciendo ms sencilla la llamada a archivos .css y .js; s que es necesario el atributo rel en el caso de los archivos .css:
1 2 <link rel="stylesheet" href="estilo.css" /> <script src="funciones.js"></script>

3. Uso de comillas
Con la aparicin del HTML5 no ser necesario poner comillas dobles en el valor de los atributos:
www.yonoprogramo.com/novedades-de-html5/ 2/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

<p id=id_parrafo</p>

El omitir las comillas no es una norma, si no una posibilidad.

4. Nuevas etiquetas para la estructura


Hasta la aparicin del HTML5 la estructura de nuestra pgina web era diseada haciendo uso de capas o DIVs, al menos por norma general, de la siguiente manera:
1 2 3 4 <div <div <div <div id="cabecera"></div > id="menu"></div > id="contenido"></div > id="pie"></div >

Ahora nos es posible hacer uso de etiquetas estndar para montar la estructura de nuestra pgina web, hacindonos el trabajo ms fcil; an y as navegadores anteriores a los actuales, como Internet Explorer 6, 7 y 8 no lo soportan:
1 2 3 4 5 6 7 <header ></header > <nav ></nav > <article > <section ></section > </article > <aside ></aside > <footer ></footer >

5. Etiquetas de vdeo y audio


En HTML5 encontramos estandarizado el uso de audio y vdeo, con 2 nuevas etiquetas. Funcionamiento de la etiqueta vdeo:
1 2 3 4 5 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.mp4" type="video/ogg"> Tu navegador no soporta la etiqueta video. </video >

Puedes encontrar ms informacin en W3Schools.


www.yonoprogramo.com/novedades-de-html5/ 3/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

Funcionamiento de la etiqueta audio:


1 2 3 4 5 <audio controls> <source src="rabbit.mp4" type="audio/ogg"> <source src="rabbit.mp4" type="audio/mpeg"> Tu navegador no soporta la etiqueta audio. </audio >

Puedes encontrar ms informacin en W3Schools.

6. Autofocus en formularios
Otra caracterstica importante es la creacin del atributo autofocus para los formularios. Muy til para nuestra pgina de contacto, por ejemplo. Veamos como funciona, muy sencilla:
1 <input name="campo-texto" type="text" autofocus />

7. Placeholder en formularios
Este atributo nos permitir que, por defecto, aparezca un texto en nuestro campo de formulario, de modo que cuando nos hagamos clic sobre l y empecemos a escribir, ste desaparecer sin necesidad de borrarlo previamente:
1 <input name="campo-nombre" type="text" placeholder="Introduce tu nombre" />

8. Validacin de campos en formulario


Una gran mejora por parte de HTML en esta nueva versin, que nos permite validar el campo, de modo que ser obligatorio introducir un valor en l. Nos facilita mucho las cosas haciendo que no sea necesario el uso de PHP para esta comprobacin:
1 <input name="campo-texto" type="text" required />

9. Contenido editable en formularios


Cualquier contenido puede ser ahora editable, vemos el ejemplo de un prrafo, pero es tambin aplicable a ttulos o listas, por ejemplo:
1 <p contenteditable="true">Prrafo con contenido editable</p >

10. Ms tipos de campos en formularios


HTML5 nos ofrece nuevos campos para nuestros formularios, como son number, date, url, tel o email:
1 2 3 4 5 6 7 <form> <input <input <input <input <input </form> type="number" /> type="date" /> type="url" /> type="tel" /> type="email" />

11. Canvas
www.yonoprogramo.com/novedades-de-html5/ 4/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

ste es posiblemente el cambio ms importante respecto a HTML4/xHTML. Nos permite dibujar grficos sobre un texto plano haciendo uso de JavaScript. Puesto que su informacin y uso es muy extenso podemos conocer ms informacin al respecto en W3Schools.
2
Me gusta

Categora: HTML Etiquetas: aprender a programar, html, html5, novedades

0 comentarios Deja un mensaje...


El mejor Comunidad Compartir

An no ha comentado nadie.

Fe e d d e co m e n ta ri o s

Su s cri b i rs e va co rre o

Sguenos en

Seguir a @YoNoProgram o Me gusta A 12 personas les gusta esto. S el primero de tus amigos.

Estamos en

Seguir a

Categoras
www.yonoprogramo.com/novedades-de-html5/ 5/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

PHP Curso (5) General (3) HTML (2) HTML Curso (20) CSS (2) Herramientas (1) Herramientas Curso (6)

Publicidad

Enlaces de inters
> Guarida Friki

ltimas entradas
Variables PHP Introduccin al PHP Captulo 1 Introduccin al CSS Qu necesitamos? Introduccin al PHP Sintaxis PHP Introduccin al PHP Prctica HTML (III) Crea tu propio sitio web CSSmatic Herramientas CSS para diseadores web Qu es PHP? Introduccin al PHP Captulo 1 Introduccin al PHP Captulo 8 Formularios Xampp Servidor Web Local

ltimos comentarios

Arturo
www.yonoprogramo.com/novedades-de-html5/ 6/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

Muy didctico, excelente... Cmo funciona? Introduccin al HTML 1 day ago

Anonimo Hola, a mi me gustara saber si... Aprender HTML 2 days ago

Jan Solo tienes enlazados DOCTYPE... Captulo 2 Estructura del HTML 4 days ago

Fernando Falta mucho? :-) Aprender JavaScript 1 month ago

Josue Gonzalez Gracias por la info... voy... DOCTYPE Estructura del HTML 2 months ago

Ivn Delgado Garca Os sigo en G+ que seguramente...

www.yonoprogramo.com/novedades-de-html5/

7/8

19/07/13

Novedades HTML5 - Aprender HTML - Yo No Programo

Bienvenidos a Yo No Programo 3 months ago

Archivo
abril 2013 (8) marzo 2013 (14) febrero 2013 (17)

Tecnologas

2013 Yo No Programo. Todos los derechos reservados.

www.yonoprogramo.com/novedades-de-html5/

8/8