Novedades de HTML5

Versión para impresión
Novedades de HTML5

Resumen de novedades

HTML5

  • <!DOCTYPE> más simple.
  • Se eliminan etiquetas y parámetros que se usaban para dar formato.
  • Nuevas etiquetas con carácter semántico y para estructurar.
  • Incorporación de elementos multimedia sin necesidad de plugins, con las etiquetas <audio> y <video>
  • Dibujo 2D y 3D con la etiqueta <canvas>
  • Formularios que admiten validación de datos o que incluyen nuevos elementos (por ejemplo, calendario para introducir fechas).

CSS3

  • bordes redondeados;
  • sombras;
  • tipografías más allá de las stándar;
  • texto en varias columnas;
  • degradados;
  • fondos múltiples;
  • transparencias;
  • transformaciones (por ejemplo rotaciones);
  • transiciones de elementos sin utilizar Javascript.

Aplicaciones JavaScript

  • Geolocalización
  • Web Storage sin necesidad de cookies externas al navegador;
  • Drag&drop (arrastrar y soltar).

Información adicional:
Las 15 APIS más populares de HTML5

Listado de etiquetas: nuevas, modificadas y obsoletas

Etiqueta Atributos de la etiqueta Comentarios
<!-- --> Estándar o ninguno  
<!DOCTYPE> Estándar o ninguno  
<a> href | target | rel | hreflang | media | type Atributo añadido: media
Atributo cambiado: target
<abbr> title  
<acronym>   Etiqueta Eliminada
<address> Estándar o ninguno  
<applet>   Etiqueta eliminada
<area> Estándar o ningunos  
<article> Atributos globales Nueva etiqueta
<aside> Atributos globales Nueva etiqueta
<audio> autobuffer | autoplay | controls | loop | src Nueva etiqueta
<b> Atributos globales Etiqueta cambiada
<base> Estándar o ninguno  
<basefont>   Etiqueta eliminada
<bdo> Estándar o ninguno  
<big>   Etiqueta eliminada
<blockquote> Estándar o ninguno  
<body> Estándar o ninguno  
<br> Estándar o ninguno  
<button> Estándar o ninguno  
<canvas> height | width Nueva etiqueta
<caption> Estándar o ninguno  
<center>   Etiqueta eliminada
<cite> Atributos globales Etiqueta cambiada
<code> Estándar o ninguno  
<col> Estándar o ninguno  
<colgroup> Estándar o ninguno  
<datalist> Atributos globales Nueva etiqueta
<dd> Estándar o ninguno  
<del> Estándar o ninguno  
<details> open Nueva etiqueta
<dialog> Atributos globales Nueva etiqueta
<dir>   Etiqueta eliminada
<div> Estándar o ninguno  
<dfn> Estándar o ninguno  
<dl> Estándar o ninguno  
<dt> Estándar o ninguno  
<em> Estándar o ninguno  
<embed> height | src | type | width Nueva etiqueta
<fieldset> Estándar o ninguno  
<figure> Atributos globales Nueva etiqueta
<font>   Etiqueta eliminada
<footer> Atributos globales Nueva etiqueta
<form> Estándar o ninguno  
<frame>   Etiqueta eliminada
<frameset>   Etiqueta eliminada
<h1>... <h6> Estándar o ninguno  
<head> Estándar o ninguno  
<header> Atributos globales Nueva etiqueta
<hgroup>   hgroup se añadió a la especificación HTML5, pero ahora está obsoleta. Usar <header>
<hr> Ninguno Etiqueta cambiada
<html> Estándar o ninguno  
<i> Ninguno Etiqueta cambiada
<iframe> Estándar o ninguno  
<img> Estándar o ninguno  
<input> accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width Etiqueta cambiada: Añadidos 13 elementos a type
<ins> Estándar o ninguno  
<isindex>   Etiqueta eliminada
<kbd> Estándar o ninguno  
<label> Estándar o ninguno  
<legend> Estándar o ninguno  
<li> Estándar o ninguno  
<link> Estándar o ninguno  
<mark> Atributos globales Nueva etiqueta
<map> Estándar o ninguno  
<menu> Estándar o ninguno  
<meta> Estándar o ninguno  
<meter> high | low | max | min | optimum | value Nueva etiqueta
<nav> Atributos globales Nueva etiqueta
<noframes>   Etiqueta eliminada
<noscript> Estándar o ninguno  
<object> Estándar o ninguno  
<ol> Estándar o ninguno  
<optgroup> Estándar o ninguno  
<option> Estándar o ninguno  
<output> form Nueva etiqueta
<p> Estándar o ninguno  
<param> Estándar o ninguno  
<pre> Estándar o ninguno  
<progress> max | value Nueva etiqueta
<q>    
<ruby> cite Nueva etiqueta
<rp> Atributos globales Nueva etiqueta
<rt> Atributos globales Nueva etiqueta
<s>   Etiqueta eliminada
<samp> Estándar o ninguno  
<script> Estándar o ninguno  
<section> cite Nueva etiqueta
<select> Estándar o ninguno  
<small> Atributos globales Etiqueta Cambiada
<source> media | src | type Nueva etiqueta
<span> Estándar o ninguno  
<strike>   Etiqueta eliminada
<strong> Estándar o ninguno  
<style> Estándar o ninguno  
<sub> Estándar o ninguno  
<sup> Estándar o ninguno  
<table> Estándar o ninguno  
<tbody> Estándar o ninguno  
<td> Estándar o ninguno  
<textarea> Estándar o ninguno  
<tfoot> Estándar o ninguno  
<th> Estándar o ninguno  
<thead> Estándar o ninguno  
<time> datetime | pubdate Nueva etiqueta
<title> Estándar o ninguno  
<tr> Estándar o ninguno  
<tt>   Etiqueta eliminada
<u> Define texto que debe tener un estilo diferente del texto normal  
<ul> Estándar o ninguno  
<var> Estándar o ninguno  
<video> src | poster | autobuffer | autoplay | loop | controls | width | height Nueva etiqueta
<xmp>   Etiqueta eliminada

