DIFERENCIAS ENTRE

HTML Y HTML5

Noelia
12/02/2013
 Índice
Tabla comparativa…………………………………………………………………………………………………………………….3

Atributos globales…………………………………………………………………………………………………………………….4

Nuevas etiquetas................................................................................................................8

Canvas…………………………………………………………………………………………………………………………………….12

Tabla de etiquetas………………………………………………………………………………………………………………….13

Diferencia estructural………………………………………………………………………………………………………..…..19

Link de interés………………………………………………………………………………………………………………………..20
Tabla comparativa.

HTML HTML 5
Declaración DOCTYPE: Declaración: DOCTYPE
! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD <! DOCTYPE html>
HTML 4.01 / / EN"
"http://www.w3.org/TR/html4/strict.dtd">
Audio y Video no forman parte de la Audio y videos son partes integradas de las
especificación HTML. especificaciones de HTML5, por ejemplo las
etiquetas <audio> y <video>.
Vector Graphics se hece posible con la ayuda de Los gráficos vectoriales son partes integradas de
tecnologías como VML, Silverlight, Flash, etc HTML5, por ejemplo, SVG y lona
Es casi imposible conseguir una verdadera JS API de geolocalización HTML5 ayuda a
GeoLocation de usuario navegar por cualquier identificar la ubicación del usuario navegar
sitio, especialmente si se trata de dispositivos cualquier sitio web (proporcionado por el usuario
móviles. lo permite)
Caché del navegador puede ser utilizado como Memoria caché de aplicaciones, base de datos
almacenamiento temporal. SQL y almacenamiento Web está disponible como
almacenamiento del lado del cliente. Accesible a
través de la interfaz JavaScript en los navegadores
compatibles con HTML5.
Sockets Web no están disponibles. En general, los Se pueden establecer canales de comunicación
mecanismos utilizados son encuestas largas y full duplex con el servidor usando Web Sockets.
streaming. Accesibles usando la interfaz JavaScript en
navegadores que soporten HTML5.

Funciona con todos los navegadores antiguos La mayoría de los navegadores modernos han
empezado a soportar HTML5 por ejemplo, Firefox,
Mozilla, Opera, Chrome, Safari, etc

No se permite JavaScript para funcionar en el Permite JavaScript para funcionar en background.

navegador. JS se ejecuta en el mismo hilo que la Esto es posible debido a JS trabajador API Web en
interfaz del navegador. HTML5
Atributos globales.

accesskey

Lo que permite es una mejora en la accesibilidad del sitio, pudiendo llegar a esa zona de la página
pulsando una letra o número del teclado.
Un ejemplo podría ser el de un enlace o el de un cajetín de un formulario:

 <a accesskey="A" href="http://example.com/">Ejemplo</a>

 <label>buscador: <input type="search" name="q" accesskey="b"></label>
Para el primer caso, el usuario debería usar la combinación de teclas Control + Alt + A para acceder a
esta tecla. De todas formas, cada navegador puede tener su propia combinación de teclas.

class

El atributo class básicamente se usa para lo que siempre se ha utilizado, y es para controlar las hojas de
estilo. Dentro de un class se pueden poner varios contenidos haciendo referencia a los correspondientes
en la hoja de estilos.

 <a class="enlace" href="http://example.com/">Ejemplo</a>

En este caso, si tuviéramos una definición del estilo “enlace” en el CSS, se aplicaría en este caso.

contenteditable

Este es uno de los nuevos atributos que aparece, y permite que un acceso externo deje o no editar o
cambiar el contenido de una etiqueta. Es un elemento heredado de los padres, por lo que si un padre no
se puede editar, los hijos tampoco.
Al ser un elemento booleano, sólo es necesario ponerlo con un “true” o “false” para que funcione.

 <div contenteditable="false">Este contenido no debería ser editable desde el exterior...</div>

contextmenu

