HTML 5: imagen grande, ande o no ande

Ahora que ya tenemos la mayor parte del HTML formateado, toca hacer revisión del resto de elementos más detallados. Y, al igual que pasó con los enlaces, con las imágenes voy a dedicar un capítulo entero para ello ya que aunque la configuración no es tan compleja, se lo merece.

Las imágenes se representan con el elemento img. Una imagen puede ser un mapa estático (png, gif, jpg…), vectorial (pdf, xml con svg…), imágenes anmadas (gif, apng…) y otra serie de elementos que cada navegador soporte, pero que el propio HTML 5 no especifica, ya que queda en manos de cada uno de ellos.

src

Este atributo es obligatorio al añadir una imagen e indica la dirección URL donde se encuentra el elemento a mostrar.

alt

Este elemento es el “texto alternativo” en una imagen. Dependiendo de una serie de combinaciones hay que ponerlo o no…

  • Si el alt está en blanco, significa que esa imagen es decorativa o suplementaria.
  • Si el alt dispone de información, el contenido ofrece información alternativa o sustitutiva de la imagen.
  • Si el alt no existe, la imagen debe ser parte del contenido y no hay ningún elemento equivalente. En este caso, los navegadores pueden usar la información del title o del figcaption como sustituto.

Por norma general el atributo alt debería existir, aunque hay casos excepcionales. Algunos casos donde en principio ha de estar son:

  • Si la imagen está dentro de un enlace, y ese enlace sólo contiene la imagen, entonces es obligatorio que tenga contenido.
  • En el caso de algún diagrama o gráfica, swe recomienda explicar con mucho detalle el contenido de la imagen.
  • Si tenemos una imagen como si fuera un icono, y al lado de la imagen hay un texto que la define (y viene a ser el mismo), en estos casos el elemento ha de estar vacío.
  • En el caso de logos, insignias, banderas… el contenido ha de ser el nombre de la entidad a la que representa, y no alguna palabra del estilo “logo”. En caso de que el logo no se muestre como logo, sino como una imagen descriptiva, es recomendable incluir una descripción de cómo es el logo en sí: formas, colores, etc…
  • Si la imagen es un texto sustitutivo, se recomienda que se incluya la misma información que indica el texto.
  • Si la imagen es simplemente algo que representa lo que se está hablando alrededor de ella, con un buen fragmento de texto, el atributo debe estar vacío. En estos casos es recomendable usar un título o similar.
  • En el caso en que haya varias imágenes complementarias unas a otras (por ejemplo, un logo dividido en varios ficheros), la primera de las imágenes será la que incluirá un texto alternativo, quedando el resto vacíos.
  • En el mismo caso, pero que alguna imagen tenga algunos de sus elementos como enlaces, cada una de estas sí que deberán incorporar un texto alternativo.
  • En los casos en los que la imagen tiene un valor excesivamente importante, el texto deberá ser muy detallado y significativo.
  • Si no se conoce el contenido de una imagen, entonces no debe existir el atributo alt, aunque en estos casos sí que deberá haber un title o un figcaption. Un ejemplo de esto podría ser una imagen de “captcha”.

Un detalle importante es que el alt es un elemento que ha de reemplazar la imagen en caso de que no se pueda mostrar, y no es información descriptiva (que sería el title).

En el caso en que las imágenes no estén pensadas para los usuarios (no sé, se me ocurre un contador de visitas de los “muy antiguos”) no debe existir el atributo alt y, en este caso, el width y height deben estar forzados a tamaño 0.

width / height

Las imágenes pueden llevar el tamaño de las mismas. Por norma general es interesante indicarlas ya que de esta forma el navegador no tendrá que esperar a finalizar la carga de la página para poder acabar de renderizarla correctamente.

usemap

Este elemento, si existe, indica la información del mapa asociado y será el nombre del mapa.

ismap

Si la imagen es un mapa y se encuentra dentro de un enlace a, entonces hay que indicarlos con este parámetro booleano. Con esto el enlace quedaría en entredicho ya que necesitará de un mapa.

Para qué navegador he de programar

En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20.

¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este caso voy a hacer referencia a la que está en el momento de escribir esta entrada, que es el 1Q2010.

Windows XPWindows 7Mac OS 10.5Mac OS 10.6
x
x
xx
xxx
xx

¿Qué interpretación se puede hacer de esta tabla? Por un lado, que para determinadas versiones antiguas hay que simplemente obviar: Firefox < 3, Explorer < 7, Chrome < 4 y Safari < 4. Opera queda excluido por ser un navegador raro, como lo llaman ellos. Yo en estos casos lanzaría un mensaje de aviso de que tu navegador está caducado, actualiza gratis….

¿Qué otras más cosas? Pues que los navegadores nuevos pueden no estar preparados para ser 100% compatibles en los sistemas operativos, como pasa con Chrome.

En resumen: ¿para qué hay que desarrollar? Hay que desarrollar para Explorer 7 y 8 además de Firefox 3.6 (si hablamos de Windows) y para Safari 4 (si hablamos de Mac OS). Aunque no venga, yo para Linux dejaría el uso de Firefox 3.6 igualmente.

Con esto llegaremos a más del 80% de la población de Internet, con un trabajo simple, sin necesidad de dedicarle tiempo a la mayoría de tonterías que pueden dar los navegadores “raros” (entre comillas).

Otra cosa, como añadido… en un proyecto que tenemos actualmente en marcha, hemos puesto un mensaje de aviso a los usuarios de Explorer 5 y 6, y, la gente SÍ que actualiza su navegador, ya que desde que hemos puesto el mensaje, el 80% de las consultas para soporte que llegaban sobre “que la web no se veía bien”, han pasado a ser un 20% de las quejas… y si le sumamos a que según la analítica sólo tenemos un 10% de usuarios de Explorer < 7…

En definitiva, que cada uno haga lo que quiera con sus sitios, pero yo hace ya un tiempo que me he cansado de dar soporte y trabajar extra por culpa de un 10% de los usuarios de Internet que no se preocupan de su seguridad… así que si ellos no se preocupan por navegar correctamente, yo tampoco me preocupo por gente que no quiere preocuparse… y que seguramente luego me va a hacer perder tiempo.

