A continuación, veremos qué es Markdown exactamente, cómo funciona, qué es necesario para usarlo, en que entornos resulta práctico y, por supuesto, repasaremos brevemente algunas de las muchas herramientas que existen para poder utilizarlo, tanto en local como en la web.

Qué es Markdown

Markdown es un lenguaje de marcado que facilita la aplicación de formato a un texto empleando una serie de caracteres de una forma especial. En principio, fue pensado para elaborar textos cuyo destino iba a ser la web con más rapidez y sencillez que si estuviésemos empleando directamente HTML. Y si bien ese suele ser el mejor uso que podemos darle, también podemos emplearlo para cualquier tipo de texto, independientemente de cual vaya a ser su destino.

Como explica «John Gruber»:http://daringfireball.net/projects/markdown/, uno de sus creadores, Markdown es realmente dos cosas: por un lado, el lenguaje; por otro, una herramienta de software que convierte el lenguaje en HTML válido. Para entenderlo mejor, veámoslo con un ejemplo. Digamos que queremos escribir un encabezado de nivel 1. Esto en HTML se hace con la etiqueta h1. Por lo tanto, escribiríamos:

<h1>Encabezado</h1>

Sin embargo, usando Markdown no necesitaríamos escribir la etiqueta, sino tan sólo poner una almohadilla al principio:

# Encabezado

Entonces, cuando el programa interprete el Markdown, lo convertirá al HTML correcto: en lugar de escribir nueve caracteres, hemos escrito uno para conseguir lo mismo. Si imaginamos que en lugar de una sola línea se trata de un texto mucho más extenso y con mucho formato que aplicar (más encabezados, listas, e incluso tablas), la utilidad del Markdown se vuelve evidente.

Cómo es la sintaxis de Markdown

La sintaxis es muy sencilla y cuenta con varias opciones diferentes para algunos de sus elementos. Básicamente, se trata de añadir ciertos caracteres al inicio de la línea o antes y después de los elementos a los que vamos a aplicar el formato. Veamos a continuación tan sólo algunos ejemplos para hacernos una idea de su sencillez de uso.

Como hemos visto en el ejemplo anterior, los encabezados se crean poniendo almohadillas. El número de almohadillas que pongamos se corresponderá con el nivel de encabezado que queremos usar. Por ejemplo, si queremos un encabezado de nivel 2 (h2), pondremos dos almohadillas; si queremos uno de nivel 4 (h4) pondremos cuatro almohadillas. Así, del 1 al 6, que son los encabezados que tiene el HTML.

Para enfatizar, usamos los asteriscos antes y después de las palabras. Dado que hay dos formas de enfatizar, cursivas y negritas, usaremos un asterisco antes y después para las cursivas y dos asteriscos para las negritas, ambos sin espacios.

En cuanto a las listas, dado que en HTML hay de dos tipos, numeradas y sin numerar (u ordenadas y desordenadas), usaremos números seguidos de un punto y un espacio para cada elemento en el caso de las primeras y asteriscos y un espacio (ahora sólo al principio), signos más o guiones para las segundas.

Como la intención de este artículo no es reseñar todos los elementos de la sintaxis, os remito a la «página original de John Gruber»:http://daringfireball.net/projects/markdown/syntax, donde podéis encontrarlos todos. Sin embargo, si preferís algo en español, os recomiendo la «página de Joe Di Castro»:http://joedicastro.com/pages/markdown.html, que explica muy bien y de manera atractiva cada uno de los elementos.

Mi recomendación es que guardéis estas páginas en vuestros marcadores si vais a empezar a usar Markdown, pues al principio las estaréis consultando bastante. A medida que uséis este lenguaje, terminaréis por memorizar el uso de todos los caracteres.

¿Es Markdown para mí? Ventajas de usarlo

Si habéis llegado hasta aquí, tal vez os estaréis preguntado si Markdown es para vosotros y que beneficios ofrece su utilización. En principio, hay que reconocer que quienes más lo apreciarán son aquellos que publican contenido en la web de manera regular. Sin embargo, cualquiera que use un teclado como herramienta principal de trabajo podrá sacarle partido. Veamos entonces algunas de las ventajas que tiene su uso. El peso que tenga cada una dependerá de vosotros y considerarlas os ayudará a decidir si debéis probarlo o no.

Escribir para web es más rápido y cómodo

Una vez que te acostumbras y conoces mínimamente la sintaxis, completas el texto más rápido. Si lo que hacemos normalmente es seguir un proceso del tipo «escritura -> revisión -> formato», las partes de revisión y formato las podemos hacer al mismo tiempo sin abandonar el teclado.

Además, la sintaxis de Markdown está pensada para que resulte más fácil de leer. Es decir, que los elementos de formato no estorben la lectura, como sí ocurre en HTML. Veamos un ejemplo sencillo, primero escrito con Markdown y luego con HTML

Con Markdown, es más fácil (leer)[https://www.pacosalcedo.com].
Con Markdown, es más fácil leer.

Es más difícil cometer errores de sintaxis

El HTML básico, que es el que necesitamos para dar formato a un texto, es sumamente sencillo de usar. Pero también es muy fácil cometer errores. El más habitual: olvidarse de cerrar una etiqueta de manera adecuada. Markdown hace que un error tan común como éste no se produzca.

Es perfecto para usarlo con editores de texto minimalistas

A mucha gente le gusta escribir en texto plano, utilizando editores de texto o procesadores minimalistas por una cuestión de concentración: muchas veces, no necesitamos tantas herramientas como las que nos ofrece un procesador como Word, especialmente cuando todo lo que vamos a hacer es escribir un texto con un formato básico. De hecho, en ocasiones tal cantidad de herramientas sólo consiguen distraernos e incluso molestar.

Muchos de estos editores guardan los archivos en formato de texto plano. Usar Markdown nos permite que no tengamos que dejar de utilizar nuestra herramienta favorita para darle formato a un texto cuando sea necesario.

Es ideal para el entorno móvil

Si bien existen aplicaciones para dispositivos móviles que nos permiten aplicar formato a un texto, resulta bastante incómodo hacerlo por la misma naturaleza del sistema táctil. Si usamos una aplicación que soporta Markdown, tan sólo se trata de escribir unos pocos caracteres más. Es más rápido y ágil, especialmente si vamos aplicando el formato a medida que escribimos.

Herramientas para usar Markdown

Realmente, para emplear Markdown todo lo que necesitamos es un editor de texto, como el mismo bloc de notas. Sin embargo, hay una segunda parte del proceso que consiste en convertir o interpretar el Markdown como HTML o como otro tipo de documento. Y ahí es donde entran las herramientas pensadas específicamente para el uso de este lenguaje. Veamos algunas de ellas.

• «Dingus»:http://daringfireball.net/projects/markdown/dingus: la herramienta online creada por el propio Gruber. Nos convierte el texto con sintaxis Markdown a HTML, ofreciéndonos también una vista previa del resultado final. Como ventaja es que contamos con una cheatsheet o «chuleta» a la derecha por si no recordamos algunos de los caracteres que podemos usar.
• «Markable»:http://markable.in/: otra herramienta online, pero más potente que Dingus. Nos ofrece un editor que va actualizando en tiempo real el texto que escribimos. Sin registro, una vez que hemos terminado, podemos descargarnos el resultado en HTML o en formato Markdown (es decir, un archivo de texto plano que conserva los caracteres sin conversión alguna). Sin embargo, si nos registramos (de forma gratuita) cuenta con opciones adicionales como la posibilidad de guardar online los documentos, guardarlos en nuestra cuenta de Dropbox o de Evernote e incluso publicar el texto en Tumblr, pudiendo así usarlo como cliente para elaborar textos largos que luego publicaremos en este servicio.
• «Markdown Here»:http://markdown-here.com/: es una extensión para Chrome, Firefox, Safari,Thunderbird y Postbox que nos permite usar Markdown a la hora de escribir correos en Gmail y Yahoo! Mail. Sin embargo, también funciona en otras interfaces web donde se usan editores de texto enriquecido. Si queréis conocer más sobre esta herramienta, ya «hablamos de ella»:https://www.genbeta.com/correo/usa-markdown-para-formatear-correos-electronicos-con-markdown-here hace un tiempo.
• «MarkdownPad»:http://markdownpad.com/: se trata de un programa para Windows del que «os hablamos»:https://www.genbeta.com/herramientas/markdownpad-editando-markdown-en-windows-eficientemente hace ya más de un año. Desde entonces, han sacado su versión 2, que ha sido reescrito desde cero incorporando nuevas funciones (como uso de pestañas o resaltado de sintaxis) y añadiendo una versión de pago con más características.
• «ReText»:http://sourceforge.net/p/retext/home/ReText/: en este caso, hablamos de una aplicación para Linux de la que también os comentamos «aquí en Genbeta»:https://www.genbeta.com/herramientas/retext-interesante-editor-markdown-para-linux en su momento. Además de Markdown, también podemos usar reStructuredText, otro lenguaje de marcado. Tiene modo a pantalla completa y permite exportar a HTML, ODT y PDF.
• «Mou»:http://mouapp.com/: le toca el turno ahora a MacOS, con esta «aplicación reseñada»:https://www.applesfera.com/aplicaciones-os-x-1/mou-un-interesante-editor-web-en-markdown-en-desarrollo-para-os-x-lion por nuestros compañeros de Applesfera hace también un tiempo. Dado que todavía no ha salido de beta, podemos descargar y usar la aplicación de manera gratuita, aunque aquellos que donen algo, recibirán una licencia cuando la versión 1.0 esté disponible.
• «Nocs»:https://itunes.apple.com/es/app/id396073482: en iOS tenemos una gran cantidad de aplicaciones disponibles que hace uso de Markdown, aunque la mayoría son de pago. Sin embargo, existen unas pocas alternativas gratuitas entre las que destaca Nocs, un editor de texto que soporta Markdown, permite guardar nuestros archivos en Dropbox y exporta a HTML, entre otras funciones más.
• En Android, también hay una generosa cantidad de aplicaciones que soportan Markdown, y unas cuantas de ellas son gratuitas. De entre ellas, creo que se pueden destacar algunas como «MarkDrop»:https://play.google.com/store/apps/details?id=net.keepzero.markdrop, «Denote»:https://play.google.com/store/apps/details?id=com.twostorks.android.denote, «Notal»:https://play.google.com/store/apps/details?id=com.fusionfenix.notal y «Minutes Text Notes»:https://play.google.com/store/apps/details?id=com.saelimbilly.genericdatabaseapp. Todas ellas además se pueden sincronizar con Dropbox, que es uno de los criterios que he usado para seleccionarlas.

Estas son algunas de las muchas herramientas disponibles que existen. Los que ya uséis Markdown seguro que conocéis unas cuantas más. Ya sabéis que abajo están los comentarios para que nos digáis cuales son vuestras recomendaciones.

En general todo documento HTML debe comenzar con esta declaración como primera línea:

<!DOCTYPE html>

En este ejemplo hemos indicado al navegador que el documento actual está en formato HTML5. No te preocupes de si la declaración está en mayúscula o minúscula, ya que no es sensible a las mayúsculas.

Modos de Renderizado

Siempre que esta etiqueta esté presente, el navegador utilizará los estándares actuales para representar la página. A este modo de renderizado se le suele llamar «modo estándar»,

Sin embargo, estos estándares no son válidos cuando la página ha sido creada para navegadores, que ya tienen bastantes años a cuestas. Es por ello que la mayor parte de los navegadores entrarán automáticamente en un modo de representación denominado «modo compatibilidad« cuando detecten que la página ha sido creada con otros estándares diferentes a los actuales. A este modo de representación también se le suele llamar «quirks mode».

Los navegadores determinarán cuál de los dos modos utilizar basándose en la declaración DOCTYPE. En la mayor parte de los casos, si quieres evitar el modo compatibilidad, tendrás que usar la declaración que ya hemos visto:

<!DOCTYPE html>

Sin embargo, algunas versiones antiguas del navegador Internet Explorer necesitan que tengamos en cuenta ciertas consideraciones adicionales. En concreto, hablamos de todas aquellas versiones inferiores a Internet Explorer 10, ya que necesitan que la siguiente meta etiqueta esté presente en el <head> de la página:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Versiones de HTML

En esta sección vamos a ver algo de historia. A día de hoy ya no es necesario que leas esto, salvo que estés interesado por temas de compatibilidad. La última versión de HTML es por ahora la versión HTML5, que fue creada siguiendo su propio estándar. Debido a esto, su declaración DOCTYPE es tan sencilla como la que ya hemos visto:

<!DOCTYPE html>

Sin embargo, vamos a mirar un poco más hacia el pasado, en donde nos encontramos con las versiones de HTML que han ido apareciendo desde 1991:

• HTML (SGML): La primera versión, creada por Tim Bernes-Lee en 1991.
• HTML 2.0 (SGML): Publicado en el año 1995, este es el primer estándar oficial, ya que el estándar HTML 1.0 como tal jamás ha existido. Los documentos eran muy simples y todavía no se soportaban las tablas.
• HTML 3.2 (SGML): Publicado en el año 1997, este estándar fue el primero registrado bajo el estándar W3C. Este estándar soportaba applets de Java e imágenes flotantes con texto a su alrededor.
• HTML 4.01 (SGML): Publicado en diciembre de 1997 por primera vez, lanzándose la versión 4.01 en el año 1999, este estándar prescindía de etiquetas obsoletas y agregaba otras nuevas, aunque no supuso una gran revolución. Soportaba diferentes versiones, como la estricta y la transaccional, además de otra que soportaba frames. Tal y como su nombre indica, el modo transaccional era menos escrito que el modo estricto.
• XHTML (XML): Publicado en el año 2000. El consorcio W3C continuó por su cuenta el desarrollo de la siguiente versión de HTML, dando lugar al estándar XHTML. Por otro lado, ciertas empresas como Mozilla, Opera y Apple decidieron desarrollar de forma paralela el estándar HTML5. Finalmente, el estándar XHTML se integró como parte del estándar HTML5.
• HTML5: Publicado en el año 2014. HTML5 incorporaba nuevas etiquetas como aquellas que permiten integrar vídeo o audio a los documentos HTML, todo ello sin necesidad de addons, como había ocurrido anteriormente. Desde entonces no se han lanzado nuevos estándares, sino que el propio estándar HTML5 se fue mejorando progresivamente. Con el tiempo se dejaron de usar muchas de las reglas definidas en el estándar XHTML.

Los estándares previos a HTML5, salvo XHTML, están basados en el formato SGML, que define la estructura de los documentos. Es por ello que se hace necesario definir un esquema DTD (Document Type Definition). Por ejemplo, a continuación tienes la definición DOCTYPE de la versión HTML 4.01 estricta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Por otro lado, XHTML utiliza XML para definir la estructura del documento. Aquí tienes también la definición DOCTYPE de un documento XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Como puedes ver, todas estas versiones requieren que se defina el tipo de documento o DTD. Además, la versión XHTML también necesitaba la inclusión de un espacio de nombres, de modo que soportase ciertas etiquetas. El espacio de nombres se define mediante el atributo xmlns de la etiqueta html:

<html xmlns="http://www.w3.org/1999/xhtml">

Por último HTML5 sigue su propio estándar, por lo que no se requiere que incluyamos la definición del esquema DTD, siendo su declaración muy simple:

<!DOCTYPE html>

Y esto ha sido todo.

Etiqueta nav

La etiqueta nav suele contener la definición de un menú de navegación en su interior. Es habitual incluir una lista en su interior, que puede ser tanto ordenada ol, como no ordenada ul. A continuación tienes un pequeño ejemplo de un menú:

<nav>
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/Empresa">Empresa</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ol>
</nav>

Etiqueta article

Esta etiqueta puede identificar tanto al contenido principal de una página, como por ejemplo este artículo, como a ciertos contenidos secundarios a los que es posible acceder mediante algún enlace, como la lista de artículos de un blog.

Aquí tienes un ejemplo de la definición de la etiqueta article como contenido principal de una página:

<article>
  <h1>Título del blog</h1>
  <p>Aquí va el contenido del blog</p>
</article>

Dentro de un artículo es de esperar que aparezca un encabezado h1 como título principal y varias etiquetas h2-hx que indiquen las secciones en las que se divide.

Aquí tienes también un ejemplo de la definición de varias etiquetas article como una lista de artículos de una página:

<article>
  <h2>Cómo aprender HTML</h2>
    <a href="/articulos/html">Leer más</a>
</article>
<article>
  <h2>Cómo aprender JavaScript</h2>
  <a href="/articulos/javascript">Leer más</a>
</article>

Etiqueta section

La etiqueta section representa una porción o sección del documento. Al igual que ocurría con la etiqueta article, cada sección puede contener una etiqueta h1 y varias etiquetas h2-hx que indiquen las secciones en las que se divide. Eso sí, no es recomendable colocar más de una etiqueta h1 en una página.

Esta etiqueta resulta útil si quieres dividir en varias secciones un artículo que es excesivamente largo. Sin embargo, no suele utilizarse para dividir elementos que no contienen información bien definida, en cuyo caso tendrías que usar la etiqueta div. A continuación tienes un ejemplo:

<section>
  <h2>Una sección cualquiera</h2>
  <p>Texto de la sección</p>
  <img src="/img/mi-imagen.png" />
</section>

Etiqueta div

La etiqueta div es la más utilizada a la hora de definir contenedores genéricos, pudiendo utilizarse independientemente de la información de la página. También es habitual utilizar esta etiqueta como mero contenedor cuando se quieren aplicar ciertos estilos a ciertos elementos de la página, por lo que es habitual usar el atributo class con este elemento. Si las otras etiquetas no son las más adecuadas para un elemento que quieres definir, lo más seguro es que debas definirlo con la etiqueta div. Aquí tienes un ejemplo:

<div>
  <p>Cualquier cosa</p>
</div>

Etiqueta header

Esta etiqueta se utiliza para definir la cabecera de una página o artículo. Por ejemplo, es habitual definir barras de navegación dentro de la sección header. También puede contener etiquetas h1-Hx en su interior, así como un texto de introducción como referencia al contenido de la página. Aquí tienes un ejemplo:

<header>
  <h1>Título de la página</h1>
</header>

También es habitual incluir la etiqueta header como parte de un artículo:

<article>
  <header>
    <h1>Título de la página</h1>
  </header>
</article>

Es importante que no confundas  la etiqueta header con la etiqueta head, puesto que esta última se utiliza para definir ciertos metadatos de la página, antes del body.

Etiqueta footer

Esta etiqueta es lo opuesto a la etiqueta header, puesto que la etiqueta footer se suele utilizar para definir el pié de un artículo, que puede contener cosas como enlaces de interés o información acerca de su autor, entre otras cosas:

<article>
  <footer>
    <span>Pié del artículo</span>
  </footer>
</article>

Etiqueta main

Si la etiqueta header se utilizaba para definir la cabecera de un artículo y la etiqueta footer para definir el pié, el cometido de la etiqueta main es el de definir el contenido principal de una página o artículo. A continuación tienes un ejemplo:

<main>
  <span>Cuerpo del artículo o de la página</span>
</main>

Etiqueta aside

La etiqueta aside se utiliza para definir algún tipo de contenido relacionado con la página o artículo definido en el interior de la etiqueta main. Por ejemplo, podrías agregar una lista de artículos o de etiquetas relacionadas con la página, entre otras cosas. Otro ejemplo son los widgets que existen en las típicas sidebars de las páginas creadas con WordPress, que suelen agregar ciertos contenidos o funcionalidades a la página. Esta etiqueta separa a los elementos que contiene en su interior del flujo semántico de la página. Por ejemplo, a continuación definimos un formulario de contacto:

<main>
  <p>Aquí va algo de texto</p>
</main>
<aside>
  <form action="/contacto">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre">
    <label for="mensaje">Mensaje</label>
    <textarea name="mensaje"></textarea>
    <input type="submit" value="Enviar mensaje">
  </form>
</aside>

y esto ha sido todo.