El atributo contextmenu le permite mostrar un menú sin ocupar el valioso espacio de interfaz de usuario
para el menú. Se trata de un menú que se activa en los eventos, como mouseup o keyup
proporcionando un menú burbuja que proporciona opciones y acciones basadas en las selecciones.

dir

El atributo dir básicamente indica la dirección del texto, o, mejor dicho, de escritura, para aquellos
idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha como lo hacemos
nosotros.

Tiene tan sólo dos opciones que corresponden a lo que acabo de comentar: ltr (left to right) o rtl (right
to left).
  <div dir="ltr">Este contenido está escrito de izquierda a derecha...</div>

draggable

En la actualidad va a permitir incorporar o eliminar elementos de una página simplemente

arrastrándolos.

Un ejemplo “de lo que hasta ahora podía tratarse como tal” sería una imagen que, al arrastrarla fuera de
la ventana y colocarla en un editor de imágenes, se podía abrir. Otro ejemplo el de un enlace que se
arrastraba sobre una pestaña del navegador y ejecutaba esa dirección.

Los parámetros que permite son true, false o auto, que es el que está por defecto, dejando a cada
usuario / navegador decidir los elementos.

 <p draggable="true">We can drag this paragraph.</p>

Más info: http://translate.googleusercontent.com/translate_c?
depth=1&ei=zXgbUcvoPIeYhQekwYCwDw&hl=es&prev=/search%3Fq%3Ddropzone%2Bhtml5%26hl
%3Des%26tbo%3Dd&rurl=translate.google.es&sl=en&u=http://www.whatwg.org/specs/web-apps/
current-work/multipage/dnd.html&usg=ALkJrhgCkaxvEbLt2OL0WMeUB9DmAGG5jQ#dnd

hidden

Hasta ahora cuando querías que un bloque de contenido no se viera tenías que utilizar los CSS para
ocultarlo. Ahora eso ya no será necesario, ya que si un elemento incorpora este atributo simplemente
no se mostrará por pantalla.
De todas formas, este elemento no debe usarse para ocultar bloques o pestañas, sino que se ha de
utilizar para elementos que no van a ser relevantes.

Por ahora no hay ningún navegador que lo soporte, por lo que habrá que esperar a ver qué ocurre con
el contenido que va dentro de estos elementos.

 <div hidden>Este contenido está oculto por no ser relevante para el usuario...</div>

id

Identifica un elemento de forma única por lo que sólo puede haber uno que se llame así por página. A
parte de utilizarse en las hojas de estilo, lo más habitual es su uso con AJAX y la función
getElementById().

 <div id="explicacion">Este contenido puede variar si se accede mediante AJAX o similar...</div>

itemid, itemprop, itemref, itemscope y itemtype

Permiten ampliar todos esos pequeños detalles que van a ampliar el juego.
El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser de un tipo, que se
informa con el itemtype. Este tipo ha de venir dado con una dirección URL (que indica el microdato
nuevo)
El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder
ser utilizados y, para acabar, itemprop viene a ser el que da los valores.
Y, en este caso, sólo hay una forma de entender todo lo que he puesto, y es con un ejemplo:

 <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">

<img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a
forest.">
<figcaption itemprop="title">The house I found.</figcaption>
</figure>
<p id="licenses">All images licensed under the <a itemprop="license"
href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>

lang

Marca el idioma del contenido de ese fragmento de texto. Hay que tener en cuenta que, aunque un
documento se le aplique un idioma, por norma general, puede haber fragmentos de texto de contenidos
que se encuentran en otros idiomas, por lo que hay que indicarlos.

 <div lang="es">este bloque se encuentra escrito en español...</div>

 <div lang="en">...and this is in english...</div>

spellcheck

Gracias a spellcheck se podrá indicar qué contenidos o no queremos que puedan sufrir una corrección
ortográfica o gramatical. Seguramente acabará usándose en los formularios en los que haya que incluir
palabras sin sentido, o en textos en un idioma distinto del general de la página.
Tiene tres posibles valores, que son true, false y default.

 <p spellcheck="true" contenteditable="true">Spell check is on.</p>

style

Básicamente a cualquier elemento se le puede aplicar directamente, en línea, algunos atributos que
hacen referencia a las hojas de estilo.

tabindex

Este es quizá uno de los desconocidos a la hora de mejorar la usabilidad de un sitio, y es que gracias a
tabindex cada vez que pulsemos en la tecla “tab” vaya a un sitio y otro de la página. De todas formas, no
todos los elementos permiten tener este atributo, sólo aquellos en los que el usuario puede focalizarse.
Lo más habitual es su uso en formularios, para que el usuario vaya saltando de un campo a otro en el
orden que tú le digas, y no en el que el código fuente tenga.

 <p tabindex="2"> segundo </ p>

title
El genial title básicamente hace lo que su nombre indica: titulear. Y es que muchos elementos, cuando
se pone el ratón encima permiten mostrar más información de lo que eso significa. Un ejemplo muy
habitual sería el las abreviaturas.

 <p>Internet usa mucho el protocolo <abbr title="Hypertext Transport Protocol">HTTP</abbr> y

el <abbr title="File Transport Protocol">FTP</abbr>.</p>

data-*

Tenemos la posibilidad de incorporar los atributos de datos personalizados en todos los elementos
HTML.
Básicamente la idea es la de poder añadir información “oculta” que no moleste a los lectores pero que
los navegadores y los robots sean capaces de interpretar si se les añade la forma de hacerlo.

 <div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-

x="30" data-y="10" data-z="90">
<button class="fire" onclick="spaceships[this.parentNode.dataset.shipId].fire()">Fire</button>
</div>

translate
Este atributo puede aparecer en cualquier elemento, y se sólo tiene dos valores: yes o no. Si el valor es
no, las herramientas de traducción deben proteger el texto y no traducirlo.
Añadir el atributo translate a su página puede ayudar a los lectores a entender mejor su contenido
cuando se ejecuta a través de sistemas de traducción automática.

 <p>The question in the title <cite translate="no">How Far Can You Go?</cite></p>
Nuevas etiquetas.

1. Sintaxis simplificada
La declaración de tipo de documento de forma más sencilla es sólo una de las muchas novedades de
HTML5. Ahora solo tienes que escribir solamente: <DOCTYPE HTML!>. La sintaxis de HTML5 es
compatible conHTML4 y XHTML1, pero no con SGML.

2. Nuevos elementos <aside> y <nav>

El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes
dentro de la página: una sección con links de navegación pero solo puede haber uno por página y
<aside> puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos
de elementos de la navegación, u otro contenido que se considere separado del contenido principal de
la página.

 <aside> <h1>Publicidad<h1> -> <nav><ul>

(( código de la publicidad )) <li><a href="cursohtml.html">Curso de Html5</a></li>
</aside> </ul></nav>

3. Nuevos elementos <header>, <hgroup> y <footer>

Estos elementos nuevos, están diseñados específicamente para marcar estas partes de la web. La
etiqueta <header>…</header> especifica una introducción, o un grupo de elementos de navegación
para el documento, muchas veces se necesitan varios títulos como en un blog y <hgroup> permite
colocar un h1, h2 y h3 dentro del header sin afectar al motor de busqueda, permitiendo usar otro h1 en
el sitio. Y la etiqueta <footer>…</footer> define el pie de página de una sección o documento. Con este
desarrollo en el lenguaje ya no es necesario identificar a estos dos elementos con la etiqueta <div>.

 <body>
<header> <hgroup>
<h1>Título de la web</h1>
<h2>Subtítulo de la web</h2>
</hgroup></header>
Contenido de la web.
<footer>Pie de página.</footer>
</body>

4. Nuevos elementos <section> y <article>

