Las siglas HTML corresponden a la denominación de un lenguaje técnico de marcado con el que se codifican las páginas web: HyperText Markup Language. Un lenguaje de marcado está formado por una serie de convenciones que sirven para indicar cómo se debe mostrar un contenido en su formato final, por ejemplo, una vez impreso o, en nuestro caso, en la pantalla de ordenador o de un móvil.
Una página web es un documento compuesto por piezas y fragmentos de información de diferente tipo (textos e imágenes) y presentado como un todo gracias al navegador, que es capaz de interpretar los diferentes componentes de la página y presentarla de una forma coherente.
En el ejemplo de la captura precedente vemos el ejemplo de una página web extremadamente simple pero completa. Vemos el contenido, por ejemplo, una línea de texto que indica «This is a Heading«, rodeada de unas etiquetas <h1> y </h1>.
Rodear una serie de contenidos con etiquetas como estas se denomina «marcar» un documento, y el lenguaje HTML proporciona la lista de etiquetas que pueden usarse para crear una página web.
Para que este navegador (Chrome, Firefox o Safari) sepa como unir todas las piezas de la auténtica criatura frankensteiniana que es casi toda página web, necesita encontrarse esas piezas o fragmentos codificadas siguiendo una convención determinada. Esa convención es el lenguaje o protocolo HTML.
H de Hypertext
La H de HyperText se debe a que este protocolo proporciona también un medio para enlazar páginas entre ellas, aunque estén situadas en ordenadores ubicados cada uno de ellos en una punta distinta del planeta, todo ello en unión con otro protocolo, el HTTP.
La parte Text (HyperText) es porque se supone que el origen y el destino del enlace se hace entre fragmentos de texto. Actualmente, ya no es así. El origen puede ser una imagen y el destino igual. Todas las posibilidades están actualmente permitidas, como es sabido (texto-imagen, imagen-texto, etc).
La M de Markup se debe a que proporciona una serie de etiquetas (es el nombre técnico) con las que se puede marcar y de este modo estructurar el contenido de la página. Las dos más universales son la etiqueta p, por paragraph, que permite marcar un texto como un párrafo y el grupo conocido como hx, por heading, y de la que hay 6 variedades, de la h1 a la h6, que sirve para marcar títulos y subtítulos (el h1 marca el título principal, y así sucesivamente).
La L es de Language y corresponde al hecho de que todo esto junto: las etiquetas (alrededor de un centenar) más las reglas para utilizarlas se supone que constituyen un lenguaje; artificial y limitado, pero todo un lenguaje.
- Aquí tenemos el listado de las etiquetas HTML.
El código fuente
¿Dónde están estas marcas o etiquetas del HTML? Están en el contenido de cada página, pero solamente las podemos ver si activamos la opción del navegador que permite visualizar directamente el así llamado código fuente.
Código fuente es el nombre que recibe la página cuando la vemos como lo que es en realidad: un archivo de texto puro, con etiquetas HTML y otras instrucciones. Estas, sirven para unir en la ventana del navegador como un todo coherente los distintos elementos que la componen (también podemos ver el código fuente si abrimos el archivo de la página con un editor de HTML o con el bloc de notas en lugar de un navegador).
HTML5 = secciones y etiquetado semántico
La cuestión es que el lenguaje HTML evoluciona y cada versión recibe un número. La última es, justamente, HTML5. No solamente es la última versión, sino probablemente la más importante desde que se inventó el lenguaje, porque todas las anteriores, al menos entre la 3 y 4 contenían pocas muy pocas innovaciones.
La importancia de HTML5 radica, al menos, en dos cosas. Primera: publicar con HTML5 significa más opciones, más posibilidades, en definitiva más potencia expresiva que usando cualquier versión anterior.
Además, al publicar con HTML5 usamos una versión más madura y con soluciones más sabias que versiones anteriores que, aunque fuera de forma involuntaria, alentaban malas prácticas de programación de las páginas que luego hacían más difícil su mantenimiento.
En segundo lugar, radica en algo cada vez más importante para los buscadores y para la nueva era de la búsqueda semántica que están intentando aportar, es decir, una era en la que los buscadores interpreten mejor el contenido de las páginas.
Aunque no van demasiado lejos, por primera vez en la ya larga historia del lenguaje HTML, la versión 5 incorpora etiquetas y atributos (las etiquetas pueden tener atributos, otro término técnico) con un claro valor semántico, más allá de las etiquetas p o hx mencionadas.
La unión con el SEO
En concreto, HTML5 proporciona etiquetas para identificar, dentro de una misma página, secciones como la cabecera, la navegación, el artículo principal, el despiece, etc.
No son etiquetas semánticas en el sentido lingüístico, es decir, no informan del contenido (p.e., no dicen si es un artículo de economía o de cultura, etc.), pero comparadas con etiquetas como p (párrafo) o bold (negrita), aportan mucho más significado.
Cuando los buscadores como Google encuentran páginas construidas con HTML5 y con utilización de etiquetas que marcan de forma adecuada cada sección, interpretan mucho mejor los contenidos. Las palabras clave que aparezcan en una sección como <article> y <aside> p.e., tendrán más importancia porque indican que forman el núcleo de la misma.
Palabras clave en secciones como <figcaption> o <figure>, el buscador sabrá que se refieren al contenido del archivo de imagen asociado, así que el buscador, podrá «ver» el contenido de esa imagen, etc.
- Aquí tenemos un listado detallado de las etiquetas semánticas.
Además, el lenguaje HTML5 está especialmente preparado para ampliar la semántica de las publicaciones web usando otro estándar complementario: una clase de metadatos, denominados microdata, contemplados también por el protocolo schema.org, aprobado por los buscadores y que utiliza etiquetas y atributos del lenguaje HTML5 para expresar con mucha precisión el significado exacto de determinados contenidos.
Respeto por los estándares = protección de la inversión
Afortunadamente quedan muy atrás los tiempos en los que cada navegador aportaba sus propias etiquetas exclusivas al lenguaje HTML, con lo cual la confusión y toda clase de problemas de compatibilidad quedaban garantizados.
Aquellos tiempos provocaron una sana reacción por parte de la élite de los diseñadores y programades de la web, en forma de una llamada al respeto por los estándares. Quedó bien establecido hace casi una década que el lenguaje de la web debía partir de un estándar respetado por todos, y que las versiones propietarias de cada navegador y otras excentricidades debían quedar eliminadas.
De este modo, usar siempre la versión actual del HTML es una forma de respeto por los estándares (que también tiene sus problemas, pero no vamos a entrar ahora en ellos).
Pero lo más importante es que ese respeto por los estándares es la mejor garantía de protección de la inversión, ya que cada nueva versión del lenguaje HTML, al estar producida por el mismo organismo normalizador (el W3C), mantiene una compatibilidad descendente, es decir, cuando aparezca la norma HTML6, y los nuevos navegadores de adapten a ella, las páginas creadas con HTML5 se seguirán visualizando perfectamente.
Otras ventajas de respetar los estándares es que incorporan una filosofía muy sofisticada (fruto de su ardua construcción entre los múltiples actores que intervienen) siempre en favor de la mejor experiencia de usuario y de una web que permita un acceso universal.
Por ejemplo, usar HTML5 implica también que debe separarse de forma estricta la estructuración del contenido de la página, a cargo de las etiquetas HTML, de su presentación (formato, diseño) a cargo del lenguaje CSS (Cascading Style Sheets, del que no hemos hablado, queda para otra ocasión).
De este modo, el mismo contenido, estructurado con HTML5, se puede adaptar para diferentes pantallas y dispositivos usando hojas de estilo creadas con el mencionado lenguaje CSS.
Esta es la base que permite, para mencionar un caso especialmente importante, que los contenidos de una página se visualicen igual de bien en una pantalla de un ordenador de escritorio y en una pantalla de un smartphone (si las cosas se han hecho bien, claro).
Este es el famoso responsive design (diseño adaptable) que permite que los sitios web se puedan navegar perfectamente desde un móvil, sin que las empresas deban crear dos o más versiones paralelas del mismo sitio. De paso, es la opción que defiende Google para proporcionar mejor experiencia de uso a los usuarios de la web móvil, y en consecuencia, Google posiciona mejor los sitios que usan responsive design.
Impacto en el Periodismo
Se supone que toda publicación digital, en tanto, publicación web, debe utilizar las últimas versiones del HTML por los motivos señalados en los puntso 2 y 3 y en definitiva para aprovechar toda su potencia.
Un sitio de un medio de comunicación tiene necesidades muy sofisticadas, mucho más que la media, en cuanto a formatos y contenidos. Algo que no habíamos dicho todavía, por ejemplo, es que HTML5 aporta también grandes ventajas para publicar contenido multimedia.
Además, gracias a las etiquetas con valor semántico, las noticias y otros productos periodísticos tienen una semántica más clara para los buscadores. ¿Y qué se supone que persigue -y con ahínco- un medio de comunicación?: tráfico, tráfico y más tráfico.
Este tráfico puede llegar en buena parte desde la página de resultados de los buscadores y medios sociales (como Facebook) pero estos buscadores necesitan entender la página para poder presentarla en sus resultados.
Por eso, el uso de un código fuente adecuado es uno de los factores del SEO (Search Engine Optimization). En particular, forma parte de los llamados factores On Page, es decir, de aquellos que en principio están bajo el control del responsable de la página. Lo importante es que puede ser un factor positivo o negativo. Si el código fuente es deficiente, será un factor negativo. Si el código fuente está bien implementado y se adapta a los últimos estándares, será un factor positivo.
Por tanto aquí tenemos la siguiente relación: con HTML5 los sitios periodísticos en particular y los sitios de comunicación y ricos en contenidos en general tienen muchas más posibilidades de ser correctamente interpretados por los buscadores y por tanto, su visibilidad será mayor.
Por otro lado, es impensable que un medio de comunicación no contemple la web móvil. Aquí, de nuevo HTML5 es su mejor aliado. Junto con CSS y algunas tecnologías de programación de servidor adicionales, un medio de comunicación puede tener una sola versión de sus contenidos y conseguir que se visualicen perfectamente en cualquier pantalla (responsive design), lo cual nuevamente afectará a su SEO, ya que Google posiciona mejor los sitios que utilizan esta tecnología adaptativa.
Por último, la mayor complejidad (en sentido positivo) del lenguaje HTML5 permite generar sitios con mejor navegación lo que redunda también en una mejor experiencia del usuario, con lo cual aumentamos la posibilidad de vuelva a visitarnos, por un lado, y de que sus visitas sean más largas, por otro.
Cómo se implementa HTML5
Ningún sitio profesional, y menos el sitio de un medio de comunicación, puede permitirse trabajar sin usar un CMS (Content Management System), y es aquí dónde podemos tener todas las ventajas o todos los problemas del mundo para aprovechar la potencia de HTML5.
Si disponemos de las ventajas de automatización de un CMS, entonces no disponemos de la posibilidad de usar directamente HTML. O una cosa u otra. Y editar, publicar y mantener un sitio complejo usando directamente HTML (p.e. con un editor de páginas web local) es una locura.
Entonces necesitamos que el CMS que usamos para gestionar y publicar los contenidos utilice HTML5 y no versiones anteriores del HTML y no digamos soluciones completamente desacreditadas (como las basadas enteramente en flash).
Además, necesitamos que el CMS esté bien adaptado para obtener provecho del etiquetado semántico, de lo contrario, tampoco nos servirá de mucho su (discreto) aporte a favor de la web semántica.
Esta adaptación suele venir, en el caso de un CMS generalista como WordPress de la unión de dos o más piezas: en primer lugar, el propio CMS, en segundo lugar un tema (theme) que sea consciente de las etiquetas y del marcado semántico que aporta HTML5 y, en tercer lugar, de programas complementarios como plugins y widgets que aportan recursos adicionales en caso necesario.
Como ejemplo, el sitio de un medio de comunicación que utilice WordPress necesitaría estas condiciones para aprovechar HTML5 y su impacto positivo en el SEO:
- Una versión actualizada de WordPress (versiones antiguas pueden tener problemas de compatibilidad)
- Un tema o theme que sea expresamente compatible con HTML5 y utilice las secciones principales, como <nav>, <article>, etc. en lugar de utilizar etiquetas genéricas como<div>, p.e. para marcar cada sección. Los mejores temas, además, generan un código fuente adicional para buscadores, denominados datos estructurados, y lo hacen de forma automática,
- Un plugin o complemento de SEO que refuerce el uso de metadatos en las secciones expresamente previstas para ello, como <title>, <description>, etc.,
El consejo por tanto sería: usar un CMS, por supuesto; pero no usar CMS y/o temas que no sean expresamente compatibles con HTML5. Además, asegurarse que está adecuadamente programado para que los contenidos y la estructura de los mismos queden marcados de forma automática o semi automática con las etiquetas semánticas que correspondan en cada caso.
De paso, debería implementarse algún módulo en forma de plugin que permita añadir y editar los metadatos. Por último, pero no menos importante, el tema usado debería ser del tipo responsive design, que ya hemos comentado, es decir, debería permitir que el sitio se viera igual de bien en la diversidad de pantallas que utilizan actualmente los usuarios para acceder a las noticias, y que van desde las de 17 pulgadas o más, de un ordenador de sobremesa a las pantallas de entre 4 o 5 pulgadas como las de un smartphone.
Todo esto lo permite de forma sumamente eficiente algunos CMS modernos, entre ellos de forma notable WordPress, y de aquí su enorme presencia en la web en general: se estima que casi el 30 por ciento de los sitios web están actualmente gestionados por WordPress, y en particular su notable implantación en el sector de las que podríamos llamar las PYMES de la Comunicación, es decir, la gran mayoría de los nuevos medios nacidos digitales.
En el caso de algunos medios de comunicación que utilizan CMS de desarrollo propio o proporcionados por empresas especializadas, valen las mismas consideraciones. El CMS debería estar adaptado al uso de las etiquetas semánticas que aporta HTML5 y los elementos adicionales de metadatos que hemos señalado.
Conclusiones
El sistema de marcado HTML5 está en la infraestructura de la web aportando las etiquetas, equivalentes a palabras, y las reglas, eqyuivalente a la sintaxis, para disponer de un lenguaje universal estándard con el cual construir páginas web, y que estas se puedan interpretar por cualquier navegador en cualquier lugar del planeta.
Conocer aspectos básicos del lenguaje HTML5 puede ayudar a los periodistas y redactores que utilizan medios digitales y CMS como WordPress para crear y difundir sus contenidos con mayor eficacia.