Nota: los colores utilizados en la tabla indican:

Etiquetas que no sufren cambios respecto a la anterior versión
Etiquetas que han sufrido algún cambio
Etiquetas que han sido eliminadas en la nueva versión
Etiquetas introducidas en la nueva versión
Etiquetas que fueron eliminadas de la especificación HTML5

Fuente:
es.wikipedia.org/wiki/HTML5

Información adicional:
www.w3schools.com/tags/default.asp

Sintaxis

Se recomienda usar minúsculas, aunque es indiferente cómo se escriban etiquetas y atributos.

Diferencias con XHTML:

Etiquetas

Una etiqueta se considera cerrada cuando aparece una del mismo tipo, y a diferencia de XHTML, no es necesario cerrarlas (pero sí es recomendable, así nos quedará claro dónde terminan). Podríamos poner por ejemplo:

<ul>
    <li>ítem
    <li>ítem
</ul>

Atributos

El valor de un atributo va entre comillas, aunque si dicho valor no tiene espacios en blanco no es necesario poner las comillas. Por ejemplo:

<iframe width=50>

Los atributos booleanos tienen el valor de "false" si no se ponen. Cuando se ponen el valor es "true", y por eso se recomienda que se simplifique poniendo sólo el nombre del atributo:

<video controls>

equivaldría a:

<video controls="true">

Los atributos sin valor se pueden dejar en blanco:

<input disabled>

En lugar de:

<input disable="">

Se suelen omitir los parámetros que tienen valores por defecto, como:

<style type="text/css"></style>

Que pasaría a:

<style></style>
Guía de estilo para HTML5 recomendada por w3school

https://www.w3schools.com/html/html5_syntax.asp

Novedades del <head>

Tipo de documento

La declaración del tipo de documento se simplifica bastante:

<!DOCTYPE html>

<meta>

Nuevo parámetro charset para la etiqueta <meta>. Indica la codificación de caracteres:

<meta charset="utf-8">

Más información sobre codificación:
http://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres

<style> y <script>

Los parámetros que tienen valores por defecto, como:

<style type="text/css"></style>
<script type="text/javascript"></script>

Pasarían a:

<style></style>
<script></script>

Más información:

https://www.w3.org/TR/html51/syntax.html

Estructura semántica

HTML5 incluye varias etiquetas para estructurar semánticamente a los contenidos, como por ejemplo header, nav, article o section.

Para más información ver el capítulo Estructura semántica de HTML5.

Etiquetas para textos

<wbr>

Salto de línea condicional, para romper la línea en donde queramos si no cabe en el navegador.

Por ejemplo, puede ser útil en rutas largas:

<a href="http://www.w3schools.com/<wbr />tags/default.asp">texto enlace<a>

Quedaría:

<a href="http://www.w3schools.com/tags/default.asp">texto enlace<a>

<hr>

Es la barra que siempre ha tenido html. Ahora tiene un significado semántico, la de separar contenidos temáticos.

<mark>

Resalta un texto, como si lo marcásemos con un rotulador. Puede ser útil para resaltar los resultados de las búsquedas.

Quedaría:

Este párrafo está resaltado con la etiqueta <mark> de HTML5

<time>

Indica horas y fechas, y permite a los buscadores indentificar las fechas. Admite varios atributos:

pubdate
Si se añade, indica que la fecha se refiere a la publicación del artículo más cercano o la de la propia página web.
datetime
Para indicar la fecha en sí misma.

Por ejemplo:

<p> Esto se escribió el <time datetime="2013-03-04T12:53"> cuatro de marzo de dosmiltrece</time>. </p>

Atributos globales: novedades

contenteditable

Hace que el contenido de un elemento sea editable. Por ejemplo:

<p contenteditable>este texto es editable</p>

Demostración:

Cambia este texto si quieres.

spellcheck

Hace que un contenido sea analizado por el corrector otográfico. Se puede utilizar junto con el parámetro anterior, o en campos de texto y área de texto de formularios. En dichas casillas de formulario, el valor por defecto es "true".

<p contenteditable spellcheck="false">¡Biba la hortojrafia!</p>

¡Biba la hortojrafia!

hidden

Sirve para ocultar elementos. Por ejemplo:

<img src="logoHTML5.jpg" hidden />

Demostración:

Más atributos globales en: http://www.w3schools.com/tags/ref_standardattributes.asp

Multimedia

HTML5 incluye etiquetas para audio, vídeo y gráficos vectoriales svg. Además, con la etiqueta canvas se pueden realizar gráficos 2D y 3D, y animaciones, mediante JavaScript.

Para más información ver Contenidos multimedia de HTML5.

Categorías: