Tips HTML5 – Etiqueta Nav

Esta es una etiqueta nueva en HTML5 y es una etiqueta semántica, y tiene como finalidad definir la sección en la cual se encuentran los links que conforman el menú de navegación. Su uso es realmente sencillo:

<nav>
  <a href="/html/inicio.html">Inicio</a>
  <a href="/html/recientes.html">Recientes</a>
  <a href="/html/contacto.html">Contacto</a>
  <a href="/html/acercade.html">Acerca de</a>
</nav> 

Tips HTML5 – Etiqueta figcaption

Esta es una etiqueta nueva en HTML5 y es una etiqueta semántica, se usa junto con la etiqueta <figure>, para definir contenido de imágenes, en este caso la etiqueta <figcaption> nos permite definir o enmarcar un titular dentro de la etiqueta <figure>. Su uso es bastante sencillo, como podemos ver a continuación:

<figure>
  <figcaption>Imagen de muestra</figcaption>
  <img src="myimage.png" alt="Imagen de muestra" width="304" height="228">
</figure>

Tips HTML5 – Etiqueta Figure

Esta etiqueta es nueva en HTML5 y es una etiqueta semántica, y nos permitirán anotar o resaltar ilustraciones, diagramas o fotos. Su uso es bastante sencillo, como podemos ver a continuación:

<figure>
  <img src="myimage.png" alt="Imagen de muestra" width="304" height="228">
</figure>

Tips HTML5 – Etiqueta WBR

Esta es una funcionalidad nueva en HTML5, viene del ingles Word Break que traduce romper palabra, esta es una etiqueta semántica, y nos permite indicar al navegador donde dividir una palabra o texto, de forma que si la ventana se reduce, o bien queremos mostrar un texto en la pantalla de un dispositivo móvil como podría ser un celular, el explorador sepa con exactitud donde queremos que se divida.

El uso de esta etiqueta es muy simple, solo debemos insertar esta etiqueta en el punto donde esperamos que se divida el texto.

<div>
    <p>Pneumonoultramicroscopic<wbr>silicovolcanoconiosis es una palabra de (45 

    letras), es una enfermedad contraída por la aspiración de basura volcánica.</p>
</div>

De esta forma nuestra palabra se separara justo en el punto indicado al momento de reducir la ventana del navegador.



Ahora reduzcamos el tamaño de la ventana:



Como se puede observar nuestra palabra se ha dividido justamente donde le he indicado.

Tips HTML5 – Etiqueta Title

Esta etiqueta en si no ha cambiado, pero lo que tal vez algunos no sepan, es que si no se coloca o no se define un contenido diferente al que suelen colocar los editores por defecto, el algoritmo de búsqueda de Google va a catalogar estas paginas en su Trashing List, que no es otra cosa que un listado de sitios o paginas cuyo contenido es dudoso y no se considera fiable, lo que hace que no se muestre en las búsquedas.

<title>Documento sin titulo</title>

Por este motivo es importante colocarla y definir su contenido con información consistente. El uso de esta etiqueta es el siguiente:

<title>Tips de HTML5</title>

Tips HTML5 – Definir el juego de caracteres para idioma español

Definir el juego de caracteres, es decir el lenguaje de una pagina web solía ser algo como esto:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Ahora con HTML5 la cosa es mas sencilla, y quedaría así:

<meta charset="UTF-8">

Vale aclarar que el atributo charset es nuevo en HTML5, ya que antes formaba parte de la definición de content.

Tips HTML5 – Etiqueta Script para enlazar archivos JavaScript

La etiqueta script es usada para enlazar archivos con scripts de JavaScript, y hasta el momento la forma como hacíamos uso de esta etiqueta era la siguiente:

<script type="text/javascript" href="myscript.js">

En HTML5, se ha agregado el parámetro async, para permitir la ejecución asíncrona de un script, y ya no es necesario especificarle el tipo. Así la forma de usarlo actualmente es la siguiente:

<script href="myscript.js">

<script href="myscript.js" async>