Se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o
aplicación. Además de hacer el código más estructurado, este también tendrá un efecto positivo ya que
para los motores de búsqueda será más fácil el ranking de tu página.
Si el fragmento de código lo escribiésemos en un papel separado del resto de la web el fragmento tiene
su sentido, podemos usar un <article>.
Si no tiene tanto sentido, pero tiene relación con lo comentado en el resto de esa página, podemos usar
un <section>.

 <section id="izquierda">
<h2>Ultimas Novedades<h2>
<article>(( NOVEDAD UNO ))</article>
</section>

5. Nuevos elemento <menu> y <command>

La etiqueta <menu> representa una lista de comandos que se pueden ejecutar. El menú puede ser una
barra de herramientas, un menú contextual (el que sale por ejemplo al pulsar el botón derecho del
ratón) o una simple lista.

Para marcar estos comandos puede usarse la etiqueta command. Esta etiqueta se usa para marcar
acciones que el usuario puede realizar. Podemos usarla en múltiples partes de la página web (enlaces,
botones, menús… a través del atributo command) y, desactivando el comando, se desactivará en todas
sus apariciones.

Para que command se pueda activar debe estar dentro de una etiqueta <menu>. Fuera de esa etiqueta
sólo será una marca que podrá utilizarse como atajo de teclado.

 <menu type="toolbar">
<command id="align-left" label="Izquierda" onclick="setAlign('left')">
</menu>

6. Nuevos elemento <figure> y <figcaption>

La etiqueta <figure> nos permite organizar texto, diagramas, imágenes, etc. de una manera profesional.

<figure> puede contener el <figcaption>, que a su vez contiene la leyenda de la figura contenida en la
etiqueta <figure> permitiéndole ingresar una descripción que puede vincular más la figura con su
contenido.

 <figure>
<img src="/figure.jpg" width="304" height="228" alt="Picture">
<figcaption>Leyenda de la figura</figcaption>
</figure>

7. Nuevos elementos <audio>, <video> y <source>

Son probablemente dos de las novedades más útiles para HTML5.

La etiqueta <audio> identifica contenido de sonido, como música u otras secuencias de audio. La
etiqueta <audio> posee atributos que controlan qué, cuándo y cómo se reproducirá el audio. Los
atributos son src, preload, control, loop y autoplay.

 <audio src="MyFirstMusic.ogg" controls autoplay loop">

Your browser does not support the audio tag.
</audio>

La etiqueta <video> le permite difundir archivos de video o transmitir medios visuales en modalidad
continua. Este tiene todos los atributos de la etiqueta <audio> y tres más: poster, width y height. El
atributo poster le permite identificar una imagen que se utilizará mientras el video está cargando, o en
el desafortunado caso en el que el video definitivamente no vaya a cargar.

 <video src="MyFirstMovie.ogg" controls="controls">

Your browser does not support the video tag
</video>

Las etiquetas <video> y <audio> pueden contener la etiqueta <source>, la cual define recursos
multimedia para estas etiquetas. Con este elemento, especificas elementos alternativos de audio o
video de los cuales el navegador puede seleccionar con base en su soporte de tipos o codecs de medios.

 <audio>
<source src="/music/good_enough.wma" type="audio/x-ms-wma">
<source src="/music/good_enough.mp3" type="audio/mpeg">
<p>Your browser does not support the HTML 'audio' element.</p>
 </audio>

8. Un nuevo nivel de las formas: <form> y <input>

HTML5 ha agregado dos nuevos atributos a la etiqueta <form>: autocomplete y novalidate. El atributo
autocomplete habilita las listas desplegables de sugerencia que aparecen en sitios como Google. El
atributo novalidate desactiva la validación para un formulario, lo cual es valioso durante las pruebas.

 <form id="orderForm" autocomplete="on" action="javascript:alertValues();" method="get">