Actualización: para los que me habéis preguntado, así se ve TuManitas en Explorer 6…

Mejora tu sitio, sólo cambiando el .htaccess

En muchas ocasiones los desarrolladores web no disponen de servidores dedicados sino que sólo tienen acceso a su propia cuenta a través de FTP o similar. Es por esto que estaría bien preparar un fichero de configuración que ya esté configurado a la hora de desarrollar un sitio…


<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteRule ^(.*)\.(\d+)(_m_\d+)?\.([^\.]+)$ $1.$4 [L,QSA]
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/x-javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
</IfModule>

¿Qué significa cada una de estas cosas?

El primero bloque, el del mod_deflate básicamente lo que hace es activar el GZip. las otras líneas que hay son excepciones que en algunos navegadores no acaba de funcionar correctamente.

El tercer bloque, mod_expires lo que hace es automatizar el sistema de caché automático del Apache. En este caso, imágenes como PNG, JPG, GIF, ICO, CSS y JS quedarán cacheadas durante 1 año.

El segundo bloque (que lo he dejado al final por una razón) es la que va a permitir evitar que la caché no se pueda actualizar. ¿Y cómo se va a poder hacer esto? Pues está claro que, si alguien entra en tu sitio y le dices que una imagen se quede 1 año cacheada, y la cambias, esa persona durante un año no va a ver la imagen correcta. un caso donde se ve todo mejor es el CSS y JS.

Para eso podemos ejecutar algo como esto:

<link rel="stylesheet" href="estilos.20100529.css">

La línea del .htaccess lo que viene a decir es que cuando esto pase, realmente se ha de llamar al fichero estilos.css.

HTML 5: dándole color a lo que escribimos

Si por algo se inventó el HTML en su día fue para hacer “markup” de los textos, lo que, en el fondo, significa que se inventó para hacer que los textos de la red de redes tuvieran una forma de darles color, formato y, sobretodo, vinculación.

Pero como ya he hablado de la vinculación de los elementos, ahora toca hablar de los elementos que hacen que podamos tener negritas, cursivas, y una serie de cosas que cualquier texto debería poder tener.

em

Aunque muchos asocian el elemento em a las cursivas, no es así. Habitualmente se representa como una cursiva pero el elemento em básicamente lo que implica es dar énfasis a una palabra para que, dentro de una frase, se haga un mayor esfuerzo en ello. Es interesante porque este elemento es “anidable”, es decir, podemos poner un em dentro de otro em para así enfatizar aun más algo.

Es habitual que en una conversación o en un texto queramos enfatizar algún detalle en concreto, resaltarlo, y para ello deberemos utilizar este elemento.

Atención, este texto es <em>exclusivamente</em> informativo.

En este caso, el “exclusivamente” queda enfatizado por encima del resto del texto.

strong

Al igual que en el caso anterior, muchos utilizan el elemento strong como una negrita, y no es correcto. El significado y uso de este elemento es el de dar importancia a algo en concreto, sin ser decorativo. Al igual que el anterior, este elemento es anidable, por lo que podremos encontrar un strong dentro de otro strong.

<strong>Atención</strong>, este texto es exclusivamente informativo.

En este caso, el “atención” queda reforzado por encima del resto del texto.

small

El elemento small representa un pequeño comentario en un tamaño más reducido. Habitualmente hará referencia a disclaimers, restricciones legales, copyrights y similares. Este elemento no le restará importancia a lo que haya enfatizado con em o reforzado con strong.

Este elemento no debe utilizarse con bloques largos de contenido, múltiples parágrafos, listados… sólo debe utilizarse con pequeñas porciones de texto.

<p>Este producto no debe ser utilizado junto al otro producto.</p>
<p>El eslógan de la compañía Fulanito de Tal es el de "dar el poder de Internet a los usuarios".</p>
<p><small>Esta información ha sido vista en el sitio web de <a href="http://example.com/nosotros.html">fulanito de tal</a>.</small></p>

cite

El elemento cite representa el título de un trabajo (libro, poema, canción, película…), pero no la cita en sí, sino, sólo su título. En el caso de los nombres de autores no se debe hacer uso de este elemento, sino que podría estar bien una negrita b.

<p><cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).</p>

q

Y si el elemento anterior era el título de una cita, el elemento q es la cita en sí, siempre y cuando sea una línea. Las “comillas” no hay que ponerlas, ya que el propio navegador las añadirá.

Este elemento puede incorporar un atributo cite que será la dirección URL de donde se ha extraido la información referente a ese texto.

<p>The W3C page <cite>About W3C</cite> says the W3C's mission is <q cite="http://www.w3.org/Consortium/">To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web</q>.</p>

dfn

El elemento dfn representa la definición de un término. Los contenidos alrededor de este elemento seran la definición del mismo. En el caso en que el elemento tenga un title, éste será el que de la definición exacta del término, sin tener en cuenta el resto del contenido. En este caso, sólo podrá incluirse la definición exacta del término.

<p>The <dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p>
<p>...</p>
<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a> and so Hammond ordered the iris to be opened.</p>

abbr

Cuando tengamos que hacer alguna abreviatura, acrónimo o similar utilizaremos el abbr que permite la incorporación de un title en el que añadir el significado extendido de lo que son las siglas.

Hay que tener en cuenta que no siempre hay que utilizar este elemento, aunque sí se recomienda el uso en documentos en los que esas siglas son poco conocidas, en las que hace falta una presencia semántica añadida o en las que los autores quieren dar la definición sin necesidad de escribirlo después entre paréntesis, por ejemplo.

time

Este es uno de los nuevos elementos que tiene cierta gracia su uso. Básicamente con time debemos ofrecer horas en formato de 24horas que permitan a las máquinas leer fechas, de forma que los navegadores puedan interpretarlas y generar recordatorios con ellas. Estas horas a las que representa han de ser precisas.

Este elemento permite algunos parámetros. Por ejemplo, si se incluye el booleano pubdate significará que esa hora es la que corresponde al article más cercano o, en caso de no haberlo, al documento en el que se encuentra. El atributo datetime es el que puede incluir un valor exacto de la fecha y hora en la que se quiere establecer el momento.

