Nuevos estándares en el desarrollo de sitios web: HTML5 y CSS3

9 HTML5 - Nuevos elementos

En HTML5 hay algunos nuevos elementos semánticos:

<header>
<hgroup>
<nav>
<article>
<section>
<aside>
<time>
<mark>
<footer>

Hay cuatro nuevos elementos multimedia:

<audio>
<canvas>
<source>
<video>

Y hay nuevos elementos para estructurar el contenido:

<details>
<summary>

La etiqueta <details> especifica detalles adicionales que el usuario puede ver y ocultar cuando lo desee. La etiqueta <summary> se utiliza para especificar un titulo visible para los detalles. El titulo puede ser pulsado para ver u ocultar los detalles.

<details>
<summary>Vuelos Alicante - Bishkek</summary>
  <details style="margin-left: 20px">
  <summary>Alicante - Barcelona</summary>
  <ul>
  <li>JK 1234</li>
  <li>Duración: 1 h</li>
  </ul>
  </details>
  <details style="margin-left: 20px">
  <summary>Barcelona - Istanbul</summary>
  <ul>
  <li>TK 639</li>
  <li>Duración: 3 h</li>
  </ul>
  </details>
  <details style="margin-left: 20px">
  <summary>Istanbul - Bishkek</summary>
  <ul>
  <li>TK 321</li>
  <li>Duración: 5 h</li>
  </ul>
  </details>
</details>

Ejemplo vivo (en abril de 2012, este ejemplo únicamente funciona en el navegador Google Chrome):

Vuelos Alicante - Bishkek

Alicante - Barcelona

• JK 1234
• Duración: 1 h

Barcelona - Istanbul

• TK 639
• Duración: 3 h

Istanbul - Bishkek

• TK 321
• Duración: 5 h