Etiquetas html5

Aunque las nuevas etiquetas de HTML5 ya están con nosotros hace unos añitos, voy a realizar un breve repaso a las mismas, explicando para que sirven y cuando deberíamos usarlas.

Esta evolución pretende convertir la web en más semántica, más lógica y sencilla de entender… no solo para los humanos sino para los robots de los motores de búsqueda, con lo que aprender su correcto funcionamiento se antoja clave si queremos tener un código de calidad.

Etiquetas HTML5 estructurales

Estas etiquetas se crearon para poder crear un código más organizado y evitar los DIVs como única solución. Sirven para organizar la estructura general de cada página.

• ARTICLE: Está destinada para diferenciar los diferentes artículos o segmentos de información.

<article>
  <h1>Artículo 1</h1>
  <p>Este es un artículo de ejemplo...</p>
</article>

• SECTION: Se usa si se necesita agrupar un bloque de textos, relacionados entre si y de la misma naturaleza.

<section>
  <h1>Diseño Web</h1>
  <p>Nos dedicamos al diseño web y al desarrollo....</p>
</section>

• HEADER: Identifica la cabecera del sitio web. También puede usarse para identificar diferentes cabeceras de secciones relevantes.

<article>
  <header>
  <h1>Artículo 1</h1>
  <h2>subtitulo</h2>
  </header>
  <p>Este es un artículo de ejemplo...</p>
</article>

• FOOTER: Identifica el pie de página o también puede usarse para informaciones que formen el pie de una sección.

<footer>
  <p>Copyright 2016</p>
  <p><a href="#">Site map</a> | <a href="#">Contacto</a>.</p>
</footer>

• ASIDE: Se usa para etiquetar información complementaria, como por ejemplo el lateral de un blog, en donde se sitúan los últimos artículos, categorías, etc. Información no relacionada directamente con el artículo.

<aside>
  <p>Datos de contacto</p>
  <p>[email protected] | 663470924.</p>
</aside>

• NAV: Se usa para identificar el navegador principal de una página web.

<nav>
  <a href="#">Diseño Web</a> |
  <a href="#">Desarrollo Web</a> |
  <a href="#">Marketing Online</a>
</nav>

Todas estas etiquetas no dan formato, solo sirven para identificar el bloque que engloban.

Etiquetas HTML5 para clasificar el contenido

Estas etiquetas sirven para clasificar el contenido dentro de cada página, es importante, por que de esta forma facilitaremos a los buscadores la identificación de los elementos claves de la página.

• MENU: Sirve para listar un menú.

<menu type="toolbar">
    <li>Diseño Web</li>
    <li>Programación Web</li>
    <li>Desarrollo PHP</li>
</menu>

• DETAILS: Detalles o información de un producto por ejemplo. Automáticamente hace el efecto de expandir.
• SUMMARY: Es un resumen. Suele usarse justo antes de Details.

<details>
  <summary>Cuentas año 2015.</summary>
  <p> - Primer trimestre X</p>
  <p>Durante el primer trimestre se a obtenido...</p>
</details>

• FIGURE: Sirve para identificar, imágenes, fotos, etc.
• FIGCAPTION: Es el texto que acompaña, normalmente debajo, una imagen.

<figure>  
<img src="imagen.jpg" alt="TExto alternativo">
<figcaption>Texto de la imagen.</figcaption>
</figure>

• HGROUP: Sirve para agrupar diferentes encabezados (h1, h2, etc.) y dar a entender que están relacionados entre si. Es interesante si tenemos varios h1 con sus correspondiente h2, poder agruparlos y que quede claro las relaciones del contenido.

<header>
   <hgroup><h1>Titular 1</h1><h2>Subtitulo noticia 1</h2></hgroup>
</header>

<header>
   <hgroup><h1>Titular 2</h1><h2>Subtitulo noticia 2</h2></hgroup> 
</header>

• MARK: Sirve para destacar un contenido.

<p>Si queremos poner un enlace usaremos la etiqueta <mark>a</mark>.</p>

Etiquetas HTML5 para formularios

Los elementos que mayor evolución han sufrido han sido los formularios, ya que ahora no solo se han mejorado las etiquetas:

• METER: Sirve para insertar escalas, por ejemplo: Si ponemos 20 de 100, veremos una barra de navegación con un 20%..

<meter value="20" min="0" max="100">20 / 100</meter>

• PROGRESS: Sirve para poner barras de progreso.

<progress value="20" max="100"></progress>

• DATALIST: Podemos crear campos de auto-completar.

<input list="buscador">
<datalist id="buscador">
<option value="Perrod">
<option value="Gatos">
<option value="Caballos">
<option value="Conejos">
<option value="Vacas">
<option value="Cerdos">
<option value="Cebras">
</datalist>

Etiquetas HTML5 para Multimedia

Antes del HTML 5 era muy complejo insertar un vídeo, ya que existen muchos formatos diferentes, ahora disponemos de etiquetas multimedia que facilitan este trabajo.

• AUDIO: Con esta etiqueta podemos introducir y reproducir un fichero de audio.

<audio controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.mp3" type="audio/mpeg">
  Actualiza tu navegador. No soporta HTML5.
</audio>

• VIDEO: Permite insertar y reproducir archivos de formato vídeo.
• SOURCE: Permite especificar varios vídeos o audios.

<video controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video2.mp4" type="video/mp4">
  Actualiza tu navegador. No soporta HTML5.
</video>

• EMBED: Para embeber contenido externo. Por ejemplo, para poner en nuestra web el tiempo de la última semana, podemos llamar a un servicio que nos de esa información e introducirlo en nuestra web.

<embed src="flash.swf">

• TRACK: Permite especificar pistas para vídeos o audios.

<audio controls>
  <source src="video1.ogg" type="audio/ogg">
  <source src="video2.mp3" type="audio/mpeg">
  <track src="video_en.vtt" kind="subtitulos" srclang="en" label="Ingles">
  <track src="video_es.vtt" kind="subtitulos" srclang="es" label="Español">
  Su navegador no soporta videos de HTML5.
</audio>