Aunque los navegadores no son capaces de renderizarlos en este momento, creo que puede ser muy interesante la forma en la que lo harán. Si vemos estos ejemplos que pongo a continuación, os explicaré el porqué:

<p>I usually have a snack at <time>16:00</time>.</p>

En este caso, el navegador ha de mostrar algo como:

I usually have a snack at 4pm. o I usually have a snack at 16h00.

En este caso, supongo que dependerá de la configuración del sistema operativo, navegador o dispositivo… pero no es el único caso:

<p>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</p>

Aquí, el sistema podría mostrar varias opciones como:

Published 30/08/2009 07:13. o Published 30 Aug 2009.

code

El elemento code representa código informático… cualquier tipo de código que un ordenador podría reconocer de alguna manera…

<pre><code class="language-pascal">var i: Integer;
begin
  i := 1;
end.</code></pre>

var

Aunque es muy probable que el elemento var se utilice en casos más elaborados, su función es la de indicar que el elemento que hay hace referencia a una variable matemática o de programación.

La hipotenusa <var>a</var> es la suma de los cuadrados de <var>b</var> y <var>c</var>

samp

El elemento samp representa el contenido que muestra la pantalla de un sistema operativo.

kbd

El elemento kbd es lo que un usuario ha de introducir en un sistema (normalmente a través del teclado).

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

sub / sup

Estos dos elementos muestran la información sobre (sup) la línea y bajo (sup) la línea. Normalmente se utiliza en casos muy contados, aunque habitualmente elementos matemáticos.

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

i

Otro de los clásicos es el i, que representa un bloque de texto como voz alternativa, designación taxonómica, término técnico, frase en otro idioma, o cualquier elemento que quieta ponerse en cursiva.

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

b

Y el otro clásico, el b que representa un texto con una importancia extra, como alguna palabra a destacar, el extracto de un documento, nombres de productos o cualquier otra cosa que deba ir en negrita.

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

hay que tener en cuenta que el uso de b es el caso extreño, ya que para encabezados hay que utilizar los h1h6, para dar énfasis a un contenido el em y para remarcar algo el strong o el mark.

mark

El elemento mark ofrece a un fragmento de texto el verse remarcado o destacado con respecto a otro fragmento. En principio este elemento puede ser utilizado para dar importancia a un fragmento según el uso de cada usuario.

El ejemplo más claro y que en alguna ocasión se ha podido ver, sería en de analizar la búsqueda que llega un referrer de un buscador y marcarla en el texto, como si de un rotulador amarillo fluorescente se tratase.

<p>El usuario ha realizado la búsqueda <mark>coche rojo</mark> desde Bing.</p>

ruby / rt / rp

Estos elementos se utilizan para dar anotaciones sobretodo en texto asiático como el chino o japonés.

...
<ruby>
汉 <rt> hàn </rt>
字 <rt> zì  </rt>
</ruby>
...

bdo

Este elemento reconozco que no lo acabo de entender… Sé que tiene que ver con la dirección del texto que se incluye, y que por lo tanto ha de ir acompañada del atributo dir (el que indica la dirección del texto), pero poco más puedo decir…

En principio tampoco creo que sea de mucha importancia a menos que se haga uso de textos en idiomas que “escriben al revés” al estilo del árabe y similares…

span

El elemento span es el elemento más absdurdo, porque básicamente “no sirve para nada”. Este elemento por sí sólo no hace nada de nada, aunque existe porque es últi a la hora de acompañar hojas de estilo, idiomas, etc…

br

Otro de los elementos clásicos es el br, el salto de línea, que permite, en el ligar donde se incluya, hacer un salto de línea del bloque de texto en el que se esté escribiendo…

Hay que tener en cuenta que los saltos de línea no deben utilizarse con propósito de diseño, por lo que este elemento sólo debe utilizarse para dividir textos en varias líneas.

wbr

Y, aunque no sé hasta que punto es útil hoy en día, en el caso en el que haya palabras o frases excesivamente largas, pero que se puedan dar oportunidades para dividir, se podría usar este elemento. Por sí mismo no hace nada aunque permite que, en caso de necesitarse un salto de línea, se haga en uno de estos puntos.

<p>So then he pointed at the tiger and screamed "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

ins / del

Aunque estos elementos no son expresamente de formateo de texto he creído interesante integrarlos en este punto.

El ins representa un fragmento de cntenido que se ha añadido al documento. Es importante tener en cuenta que no puede incluir varios párrafos o similar (vaya, no debería) y es recomendable que incluya el atributo datetime indicando la fecha de la inserción e incluso el cite si la nueva información proviene de otra URL.

El caso del del es igual, aunque en este caso se usa para eliminar un contenido (aunque en la página siga apareciendo, habitualmente tachado).

Os dejo, como la otra vez, un ejemplo de cómo se ven actualmente estos elementos en los navegadores actuales… os recomiendo ver el código fuente del fichero en cuestión.

Y, hasta aquí los elementos que hacen referencia a lo que a los textos se refiere, a su presentación en la pantalla y todo eso… El resto de elementos que queda y que iré mostrando más adelante, hace referencia más a otro tipo de elementos, muchos “multimedia” además de tablas y formularios, que también han variado bastante con respecto a sus versiones anteriores…

Usa el tipo de letra que quieras en tu sitio

Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de “incrustar tu fuente” en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales.

Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Font Face Demo</title>
  <style type="text/css" media="screen">
    @font-face {
      font-family: 'AaarghNormal';
      src: url('Aaargh-webfont.eot');
      src: local('☺'), url('Aaargh-webfont.woff') format('woff'), url('Aaargh-webfont.ttf') format('truetype'), url('Aaargh-webfont.svg#webfont') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    h1 {font: 28px 'AaarghNormal', Arial, sans-serif;}
    p {font: 16px 'AaarghNormal', Arial, sans-serif;}
  </style>
</head>
<body>
  <h1>Font-face de Aaargh Font</h1>
  <p>Aaargh Normal - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Para que quede claro que esto funciona, os dejo con la página tal y como se cargaría

Un detalle interesante es el uso de esa “carita sonriente”, y es el parche para que funcione en todos los navegadores, ya que sino en algunos de ellos no funciona… parece ser que gracias a un código en UTF-8 que no es compatible con el navegador de turno hace que el resto no se siga leyendo y por tanto no de un error…

Otra cosa a tener en cuenta es de dónde sacar fuentes en EOT, WOFF, TrueType y SVG. El sitio así que mejor he encontrado se llama Font Squirrel.

Cómo precargar elementos CSS, JS y similares

Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando.

La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador.

Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores.


window.onload = function () {
  var i = 0, max = 0, o = null,
    preload = [
      'http://example.com/imagen.png',
      'http://example.com/javascript.js',
      'http://example.com/estilos.css'
    ],
    isIE = navigator.appName.indexOf('Microsoft') === 0;
  for (i = 0, max = preload.length; i < max; i += 1) {
    if (isIE) {
      new Image().src = preload[i];
      continue;
    }
    o = document.createElement('object');
    o.data = preload[i];
    //o.width = 1;
    //o.height = 1;
    //o.style.visibility = "hidden";
    //o.type = "text/plain"; // IE 
    o.width  = 0;
    o.height = 0;
    document.body.appendChild(o);
  }
};

Con esto en la página principal conseguiríamos que se pre-cargasen en caché (en background) esas 3 direcciones que podrían corresponder a la imagen del CSS Sprite, la hoja de estilo y las funciones JavaScript.

Aunque esto a priori podría hacer que la página principal vaya algo más lenta, la carga de las páginas sucesivas puede aumentar en un 30% la velocidad.

HTML 5: enlaces que cobran vida

Si hay un elemento que hace que Internet sea lo que es son los hipervínculos, los enlaces o, en definitiva en elemento anchor. Y es que la importancia de los enlaces en la red de redes no es trivial, ya que es lo que hace que Internet se distinga de la mayor biblioteca del mundo: el poder saltar de una información a otra sin necesidad de ir al final del libro y buscar en la bibliografía.

Los enlaces, hasta ahora, simplemente eran eso, enlaces. Poco a poco en los últimos años se han ido creando elementos suplementarios, pero que al no ser estándar cada uno hacía un poco lo que le daba la gana. Y digo “cada uno” haciendo referencia a los seres humanos, a los navegadores y a los robots.

Con HTML 5, los enlaces han variado mucho. Y, aunque siguen siendo elementos que permiten saltar de una página a otra, tienen muchos atributos que hacen que cada enlace tenga un significado especial y diferente.

href

Se podría decir que todo enlace ha de ir acompañado de su href, que no deja de ser la dirección URL a la que ha de apuntar. En caso de tenerlo, que es lo habitual, el enlace apuntará hacia ese lugar. Pero, en caso de no tenerlo, sí que se puede seguir usando el elemento a. En este caso, su significado viene a ser que “ahí debería haber un enlace hacia un sitio, que es importante, que es relevante, pero que todavía no existe…”.

En el caso de que href no esté, otros atributos como target, rel, media, hreflang o type tampoco tienen sentido.

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/noticias/">Noticias</a></li>
    <li><a>Ejemplos</a></li>
  </ul>
</nav>

Otro detalle importante es que el elemento a no sólo se utiliza para enlazar un simple texto, sino que permite otros elementos contenedores que serían enlazables. Un ejemplo claro donde se vería, podría ser el de un anuncio “textual”.

<aside class="advertising">
  <h1>Publicidad</h1>
  <a href="http://ad.example.com/?adid=1929&pubid=1422">
    <section>
      <h1>Mellblomatic 9000!</h1>
      <p>Turn all your widgets into mellbloms!</p>
      <p>Only $9.99 plus shipping and handling.</p>
    </section>
  </a>
  <a href="http://ad.example.com/?adid=375&pubid=1422">
    <section>
      <h1>The Mellblom Browser</h1>
      <p>Web browsing at the speed of light.</p>
      <p>No other browser goes faster!</p>
    </section>
  </a>
</aside>

target

Siempre se ha podido abrir un enlace en una ventana nueva, en un marco o similar… a lo largo del tiempo esos valores se han ido retocando y hoy en día quedan los siguientes:

  • _self: es lo mismo que no poner nada, y básicamente lo que hace es abrir el enlace en la misma ventana que se encuentra el documento actual.
  • _parent: en el caso de que haya marcos o secciones dentro del documento principal, con este tipo de enlaces se va al padre del documento actual…
  • _top: parecido al _parent, pero en este caso sí que va al máximo de los padres.
  • _blank: básicamente abre una ventana nueva.

media

El caso de los media es un poco complejo, ya que no hay ningún sitio en el que se hayan definido todos los elementos posibles. Los principales que he encontrado como estándar de HTML 4 son los siguientes, aunque parece que para el HTML 5 podría haber algunos más:

  • screen: para pantallas.
  • tty: para terminales, teletipos o elementos portátiles de ancho fijo.
  • tv: para televisión de baja resolución.
  • projection: para proyectores.
  • handheld: para dispositivos portátiles con pantallas pequeñas y poca conectividad.
  • print: para impresión.
  • braille: para dispositivos táctiles de braille.
  • aural: para sintetizadores de voz.
  • all: para cualquier dispositivo.

Otros elementos que pueden funcionar son 3d-glasses (para gafas en 3D), resolution > 90dpi (para resoluciones menores de, en este caso, 90dpi)…

hreflang

El atributo hreflang representa, simplemente de forma informativa, el idioma en el que se encuentra el recurso (el contenido de destino de la URL) a la que hay que seguir. Hay que tener en cuenta que los navegadores han de usar la información de idioma de la página de destino, y no la metainformación que da este elemento. En definitiva, que no sé porqué está esto aquí… al menos no todavía.

<a href="/" hreflang="ca">Inici</a>

type

En caso de no enlazar a una página, sino de enlazar a algún tipo de fichero de descarga o similar es interesante utilizar este atributo. Y es que el type es bastante significativo, en cuanto en tanto sirve para indicar el MIME-type del contenido de destino. Por defecto es el text/html, pero si por ejemplo enlazamos a un fichero de texto plano podríamos usar text/plain.

<a href="leeme.txt" type="text/plain">LEEME</a>

rel=”alternate”

Cuando un enlace lleva este atributo, hace referencia al documento actual pero en otro formato, es decir, que es el mismo contenido pero en vídeo, audio, un PDF, una versión para imprimir…

Normalmente irá acompañado de algún otro atributo para especificar “la distinta versión” a la que representa. Por ejemplo, si va acompañado del hreflang indicaría que es el mismo documento en otro idioma, o si va acompañado del type indicaría que está en otro formato.

<a rel="alternate" type="application/pdf" hreflang="ca" href="/catalan.pdf">versión en catalán [pdf]</a>

rel=”archives”

Este tipo de enlace indica que la dirección URL apunta a una página “histórica”, una página donde se recopila información o material antiguo pero que ha de estar disponible.

A parte de usar rel=”archives”, también se puede usar rel=”archive” por razones históricas.

<a rel="archives" href="/2010-02/">febrero de 2010</a>

rel=”author”

Cuando existe un enlace con este atributo cerca de un article, en enlace hace referencia al creador / autor del contenido del mismo. Ese enlace podría ser tranquilamente un enlace hacia una dirección de correo electrónico (con un mailto:).

Por razones históricas, tiene el mismo efecto el rev=”made”.

<a rel="author" href="/nosotros/javier/">Javier</a>

rel=”bookmark”

Este atributo hace referencia a un enlace permanente. Esto viene a ser aquellas direcciones URL que no cambiarán, por ejemplo, en listados de resultados o similares. En principio hace referencia a un article cercano.

rel=”external”

El atributo external hace referencia a que el enlace hace referencia hacia una dirección que no es parte del documento. Es decir, todos los enlaces externos a nuestro sitio deberían ser de este estilo.

rel=”help”

El atributo help hace referencia a un enlace en el que se da información de ayuda al documento actual, de forma que queden relacionados por este vínculo.

rel=”license”

En el caso de license se hace referencia al documento que da información de los derechos sobre la mayor parte del contenido de la página. Este elemento no distingue entre el contenido principal o un subcontenido, por lo que se ha de especificar claramente por parte del creador.

Por razones históricas, también se puede usar rel=”copyright”.

rel=”nofollow”

Podría haber desaparecido pero el nofollow creado por Google ha llegado para quedarse, algo normal teniendo en cuenta que el HTML 5 tiene una gran influencia por parte del gigante de Mountain View.

El atributo nofollow varía de su original por Google y se establece como un enlace que indica que no tiene nada que ver con el autor o editor de la página actual, o que ese enlace hace referencia a un documento principalmente publicitario o con contenido comercial en el que hay una relación entre las dos partes.

rel=”noreferrer”

Esta es una de las nuevas aportaciones más interesantes de los enlaces en HTML 5, y es que con este parámetro se podrá indicar que los enlaces no incluyan un referrer dentro de las cabeceras HTTP.

Cuando un usuario navega de una página a otra, la página de destino recibe un parámetro que es la página desde donde se viene, y con este elemento esa información desaparecería.

rel=”search”

Otro de los elementos que puede ser muy interesante en muchos sentidos es el del search. Este tipo de enlace hará referencia a páginas y/o contenidos que simplemente sean resultados de búsqueda. Habitualmente hay páginas de este estilo que sólo se utilizan para hacer los sitios más rastreables, y que en el caso de los robots de búsqueda tal vez no sea necesario posicionar, por lo que este elemento ayudaría a ello.

rel=”sidebar”

Los elementos que estén en un plano secundario, cmo son los enlaces que podemos encontrar en un menú de opciones secundarios deberían llevar este enlace. Básicamente lo que hará es abrir los contenidos en una navegación secundaria y así no molestar a los contenidos primarios.

La verdad es que pensando un poco en futuro no acabo de tener presente cómo reaccionarán los navegadores y rastreadores ante este tipo de enlaces. habrá que ver el uso que se le comienza a hacer y tomar decisiones.

rel=”tag”

Este tipo de enlace hace referencia a una palabra clave (tag) que hace referencia al documento actual en el que se encuentra. También hay que dejar claro que esto no ha de utilizarse para las “nubes de tags”.

Haciendo un poco de revisión mental, vendría a ser, en un blog, las palabras clave que se suelen poner al final de un artículo, que sí que representan al artículo en sí, pero, claro está, que una nube de tags no representa al actual sino a todo el sitio.

rel=”index”

Este tipo de enlace es un indicador de la situación con respecto al resto del sitio. En el caso del index hace referencia a que el documento es parte de una estructura jerárquica y que este enlace es el inicio de todos ellos.

De forma histórica este se ha podido llamar top, contents o toc.

rel=”up”

Este es otro de los indicadores se situación dentro de un árbol jerárquico. En este caso, el enlace que se indica significa que está a un nivel por encima del documento actual.

<nav>
  <p> <a href="/" rel="index up up up">Main</a> »
  <a href="/products/" rel="up up">Products</a> »
  <a href="/products/dishwashers/" rel="up">Dishwashers</a> »
  <a>Second hand</a> </p>
</nav>

rel=”first”

Aunque en este caso no va a indicarnos un árbol jerárquico, si que este elemento nos va a indicar la forma de navegar del sitio, por donde empezar y como seguir… En el caso de first nos va a indicar el inicio de una secuencia de documentos.

Por razones históricas también se podrán ver begin y start.

rel=”last”

Y de la misma forma que hay un principio con first, tenemos un final con last que indica el final de la secuendia de documentos relacionados.

rel=”next”

Al igual que en los casos anteriores, este también indica una secuencia de documentos, y en el caso de next indica el siguiente documento a tener en cuenta.

rel=”prev”

Y como no podía ser de otra manera, con prev tenemos relacionado el elemento anterior al actual.

otros rel=””

Hay otra serie de elementos que están en proceso de desarrollo, o ya han sido aceptados. Algunos de ellos son:

  • acquaintance: enlace que representa que el responsable del documento actual conoce a la persona del documento destino.
  • child: enlace que representa al hijo de la persona del creadora del documento actual.
  • co-resident : enlace que representa que el creador del documento de destino reside en el mismo domicilio que la del documento de destino.
  • co-worker : enlace que representa que el creador del documento de origen es compañero de trabajo del creador del documento de destino.
  • colleague: enlace que representa que el creador del documento de origen es colega del creador del documento de destino.
  • contact: indica que el creador del documento de destino es un contacto del documento origen.
  • crush: la persona del documento de origen se siente atraido por la persona del documento destino.
  • date: la persona del documento de origen está saliendo con la persona del documento destino.
  • friend: la persona del documento origen es amigo de la persona del documento destino.
  • kin: la persona a la que se hace referencia es parte de la familia lejana del origen.
  • me: la persona del documento origen es la misma que la del documento destino.
  • met: la persona del documento de origen ha cumplido en lo que se refiere a la persona de destino.
  • muse: la persona del documento de destino es inspiración para la persona del documento de origen.
  • neighbor: la persona del documento de origen y la de destino viven cerca / son vecinos.
  • parent: la persona a la que se hace referencia es uno de los padres de la persona de origen.
  • sibling: la persona a la que hace referencia el documento de destino es hermano de la de origen.
  • spouse: la persona a la que hace referencia el documento de destino es cónyugue de la de origen.

Y la verdad es que con respecto a los enlaces, poco más a decir… sin duda es uno de los elementos que más juego va a dar en el HTML 5, y es que la combinatoria que permite es bastante grande.

HTML 5: los bloques de contenido textual

Hace unos días os comentaba los bloques genéricos que contienen la estructura de las páginas en HTML 5, y ahora toca los bloques que contienen texto, y su forma de organizarse…

Parece que no, pero aunque muchos elementos de organización de textos son muy parecidos, no se han de utilizar para las mismas cosas… y el objetivo de esta entrada es ver esos elementos y los pocos nuevos que se han añadido… ¿comenzamos?

p

El elemento p es sencillo de definir: es un parágrafo. Se podría decir que es el elemento básico a la hora de escribir un contenido… Y poco más a decir…

hr

El hr históricamente se ha utilizado como “barra”. Su uso real es el de separar párrafos o contenidos temáticos, de forma que si un artículo tiene varios temas, se deberían separar con este elemento.

pre

El elemento pre tampoco ha variado excesivamente, aunque sí que creo que va a tomar algo más de importancia que antes. Básicamente se utiliza para mostrra texto preformateado, de forma que lo que se indique dentro d este bloque aparecerá tal y como se ponga. Algunos ejemplos para lo que podría servir son una versión “plana” de un correo, código fuente de un ordenador, en el que se mantendrá la estructura, texto ASCII…

Un detalle interesante es que este elemento debería ir acompañado de otros elementos que indican el tipo de texto que es. Por ejemplo, si es código informatico, usaríamos el code algo como <pre><code>...</code></pre> o de otros elementos como samp y kbd.

blockquote

Cuando vayamos a citar un fragmento utilizaremos el elemento blockquote. Este elemento es para citas bastante grandes, sobretodo que se encuentran el otros sitios web. Y es que para ello dispone de un atributo llamado cite en el que se indicará la procedencia del texto.

De esta forma, tendríamos algo como esto:

<p>Esto es un fragmento de <i>un ejemplo</i>:</p>
<blockquote cite=”http://www.example.com/ejemplo.html”>El perro de San Roque no tiene rabo,
<br>porque Ramón Rodríguez se lo ha cortado…</blockquote>

ol

Uno de los elementos que tenía algunas papeletas para desaparecer (y ser sustituido por el propio ul con algún atributo) era el ol, las “listas ordenadas”. Básicamente son los listados que van numerados de alguna u otra forma.

Este tipo de listado tiene dos posibles atributos, el start, que lleva como parámetro el primero de los números por los que ha de empezar a contar y un segundo parámetro, el reversed, que simplemente indica que el listado es inverso. Un ejemplo sencillo sería:

<ol start="3" reversed>
  <li>...</li>
  <li>...</li>
  <li>...</li>
<ol>

ul

Al igual que las listas ordenadas, el ul son las listas desordenadas. El funcionamiento es el mismo que el de las ordenadas, eso sí, no tiene ningún tipo de parámetro. El resto es igual…

li

El li es la lista de elementos (list items) y representa cada uno de los elementos tanto de las listas ordenadas como las desordenadas. En el caso de las listas ordenadas sí que pueden llevar un atributo value. Este atributo puede forzar el número que ha de aparecer en el listado.

dl

El dl es una lista descriptiva. Este es un elemento contenedor de un listado que siempre tiene dos elementos, uno primero que es el nombre dt y el segundo, los valores dd.

Este contenedor permite tener varias combinaciones de elementos, es decir, podriamos tener varios nombres con un valor, un nombre con varios valores o varios nombres con varios valores…

Este elemento no ha de utilizarse en caso de querer mostrar un diálogo, ya que para eso hay otros elementos más adecuados.

<dl>
  <dt>Actualizar cada</dt>
  <dd>60s</dd>
  <dt>Autores</dt>
  <dt>Editores</dt>
  <dd>Joe Black</dd>
  <dd>Black John</dd>
</dl>

dt

Como ya comentaba antes, el dt es el elemento que define la parte del “nombre” de un listado descriptivo.

dd

Y el dd es el elemento que da la descripción, definición o valor en la lista.

figure

Otro de los nuevos elementos que puede dar mucho juego va a ser figure, sobre todo porque va a darle vidilla a ilustraciones, diagramas, fotografías, código… y es que este bloque permitirá que se trate la información contenida en él de una forma distinta, a modo de “añadido” o apéndice suplementario a la información general.

Este elemento también es contenedor, y puede ir acompañado del siguiente, el figcaption.

El ejemplo más visual y claro de esto es el de una imagen a la que, debajo, le queremos añadir una descripción sobre lo que hay en la imagen, a modo descriptivo. De todas forma,s como decía, no ha de ser una imagen, puede ser un vídeo, un código o cualquier otro elemento.

<figure>
  <img src="imagen.jpg" alt="Cuadro muy interesante de unas bailarinas...">
  <figcaption>Las bailarinas de la calle Mayor</figcaption>
</figure>

figcaption

El elemento figcaption representa la “leyenda” del contenido de un figure.

div

Es curioso que haya tenido que dejar el div para el final de todo. Pero es que este tag tan utilizado “ya no significa nada”. Simplemente es “un contenedor” que puede tener “hijos” y agruparlos, pero nada más…

Como ya comenté hace unos días, hasta hace bien poco este elemento ha sido el que nos ha permitido crear los sitios web en los últimos años de una forma masiva, pero con la nueva versión queda reducido a un elemento secundario que ha sido sustituido por otros tantos.

Su uso será similar al del section aunque la gran diferencia, probablemente es que, si ese se usa para agrupar bloques de elementos, este se debería usar para agrupar bloques de contenido más bien textual.

Hay que tener en cuenta también que este elemento permite el uso de atributos globales, por lo que su combinación con title y lang podrían tener un uso mayoritariamente semántico (de ahí que haya pasado a la lista de elementos de contenido textual y haya salido de los blqoues de contenido estructural).

Y, hasta aquí la explicación de hoy sobre HTML 5. Ahora que ya tenemos las estructuras tanto generales como textuales sólo queda comenzar por cada uno de los elementos que van a dar vidilla a nuestro sitio web.

OJO internet busca jefazo

Después de ya varios años emprendiendo y tirándome a la piscina he aprendido varias cosas, y una de ellas es que, como dice uno de mis socios, soy bueno emprendiendo, pero de los que están empujando.

Y ahora con OJO internet ha llegado el momento de hacer eso… a parte de que no tengo mucho tiempo para dedicarle a la parte más empresarial (y casi me atrevería a decir que tampoco editorial), es el momento de que OJO tome un cambio de rumbo y para ello estamos buscando una persona, un emprendedor que quiera hacerse cargo del sitio. Teniendo en cuenta que la empresa está en Barcelona,s ería interesante que fuera de aquí y básicamente que le guste asistir a los eventos relacionados con Internet para poder así usar sus habilidades de desarrollo de negocio, negociar alianzas y pueda encargarse de la gestión de la publicidad de los sitios.

En general, y como resumen, buscamos al “jefazo” de OJO internet para que lleve adelante el proyecto al que yo ahora no puedo dedicarle el tiempo que me gustaría… y si te interesa sólo tienes que ponerte en contacto conmigo.

HTML 5: cómo estructurar, ahora, una página

Hace unos días os explicaba algunos de los cambios genéricos en el HTML 5, y después cómo ha de ser la cabecera del sitio. Pero si una cosa ha cambiado mucho en cuando al diseño de las distintas páginas del sitio es la introducción de lo que se puede llamar “los tags de la estructura web”.

Hace unos 10 años, cuando se quería hacer una página, te podías plantear el uso de los frames que eran la forma más sencilla de no tener que repetir y repetir infinidad de veces el mismo código. Con la entrada de los lenguajes de programación esto comenzó a variar y se usaban tablas para dar formato al sitio… La aparición de los CSS hizo que los div se convirtieran en la mejor opción para formatear los sitios, y ahora llega el HTML 5 que incluye unas nuevas etiquetas que solucionan todos estos procesos genéricos.

Además, estas nuevas etiquetas, si lo miramos desde el punto de vista SEO, dan y quitan peso a algunas secciones de las páginas que costaba analizar. Mucho se ha hablado de la indexación por parte de Google del blogroll, que con estos nuevos tags se eliminarían.

De una forma muy resumida, tendríamos que:

Estructura básica con HTML 3

Estructura básica con HTML 4

Estructura básica con HTML 5

Y es que los nuevos tags, a parte de los que se muestran en la imagen, van a facilitar mucho la estructuración de los sitios. Así que, una vez más, comencemos con las etiquetas dedicadas a dar formato a los sitios:

body

Aunque el elemento body no se utiliza directamente en la maquetación de un sitio, creo que es bastante claro que es el mayor contenedor de información de todos, y por eso lo he acabado poniendo en estas explicaciones. Siempre he dicho que el head recoge la información que los usuarios “no ven” y que el body representa todo lo contrario, el contenido visible de la página… Este elemento no varia en nada a sus versiones anteriores, aunque sí es cierto que se podrán hacer “más cosas sobre él”, pero eso no es lo que toca ahora (ya explicaré en entradas posteriores).

header

Este sí que es uno de los nuevos elementos. Y es que header va a dar mucho de sí, y aunque muchos simplemente lo usarán para indicar el bloque contenedor de la cabecera (bloque superior de información) que suele haber siempre en las páginas, también se puede usar en otros puntos del sitio.

En principio se presenta como un contenedor que agrupa elementos introductorios o un conjunto de información referente a lo que a continuación se pondrá.

De forma resumida, yo haría dos grandes usos de este elementos:

  • Cabecera de la página web, donde se incluirían el logo, el menú de navegación y esas cosas típicas de la cabecera…
  • Encabezado de algunos bloques de información. Por ejemplo, si tuvieramos un contenido que es la ficha de un libro, pues en este header incorporaríamos como bloque el título del libro y una pequeña ficha técnica, como encabezado del resto de información.

De todas formas, no creo que mucha gente acabe usando este segundo elemento como norma general, por lo que lo dejaría como principal elemento de la primera opción, como cabecera del sitio.

footer

El elemento footer va a ser muy parecido al header anterior, aunque quizá sí que tenga más utilidades que no el otro… Básicamente se ha incluido como agrupador de elemento al final de otro… Por norma general los sitios web tienen un pie de página en el que se indican datos legales y similares, y esta podría ser la principal función, aunque no está pensado para que sea la única.

De la misma forma que el otro, hay dos funciones principales para el elemento:

  • Pie de página del sitio, donde se encuentran los datos legales y esas cosas…
  • Pie de bloque de contenido, donde incorporar información como la fecha, enlaces relacionados, nube de tags y similares

Como digo, aunque el segundo caso puede que se utilice en alguna ocasión, la principal funcionalidad se le dará a la primera de ellas.

article

Y ahora llegan las curvas, así que agárrense fuerte a la silla. Y es que el nuevo elemento article va a revolucionar los contenedores y el SEO. Este elemento viene a ser el “contenedor” de lo que es importante en la página. Puede haber varios y es el agrupador de lo que vendría a ser “lo indexable” por un buscador… lo importante, vaya…

De todas formas, aunque al principio parecía que el elemento section iba a ser el que agrupase los contenidos, he llegado a la conclusión por los ejemplos que está lanzando la W3C que no es así, que el gran contenedor de información útil es el article.

Para hacernos una idea básica, una página tendría este formato:

<body>
  <header>...</header>
  <article>...</article>
  <article>...</article>
  <article>...</article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Esto daría a entender que hay 3 bloques de información principales en el sitio, que son los contenidos que el usuario ha de contemplar, además de una cabecera, un menú lateral y un pie de página… Que conste que este ejemplo es muy básico… luego intentaré poner algo más trabajado, al final del artículo, cuando haya explicado todos los elementos.

Dentro del article encontraríamos elementos como un header, un footer y varios section, que comentaré en un momento…

aside

Otro de los nuevos elementos… el aside viene a ser “la barra lateral” de toda la vida. Digamos que, por norma general, este bloque incluirá la zona de navegación del sitio web, las categorías, opciones o como queramos llamarlo…

Como he puesto en los gráficos anteriores, vendrían a ser el contenido que, página a página dentro del sitio web se repite junto a la cabecera y el pie) e intuyo que los buscadores le darán menos peso a este bloque ya que notarán que es “contenido duplicado” y que no tiene utilidad a la hora de posicionar.