La etiqueta <input> tiene varios nuevos tipos y atributos que mejoran la facilidad de uso del formulario.
HTML5 ha introducido nuevos tipos de entrada diseñados para organizar y categorizar datos, replicando
el enfoque semántico general de HTML5. El viejo adagio de que el formulario debe seguir a la función es
apropiado para describir las funciones de los formularios HTML5.
El campo de formulario <input> puede estar por fuera de las etiquetas <form>. El atributo form
identifica el formulario o formularios a los cuales pertenece el campo de entrada. También identifica el
formulario al que pertenece al referenciarse al ID del formulario.

Nuevos tipos de <input>

Nuevos atributos de <input>

 <input id="name" name="name" type="text" placeholder="Ingrese su nombre" autofocus

required size="50">

9. Elemento <embed>
La etiqueta embed se usa para integrar contenido externo (normalmente no HTML) al contenido; por
ejemplo, un plug-in para archivos Adobe Flash SWF.

 <embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

10. Elemento <datalist>

Sirve para especificar una lista de opciones predefinidas para un elemento <input>. Este tag proporciona
una característica de autocompletado similar al Google Auto Suggest. El usuario verá una lista
desplegable de opciones predefinidas a medida que va introduciendo contenido en la caja de texto. Para
unir el elemento input con la lista de elementos del datalist se utiliza en atributo list.

 <input list="navegadores" />

<datalist id="navegadores">
<option value="Firefox">
<option value="Google Chrome">
</datalist>
Canvas.

¿Qué es?
Es un área donde podemos dibujar como si fuera un lienzo. El elemento canvas permite especificar un
área de la página donde se puede, a través de scripts, dibujar y renderizar imágenes, lo que amplía
notablemente las posibilidades de las páginas dinámicas y permite hacer cosas que hasta ahora estaban
reservadas a los desarrolladores en Flash, con la ventaja que para usar canvas no será necesario ningún
plugin en el navegador, lo que mejorará la disponibilidad de esta nueva aplicación.

 <canvas id="entorno_canvas" width="360" height="240">;</canvas>

¿Cómo se usa?
Cuando trabajamos con canvas, realmente toda la magia la haremos en JavaScript. Primero debemos
referenciar el elemento canvas y adquirir su contexto (API). Por el momento el único contexto
disponible es el contexto bidimensional. Recomiendo usar firebug o similares a la hora de aprender a
usar la API para poder ver los cambios en vivo y avanzar con mayor velocidad:

 var canvas = document.getElementById('entorno_canvas');

var context = canvas.getContext('2d');

Una vez adquirimos el contexto, podemos empezar a dibujar en la superficie del canvas usando la API a
tal efecto documentada en http://bit.ly/l1BMyi. La API bidimensional ofrece muchas de las herramientas
que podemos encontrar en cualquier aplicación de diseño gráfico como Adobe Illustrator o Inkscape:
trazos, rellenos, gradientes, sombras, formas y curvas Bézier. Claro está deberemos especificar cada
acción con ellas usando JavaScript.

Manuales e información:
http://www.html5canvastutorials.com/
http://www.desarrolloweb.com/manuales/manual-canvas-html5.html
http://www.youtube.com/watch?v=JM9_xJP8mNQ
Tabla de etiquetas.

COLOR PARA INDICAR LAS ETIQUETAS MODIFICADAS

COLOR PARA INDICAR LAS ETIQUETAS NUEVAS
COLOR PARA INDICAR LAS ETIQUETAS ELIMINADAS

Etiqueta Atributos Comentarios

<!-- --> Ninguno Añade comentarios.

<!DOCTYPE> Estándar o ninguno

Atributo Añadido: media Atributo

acceskey | target | rel | href | hreflang | media |
<a> cambiado: Target Atributo
onblur | onfocus | type | name | tabindex | tittle
eliminado: rev, charset, shape,
coords
<abbr> Estándar o ninguno Especifica una abreviatura

<acronym> Etiqueta Eliminada

<address> Ninguno Especifica un elemento de dirección

<applet> Etiqueta eliminada

Especifica un área dentro de un

acceskey | alt | hreflang | media | onblur |
<area> mapa de imagen
onfocus | shape | tabindex | target | type | rel
Atributo eliminado: nohref

