Novedades en HTML5

HTML5

  • Incorpora nuevas etiquetas de carácter semántico y que nos ayudan a definir la estructura. Por ejemplo <footer>, para el pie de página.
  • Nuevos controles para formularios que antes sólo eran posibles con JavaScript o CSS.
  • Soporta audio y vídeo de forma nativa.
  • Ya no es necesario el uso de comillas dobles en los atributos, siendo posible algo como: <div id=contenedor>Esto es un div</div>.
  • No hay una sintaxis tan estricta y no es necesario cerrar las etiquetas vacías, por lo que <br> sería válido.
  • Etiqueta doctype simplificada.
  • Podemos dibujar con etiquetas como <canvas>.
  • Se han eliminado etiquetas y atributos no necesarios como los <frames>.
  • Ahora las etiquetas html, head y body no son obligatorias.
  • Las etiquetas de tablas thead, tbody y tfoot tampoco son obligatorias.

Aquí podemos ver la documentación de W3C sobre la última versión publicada, actualmente la 5.2.

Declaración DOCTYPE

Hasta ahora no hemos hablado de un concepto de vital importancia que es la utilización de elementos HTML estándares.

Con las diferentes versiones de HTML, algunas etiquetas dejan de tener uso o aparecen otras nuevas.

La organización que define los estándares para la web es W3C.

Utilizar en lo posible las directivas de este comité de estándares nos traerá como ventanja que nuestras páginas en un futuro sigan viendose correctamente en las nuevas versiones de navegadores.

La versión más actual de HTML es la 5.

En algunos de los documentos hemos introducido la declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html.

En HTML5 se ha simplificado mucho, quedando de la forma:

<!DOCTYPE html>

En la página w3schools podemos ver cómo eran las versiones anteriores.

Estructura de documentos HTML5

Veamos las nuevas etiquetas que nos permiten estructurar nuestro contenido en HTML5 más allá del clásico <div>:

  • <header> No confundir con head. Pensada para albergar la información de la parte superior de la página o cabecera. Logos, títulos, descripciones, formularios de búsqueda, etc. Se puede usar tantas veces como se quiera creando de este modo secciones.
<header>
<h1>Mi restaurante</h1>
<nav>
<ul>
<li><a href="" class="current">Inicio</a></li>
<li><a href="">clases</a></li>
<li><a href="">catering</a></li>
<li><a href="">Sobre mi</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
</header>
  • <footer> Para el pie de página. Esta sección va al final y suele incluir información como los datos de contacto, ayuda, textos legales, etc. También se puede usar varias veces para crear secciones.
<footer>
&copy; 2018 Diego C Martín
</footer>
  • <nav> Para incluir el menú principal de la página, que nos de acceso al resto de páginas principales de un sitio web. Se puede usar también tantas veces como se quiera, pero es mejor usarla sólo una vez por página.
<nav>
<ul>
<li><a href="" class="current">Inicio</a></li>
<li><a href="">clases</a></li>
<li><a href="">catering</a></li>
<li><a href="">Sobre mi</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
  • <article> Para incluir información que podría tener sentido de forma independiente, como un artículo de blog o noticia. Podemos incluir dentro de ella header footer.
<article>
<h2>Título del artículo 1</h2>
<h3>subtítulo del artículo 1</h3>
<p>Contenido del artículo 1. Esto pueden ser muchos párrafos.</p>
</article>
<article>
<h2>Título del artículo 2</h2>
<h3>subtítulo del artículo 2</h3>
<p>Contenido del artículo 2. Esto pueden ser muchos párrafos.</p>
</article>
  • <section> Para crear secciones y agrupar artículos por temática por ejemplo.
<section class="recetasjaponesas">
<h2&gt;Recetas japonesas</h2>
<a href="">Pollo Yakitori</a>
<a href="">Pollo Tsukune</a>
<a href="">Okonomiyaki</a>
<a href="">Mizutaki</a>
</section>
<section class="contacto">
<h2>Contacto</h2>
<p>Mi restaurante<br />
21 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>
  • <aside> Para contenido de carácter secundario y que visualmente suele ir ubicado en un lateral de forma que guarde relación con toda la página o bien dentro de un artículo. Ponemos enlaces relacionados, banners publicitarios, etc. Un ejemplo sería igual al anterior pero intercambiando la etiqueta section por aside.

Veamos un par de ejemplos de estructuras que podríamos crear:

Estructura de página HTML5
  • LinkedIn
  • Twitter
  • Facebook