Y la verdad es que poco más a decir de este elemento… simplemente que es un agrupador y que estará lleno de sections.

section

Y aquí está la madre del cordero. El nuevo elemento section viene a ser el <div id="nombre"> que llevamos usando años y años.

Este elemento se perfila como el nuevo div agrupador de cosas, ya sean muy grandes o muy pequeñas. Digamos que una página de noticias tendría un gran article con un primer section especial, que sería el header (o el hgroup que luego comentaré), luego tendría otro gran section que vendría a ser el artículo en sí, y unos cuantos más como podrían ser los elementos relacionados, fichas relacionadas, adjuntos como imágenes o vídeos… en fin, que nos vamos a hartar de usar los section para cualquier agrupación o distinción de elementos.

<article>
  <header>...</header>
  <section class="noticia">...</section>
  <section class="relacionados">...</section>
  <section class="multimedia">...</section>
  <footer>...</footer>
</article>

Como idea básica creo que este ejemplo resume básicamente lo que quiero explicar…

address

Uno de los elementos que, ideológicamente no ha variado, pero que personalmente creo que va a tomar muchísima relevancia a partir de ahora es el address. Y es que hasta ahora en este elemento se indicaban direcciones postales y cosas de este estilo… pero ahora la indicación del W3C ha variado y nos piden que no incluyamos esa información, sino que se utilice como elemento añadido (como un section especial) en el que se den datos de contacto del sitio entero o del article en cuestión.

Como digo, es curioso que se haya dado un giro a este elemento, aunque supongo que por un tema de derechos de autor, sumado a las mejoras en cuanto a geolocalización y similares parece tener mucha más lógica que antes, que casi no se utilizaba para nada…

nav

Dentro de unos años, cuando ejerza de abuelo contador de batallitas, podré decir que este elemento es el que provocó un cisma en el mundillo SEO. Aquí estamos, el nav, el elemento que separó a los incondicionales del pagerank, del link-juice, del link-builing y de todas esas cosas (a mi parecer sin sentido) de los que no piensan tanto en los enlaces y sí en los contenidos.

Este elemento es el que agrupa los enlaces. Y se vende como eso, un section especial para los enlaces, tanto salientes como internos. Aun así, no todos los enlaces han de estar agrupados en este elemento, sino sólo aquellos grandes bloques que incluyan enlaces, sobre todo aquellos habituales que incluyen los términos y condiciones, otras secciones del sitio.

Y aunque probablemente aquí habría que acabar este articulo sobre los elementos que agrupan otros elementos, es curioso que hayan incluido los encabezados como elementos contenedores y no de formato. Esto dice más de lo que parece en cuanto a la importancia de estos elementos.

h1 – h6

Estos elementos son los títulos de las diferentes sections y cada h tiene un peso / ranking específico en base al número que tiene, del 1 (el más alto) al 6 (el más bajo). Hay que recordar que por los estándares de usabilidad y nosequémás, de h1 sólo puede haber uno por página, para que “no salten las alarmas”.

