En este artículo voy a hablar de las novedades, mejoras y cambios que trajo HTML en su última versión, HTML5.
Cambios muy importantes a tener en cuenta a la hora de aprender a programar.
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 más recordarlo para aquellos que aún tengan pendientes cambios en su página web, así como para que aquellos que ahora mismo están aprendiendo sepan identificar un código obsoleto al verlo.
Fueron muchos los cambios y muchas las etiquetas que sufrieron cambios, ya sea modificándose para hacerlas más sencillas al uso o bien eliminándolas o cambiándolas por otras; además se han crearon de otras muchas nuevas.
A continuación veremos una lista con los cambios más 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 vídeo y audio
- 6.- Autofocus en formularios
- 7.- Placeholder en formularios
- 8.- strong>Validación de campos en formulario
- 9.- Contenido editable en formularios
- 10.- Más tipos de campos en formularios
- 11.- Canvas
Haz clic en Leer más para conocer detalladamente y con ejemplos dichos cambios.
1. Nuevo Doctype
Antes de la aparición del HTML, el funcionamiento del Doctype era muy complejo, veamos como era su declaración:
1
2
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
Con HTML5 la declaración de este Doctype se ha simplificado muchísimo, haciéndonos 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 más 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 aparición del HTML5 no será necesario poner comillas dobles en el valor de los atributos:
1
| <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 aparición del HTML5 la estructura de nuestra página web era diseñada haciendo uso de capas o DIVs, al menos por norma general, de la siguiente manera:
1
2
3
4
| <div id="cabecera"></div><div id="menu"></div><div id="contenido"></div><div id="pie"></div> |
Ahora nos es posible hacer uso de etiquetas estándar para montar la estructura de nuestra página web, haciéndonos el trabajo más fácil; aún 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 vídeo y audio
En HTML5 encontramos estandarizado el uso de audio y vídeo, con 2 nuevas etiquetas.
Funcionamiento de la etiqueta vídeo:
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 más información en W3Schools.
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 más información en W3Schools.
6. Autofocus en formularios
Otra característica importante es la creación del atributo autofocus para los formularios. Muy útil para nuestra página 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. Validación de campos en formulario
Una gran mejora por parte de HTML en esta nueva versión, 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 comprobación:
1
| <input name="campo-texto" type="text" required /> |
9. Contenido editable en formularios
Cualquier contenido puede ser ahora editable, vemos el ejemplo de un párrafo, pero es también aplicable a títulos o listas, por ejemplo:
1
| <p contenteditable="true">Párrafo con contenido editable</p> |
10. Más 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 type="number" /> <input type="date" /> <input type="url" /> <input type="tel" /> <input type="email" /></form> |
11. Canvas
Éste es posiblemente el cambio más importante respecto a HTML4/xHTML.
Nos permite dibujar gráficos sobre un texto plano haciendo uso de JavaScript.
Nos permite dibujar gráficos sobre un texto plano haciendo uso de JavaScript.
Puesto que su información y uso es muy extenso podemos conocer más información al respecto en W3Schools.
No hay comentarios:
Publicar un comentario