<article> Atributos globales Nueva etiqueta

<aside> Atributos globales Nueva etiqueta

<audio> autobuffer | autoplay | controls | loop | src Nueva etiqueta

<b> Atributos globales Etiqueta cambiada

<base> href | target

<basefont> Etiqueta eliminada

<bb> makeapp

<bdo> dir

<big> Etiqueta eliminada

<blockquote> cite Sangrado

<body> onload | onunload Atributo eliminado: alink, link, vlink,

 background, text, bgcolor

Salto de línea
<br> Atributos globales
Atributo eliminado: clear

acceskey | autofocus | desabled | form | name |

onblur | onfocus | tabindex | type | value |
<button>
formaction | formenctype| formmethod |
formnovalidate | formtarget

<canvas> height | width Nueva etiqueta

Establece un título en una tabla

<caption> Atributos globales
Atributo eliminado: align

<center> Etiqueta eliminada

<cite> Atributos globales Etiqueta cambiada

<code> globales

Atributo eliminado: align, char,

<col> lapso | span
charoff, valign, width

Atributo eliminado: align,char,

<colgroup> span
charoff, valing, width

checked | default | disabled | hidden | icon | label

<command> Nueva etiqueta
| radiogroup | type

<datagrid> disabled | multiple | Nueva etiqueta

<datalist> list Nueva etiqueta

<dd> Ninguno

<del> cite | datetime

<details> open Nueva etiqueta

<dialog> Atributos globales Nueva etiqueta

<dir> Etiqueta eliminada

<div> Atributos globales Atributo eliminado: align

<dfn> Atributos globales

<dl> Atributo eliminado: compact

<dt> Atributos globales

 <em> Atributos globales

<embed> autostart | height | loop | src | type | width Nueva etiqueta

<eventsource> src Nueva etiqueta

<fieldset> disabled | form | name

<figcaption> Atributos globales Nueva etiqueta

<figure> Atributos globales Nueva etiqueta

<font> Etiqueta eliminada

<footer> Atributos globales Nueva etiqueta

action | accept-charset | method | enctype |

<form> autocomplete | method | name | novalidate |
onreset | onsubmit | target

<frame> Etiqueta eliminada

<frameset> Etiqueta eliminada

Atributos globales Atributo eliminado: align

<h1> ... <h6>

<head> base | title | isindex | nextid | meta Atributo eliminado: profile

<header> Atributos globales Nueva etiqueta

<hgroup> Atributos globales Nueva etiqueta

Etiqueta cambiada
<hr> Atributos globales Atributo eliminado: align, noshade,
size, width

Abre y cierra el código Atributo

<html> head | body | manifest
eliminado: version

<i> Ninguno Etiqueta cambiada

Carga en un marco otra página

sandbox | seamless | srcdoc | name | src | widht | Atributo eliminado: longdesc, align,
<iframe>
height frameborder, marginheight,
marginwidth, scrolling

Inserta una imagen

alt | border | crossorigin | height | ismap | id |
<img> Atributo eliminado: longdesc,
width | src | usemap
hspace, vspace, name,align

<input> accept | acceskey | alt | autocomplete | Etiqueta cambiada: Añadidos 13

 autofocus | cheked | disabled | dirname | form |
formaction | formenctype | formmethod |
formnovalidate | formtarget | height | ismap |
inputmode | list | max | maxlength | min |
elementos a type, align
multiple | name | onblur | onchange | onfocus |
onselect | pattern | placeholder | readonly |
required | size | src | step | type | tabindex |
userpmap | value | width

<ins> cite | datatime

<isindex> Etiqueta eliminada

<kbd> Atributos globales

autofocus | challenge | disabled | form | keytype |

<keygen> Nueva etiqueta
name

<label> acceskey | for | form | onblur | onfocus

<legend> acceskey | atributos globales Atributo eliminado: align

<li> value | atributos globales Atributo eliminado: type