hgroup

Este es otro elemento nuevo, aunque el hgroup no acabo de entenderlo, ya que dudo que se utilice con mucha frecuencia y también dudo de su utilidad en todos los sentidos.

En principio el elemento se define como un agrupador de h. Esto significa que los hgroup sólo pueden incluir elementos de encabezado. eso sí, su funcionalidad máxima es que, en cada bloque de encabezados, el ranking se resetea teniendo pero “uno” el de menor valor. En otras palabras, que tendríamos algo como:

<hgroup>
  <h1>...</h1>
  <h2>...</h2>
</hgroup>
...
<hgroup>
  <h2>...</h2>
  <h4>...</h4>
</hgroup>

El primero de los grupos tiene 2 cabeceras, el primer h1 tendría un peso de h1, y el h2 tendría un peso de h2; pero en el segundo bloque, el h2 tendría un peso de h1 y el h4 tendría un peso de h2… Al menos eso es lo que la teoría dice… pero, vuelvo a decir, no sé hasta que punto tiene mucho sentido utilizar este elemento.

Y ahora sí, para acabar vamos a hacer un repaso de estos elementos de los que he ido hablando ahora, y para ello os dejo un ejemplo de página, que no deja de ser un HTML al que hay que ver el código fuente, hecho exclusivamente en HTML 5. NOTA: el código no está diseñado, por lo que si se abre en un navegador se verá como mucho texto plano, si orden aparente… en resumen, que sólo sirve para ver el código fuente…).