Atributo eliminado: rev, charset,

<link> href | hreflang | media | rel | sizes | type
target

<mark> Atributos globales Nueva etiqueta

<map> name | Atributos globales

<menu> label | type | Atributos globales Atributo eliminado: compact

<meta> equiv | content | charset | http-equiv | name Atributo eliminado: scheme

<meter> high | low | max | min | optimum | value Nueva etiqueta

<nav> Atributos globales Nueva etiqueta

<noframes> Etiqueta eliminada

<noscript> Atributos globales

Atributo eliminado: archive, classid,

data | height | form | name | tabindex | type | codebase, codetype, declare,
<object>
typemustmatch | usermap standby, align, border, hspace,
vspace

<ol> start | value | reversed | start Atributo eliminado: compact, type

<optgroup> desabled | label | Atributos globales

 <option> desabled | label | value | selected value | selected

<output> for | form | name Nueva etiqueta

<p> Atributos globales Atributo eliminado: align

<param> name | value | Atributos globales Atributo eliminado: valuetype, type

<pre> Atributos globales Atributo eliminado: width

<progress> max | value | Atributos globales Nueva etiqueta

<q> cite | Atributos globales

<ruby> Atributos globales Nueva etiqueta

<rp> Atributos globales Nueva etiqueta

<rt> Atributos globales Nueva etiqueta

<s> Etiqueta eliminada

<samp> Atributos globales

<script> async | charset | defer | laguage | src | type

<section> Atributos globales Nueva etiqueta

autofocus | desabled | form | multiple | name |

<select> size | onblur | onchange | onfocus | required |
size | tabindex

<small> Atributos globales Etiqueta Cambiada

<source> media | src | type Nueva etiqueta

<span> Atributos globales

<strike> Etiqueta eliminada

<strong> Atributos globales

<style> media | scoped | type

<sub> Atributos globales

<summary> text | Atributos globales Nueva etiqueta

<sup> Atributos globales

<table> height Atributo eliminado: align, bgcolor,

border, cellpadding, cellspacing,
 frame, rules, width, summary

Atributo eliminado: align, char,

<tbody>
charoff, valing

Celda de una tabla Atributo

eliminado: axis, abbr, scope, align,
<td> colspan | height | headers | rowspan
bgcolor, char, charoff, nowrap,
valing, width

acceskey | autofocus | cols | desabled | dirname |

form | inputmode | maxlength | name | onblur |
<textarea>
onchange | rows | required | onfocus |
placeholder | readonly | tabindex | wrap

Atributo eliminado: align, char,

<tfoot>
charoff, valing

Titular de una columna

headers | height | rowspan | colspan | align | Atributo eliminado: align, axis, abbr,
<th>
scope bgcolor, char, charoff, nowrap,
valing, width

Atributo eliminado: align, char,

<thead>
charoff, valing

<time> datetime | pubdate Nueva etiqueta

<title> Estándar o ninguno Establece un titulo

Fila de una tabla

<tr> Atributo eliminado: align, bgcolor,
char, charoff, valing

<tt> Etiqueta eliminada

Define texto que debe tener un estilo diferente del

<u>
texto normal [.]

<ul> Atributo eliminado: compact, type

<var> Estándar o ninguno

src | poster | autobuffer | autoplay | loop |

<video> Nueva etiqueta
controls | width | height

<wbr> Nueva etiqueta

<xmp> Etiqueta eliminada

Diferencia estructural.
No quiere decir que <div> se deje de utilizar, pero deja de ser imprescindible para maquetar.
Link de interés.

http://www.w3.org/TR/2009/WD-html5-diff-20090212/

http://www.tutorialspoint.com/html5/html5_tutorial.pdf

http://www.w3.org/TR/2008/WD-html5-20080610/

http://www.w3.org/TR/html4/index/attributes.html

http://www.whatwg.org/specs/web-apps/current-work/multipage/

PARA VALIDAR EL CÓDIGO: http://validator.w3.org/