Html & Markdown

Mucho se ha escrito sobre estos dos sistemas, que para algunos llega a ser un verdadero karma, y sin embargo siempre quedan dudas y falta de claridad en cuanto a ambos. Así que voy a tratar de despejar al máximo las dudas que puedan haber en este terreno e indicar el mejor uso, enfocado en su aplicación en la plataforma de hive.blog.

¡Si aún no tienes tu cuenta en esta red social, que recompensa tus publicaciones con criptomonedas, solicítala ahora mismo en hiveonboard!

---

Te recomiendo marcar en tu navegador esta publicación como favorita (generalmente se hace con la combinación de teclas “Control + D”), para que puedas accesarlo con facilidad cada vez que lo necesites y hasta que domines estas importantes herramientas.

También puedes abrir una pestaña al lado de esta para que practiques cada uno de los códigos.

La parte que está más clara para todos, es que estas dos herramientas son las que se usan para hacer que nuestras publicaciones se vean más bonitas y mejor organizadas. En efecto, eso es así, pero vayamos un poco más adentro para entender qué son y poder sacarles el máximo provecho a cada una de ellas.

Un poco de teoría

HTML

Para esto voy a trae primero la descripción que hace el sitio desarrolloweb.com de Html:

HTML es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.

Si buscas la opción “Ver código fuente de la página” en cualquier página, en cualquier navegador web, vas a encontrar todos los elementos que compones esa página, con todas sus etiquetas, además de los scripts de java y cosas similares que puedan estar presentes en dicha página.

Pero las etiquetas son las que le van a ir dando forma al contenido y existen muchas de ellas. Su característica principal es que siempre van entre los signos “menor que” ( < ) y “mayor que” ( > ).

Algunas de las más comunes son <div>, <p>, <b>, <blockquote> las cuales se utilizan para designar una “división” o bloque de contenido, “párrafo”, “bloque de cita”, respectivamente.

Otra característica importante de estas etiquetas, es que la mayoría DEBEN llevar una etiqueta de apertura y otra de cierre. Por ejemplo:

<div>Contenido de este bloque y debe cerrase al final.</div>

Como pueden ver, la diferencia entre la etiqueta de apertura y la de cierre, es que antes del identificador de la etiqueta de cierre, se coloca una barra inclinada.

No todas las etiquetas llevan las dos partes, algunas solo consisten de una etiqueta única, pero es importante tenerlo presente, pues olvidar colocar la de cierre (en los casos que corresponde) va a generar una presentación defectuosa de nuestro contenido.

Como dije con anterioridad, hay muchas etiquetas que cumplen distintas funciones, sin embargo, no todas ellas se pueden usar en Hive, por lo que en este trabajo nos vamos a limitar a las que se pueden aplicar a nuestros contenidos en esta plataforma.

Markdown

Antes de continuar, veamos de qué se trata, que según El Androide Libre es:

Markdown es un lenguaje de marcado ligero creado por John Gruber. El objetivo que busca este lenguaje es mejorar la facilidad de publicación de contenido. Es decir, que escribas más rápido y obtengas un resultado final mejor. Con simples comandos mientras estás escribiendo puedes darle formato al texto final que obtendrás.

Es decir, este sistema lo que intenta es simplificar la forma de hacer todas esas etiquetas y que sea más legible tu texto ya formateado. Es la utilización de determinados símbolos para lograr dichos efectos, los cuales, al ser publicados, serán traducidos por el sistema a códigos Html. Por eso es que aunque uses Markdown en tus escritos, si revisas el código fuente de tu publicación, verás que aparece con las etiquetas Html y no con los símbolos Markdown.

Markdown por lo general ofrece más de una forma de indicar un formato, sin embargo yo voy a presentar solo una, según mis propios criterios de mejor uso.

Ahora bien, viene la pregunta:

¿Cuál de los dos usar?

Con el paso del tiempo he descubierto que lo mejor es conocer bien ambos sistemas para combinarlos, pues el uso en conjunto es el que nos puede ofrecer llegar al resultado final que deseamos y que sea de la manera más sencilla posible. Sin embargo será decisión de cada quien, escoger en qué momento usar cada una. En los casos que corresponda yo dejaré mis sugerencias al respecto.

Obviamente, esto requiere de práctica, constancia y dedicación, pero una vez lo domines será muy sencillo.

A partir de este momento empiezo a explicar el uso de cada una, empezando por la forma Html y luego la variante Markdown.

Formatos de fuente

Estas son etiquetas que se utilizan para darle una característica al texto seleccionado y todas llevan etiqueta de apertura y cierre. Algunas de ellas tienen más de una forma de escribirse, debido a ajustes en las organizaciones encargadas de unificar los criterios. Lo explicaré en cada caso, pues esto contribuye a facilitar la memorización de los códigos.

_Fuente

Para recordarlo más fácil, coloco la explicación del término en inglés.

Negritas

Empezamos con las negritas, que es una forma de resaltar una palabra, o una frase, nombre, etc. El término en inglés es bold y de allí la inicial “b” para la misma. La cual queda como

<b>Contenido a colocar en negritas</b>

Con miras a darle más sentido a la lectura hecha por los sistemas de “speech” para personas con discapacidad visual, se creó la variante strong, que significa “fuerte” y que le permite al sistema de traducción darle la entonación adecuada. Por lo que también podemos usar

<strong>Contenido a colocar en negritas</strong>

y dará el mismo resultado escrito.

Aunque en Markdown son muchas las etiquetas que solo llevan el símbolo de apertura, también hay los casos que exigen el de cierre. Así para indicar las negritas usaremos doble asterisco.

**Contenido a colocar en negritas**

Por lo tanto tenemos tres opciones:

<b>negritas</b>, <strong>negritas</strong>, **negritas**

Cursivas o itálicas

En inglés el término usado es italic y su símbolo la “i” y para los lectores automáticos se agregó la opción de “énfasis”, en inglés “emphasis”, con el identificador “em”, por lo que podemos usaremos

<i>Contenido en cursivas</i>

así como

<em>Contenido en cursivas</em>

y la versión Mardown, que es asterisco simple

*Contenido en cursivas*

Así quedan las tres opciones:
<i>cursivas</i>, <em>cursivas</em>, *cursivas*

Titulares

Los titulares, más allá del aporte que hacen en mejorar el aspecto de nuestra publicación, llevan información importante a los buscadores, pues según el nivel de este “encabezado”, los buscadores le dan mayor importancia al texto resaltado. Por esta razón es importante que le demos el mejor uso posible, sobre todo al titular o encabezado 1, el cual debe ser usado para título, así como el 2 debe ser para los subtítulos de importancia, pues es a estos dos los que los buscadores como Google les dan prioridad. ¡Úsalos para palabras claves de tu contenido!

Los titulares van vinculados a la palabra inglesa header (encabezado) y el más grande es el 1, disminuyendo su tamaño hasta el número 6. La sintaxis es la siguiente:

<h1>Título principal</h1>, <h2>Título secundario</h2>

La versión Markdown no exige el símbolo de cierre, sin embargo lo acepta. El símbolo para esto es el numeral “#”, desde 1 hasta seis para indicar el nivel, donde # es 1, ## es 2, ### es 3, etc. Puedes escribir

# Título principal ” o # Título principal #

Después debes pasar a una nueva línea para separar el contenido.

Por lo tanto tenemos:
<h1>Título 1</h1>, # Título 1
<h2>Título 2</h2>, ## Título 2
<h3> Título 3</h3>, ### Título 3
<h4> Título 4</h4>, ### Título 4
<h5> Título 5</h5>, ### Título 5
<h6> Título 6</h6>, ### Título 6

En caso de que necesites usar el símbolo numeral como tal (#), puedes colocar delante de él una barra invertida, anulando así su función formateadora:

\#

Citas

En inglés se refieren a éstas como block quotes, como “comillas en bloques” y el identificador son las dos palabras juntas. Esta también requiere la etiqueta de apertura y cierre:

<blockquote>Contenido citado</blockquote>

La versión Mardown no requiere símbolo de cierre y se limita al símbolo "mayor que", seguido de un espacio:

> Contenido citado

Sin embargo, me parece mucho más limpia la versión Html y nos deja una visión más clara de la sección de la cita, de dónde a dónde va.

_Fuente

Inclusión de imágenes

El identificador para la imagen es “img” y lleva como información adicional la fuente (“src” de “source”), es decir la dirección de donde va a tomar la imagen a presentar. El código Html no lleva etiqueta de cierre y es el siguiente:

<img src=”http://dirección-de-la-imagen-con-su-extensión-por-tipo.jpg">

El formato para Markdown es:

![Nombre opcional para la imagen](http://dirección-de-la-imagen-con-su-extensión-por-tipo.jpg)

o

![](http://dirección-de-la-imagen-con-su-extensión-por-tipo.jpg)

* Colocar un nombre adecuado a la imagen también será un recurso de valor para los buscadores, por lo tanto es recomendable usarlo si aspiras a un buen posicionamiento en los mismos.

Listas ordenadas y no ordenadas

Tal como anuncié al inicio de esta publicación, voy a mostrar la modalidad para ambos sistemas, pero ya verán que la opción Markdown es mucho más “natural”.
Los identificadores para estas listas vienen de sus iniciales en inglés: unordered list (ul) para las listas no ordenadas y ordered list (ol) para las ordenadas o numeradas. Sin embargo, cada elemento de la lista deberá llevar una etiqueta “li” de list. Por lo que quedaría estructurada de la siguiente manera:

<ul>
   <li>Primer elemento de la lista no numerada</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ul>

y para la lista ordenada:

<ol>
   <li>Primer elemento de la lista ordenada o numerada</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ol>

En el caso de Markdown, para la lista no ordenada, o no numerada, solo debes colocar un guión (-), asterisco (*) o símbolo más (+) seguido de un espacio y luego el texto de cada elemento de la lista. Por lo que quedaría de la siguiente manera:

- Primer elemento de la lista no ordenada
- Segundo elemento
- Tercer elemento

Y para la ordenada solo debes numerarla seguida de un punto y un espacio:

1. Primer elemento de la lista ordenada
2. Segundo elemento
3. Tercer elemento

Un aspecto a destacar es que el sistema, al detectar el número, el punto y el espacio, va a colocar la numeración que corresponde, por lo que si escribes otro orden, no lo mostrará.

El siguiente código

200. Primer elemento de la lista ordenada
10. Segundo elemento
87. Tercer elemento

mostrará lo siguiente:

1. Primer elemento de la lista ordenada
2. Segundo elemento
3. Tercer elemento

Centrado de texto

Esta característica la coloco en un espacio especial, porque tiene una característica particular. Su origen y estructura es de Html, sin embargo ésta fue descontinuada en ese estándar de la web, en el cual se adoptó un nuevo mecanismo, que no viene al caso explicar acá, para el centrado de contenido. Pero en Markdown se le ha asignado su uso inicial. Así que en Markdown podemos centrar un contenido con la siguiente etiqueta:

<center>Contenido centrado</center>

Esto lo podemos usar por igual para un título, una imagen, un bloque de texto, etc.

Anidar etiquetas

Una característca importante en ambos sistemas es que podemos "anidar" etiquetas dentro de otras. Es decir, yo puedo, por ejemplo, colocar la etiqueta para una imagen dentro la etiqueta de centrado:

<center>![](https://direccion-de-mi-imagen.png)</center>

Pero hay que prestar atención al orden de apertura y cierre de las etiquetas, las cuales deben seguir el orden inverso, es decir ir cerrando primero la última que se abrió:

<center><h1>Título con <em>cursiva interna</em></h1></center>

Que también puede escribirse como

 # <center>Título con *cursiva interna* </center>

Divisiones y clases

Más arriba en el texto expliqué que una de las etiquetas comunes en Html es <div>, que indica una división o un bloque. Sin embargo, en Hive el uso de esta etiqueta no tendría ningún valor de no ser por las clases, es decir, estilos aplicados a dichas divisiones.

Aunque son pocas las clases que disponemos acá, es mucho lo que pueden aportar a nuestro diseño. Por lo aquí explicado, la etiqueta llevará el identificador más la clase, que ahora paso a describir (La etiqueta de cierre solo lleva el identificador).

Contenido justificado

Para los que les gustan que toda su publicación mantenga ambos laterales con el texto parejo, puede usar la clase "text-justify", lo cual lo escribe de la siguiente manera:

<div class="text-justify">Todo el contenido a justificar.</div>

Cuando yo quiero justificar toda mi publicación, suelo colocar la etiqueta de apertura al principio de la página y la etiqueta de cierre al final de la misma. Como mencioné anteriormente, si alguna de la etiquetas que requieren la de cierre, no se colocan, generará una visualización defectuosa. Pero de lo contrario, podemos usar las etiquetas por bloques grandes, como este caso que menciono.

Texto a la derecha

Si queremos nuestro texto alineado al margen derecho, debemos recurrir a una de esta clases, cuyo nombre es "text-right" y lo escribiremos como sigue:

<div class=text-right>Contenido alineado a la izquierda.</div>

Elementos flotantes

Por naturaleza, todo el contenido en una web está separado por bloques que van uno encima de otro. Sin embargo, en muchas ocasiones vemos una imagen que esta rodeada de texto (Como la que acompaña esta sección). O podemos ver dos bloques de texto, uno junto al otro. O un texto con una imagen de cada lado. Para lograr eso, se utiliza lo que se conoce como elemento flotante. Y para la aplicación de este recurso usaremos dos clases, una que sitúa nuestro elemento a la derecha y otro que lo hace a la izquierda. Las clases llevan su nombre del inglés y lo que significan es "halar" a un lado o el otro, "pull-right" para la derecha y "pull-left" para la izquierda.

Recuerda que esta también es una clase, por lo que deberás escribirla así:

<div class=pull-right>Elemento flotante a la derecha</div> 

<div class=pull-left>Elemento flotante a la izquierda</div>

El bloque tomará el ancho del tamaño del elemento. De esta manera podrías colocar dos imágenes delgadas a cada lado, a modo de marco y en el centro puedes colocar un texto, el cual quedaría enmarcado entre las imágenes. Ésto solo como una idea, hay muchísimas posibilidades con este recurso.

Texto en rojo

Aunque en Hive no tenemos la opción de dar color a nuestras fuentes, con el uso de esta clase podemos asignar el rojo a cualquier parte de texto con esta clase. No encontré una explicación lógica a su nombre, así que te tocará memorizarlo a tu manera. El código quedaría de la siguiente manera:

<div class="phishy">Texto en rojo</div>

Un detalle importante con las divisiones <div>

Las divisiones suelen ser uno de los elementos que más errores puede producir en nuestras publicaciones. Éstos se producen generalmente por problemas con los saltos de línea. La fórmula que yo uso para evitar "descuadres" en mi publicación, producto de esos errores, es colocar cada etiqueta de división a dos saltos de línea del resto del código. Ejemplo, si quiero colocar una imagen como elemento flotante:

Contenido anterior, que puede ser texto, imágenes o lo que sea.

<div class="pull-right">

![](https://direccion-de-mi-imagen.gif)

</div>

El contenido siguiente

Fíjense que dejé doble salto antes y después de la etiqueta. Estos espacios entre líneas resuelven la falla que se produce en la mayoría de ocasiones que uno trabaja con los bloques "div", los cuales muchas veces no se manifiestan en ese punto, sino en otra parte más adelante, como lo puede ser un enlace que no funciona, una foto que no se muestra, un formato de texto que no se aplica, etc.

Enlaces o links

Este es uno de los recursos que necesitaremos de manera permanente, tanto para indicar la fuente de las imágenes que usemos, como cualquier otra referencia que queramos indicar. Los enlaces son tan importantes, que quizá por eso su identificador es la primera letra del alfabeto: "a" y va acompañado de un parámetro adicional que es "href" de HypertextREFerence, es decir "referencia de hipertexto, es la dirección del lugar al que queremos que conduzca el enlace. Esta es la sintaxis:

<a href="http://direccion-destino-del-enlace">Texto del enlace</a>

Donde está el texto del enlace, también puede ir una imagen, que cumpliría la función de link. En ese caso el código se vería así:

<a href="http://direccion-destino-del-enlace"><img src=”http://dirección-de-la-imagen-con-su-extensión-por-tipo.jpg"></a>

Es muy importante recordar que hay que colocar las etiquetas de cierre, o en caso contrario se mostrará de manera defectuosa nuestro contenido.

La versión Markdown tiene la siguiente estructura:

[Texto del enlace](http://direccion-destino-del-enlace) 

¡Fíjense que la estructura es muy parecida a la de las imágenes!

Para colocar una imagen como link, también sustituimos el texto de enlace por la imagen y debe escribirse como sigue:

[![](http://dirección-de-la-imagen-con-su-extensión-por-tipo.jpg)](http://direccion-destino-del-enlace)

Cuatro ayudantes

Salto de línea

Los navegadores "eliminan", en su interpretación, más de dos saltos de línea. Aunque uno escriba 20 de ellos, la web solo mostrará dos. Por lo tanto, si necesitamos colocar más de ellos, esta etiqueta es la solución. Además, hay casos donde por cuestiones de la codificación, un texto debe llevar un salto de línea, pero no podemos escribirlo porque generaría un error en el código, pues también allí utilizaremos este recurso.

El salto de línea, que no tiene equivalente en Markdown, tiene de la palabra inglesa break (corte o ruptura) el identificador “br”. Esta etiqueta no lleva la de cierre y va a generar tantos saltos de líneas, como veces la coloques:

<br>

Separador

Se trata de un línea muy fina que sirve para separar contenido. En Html la etiqueta es

<hr>

y para lograr el mismo efecto en Markdown, solo coloca un mínimo de tres guiones seguidos y el sistema lo convertirá de manera automática.

Espacio en blanco

Al igual que los navegadores omiten los saltos de línea dentro del código, también omiten más de dos espacios en blanco seguido. Por esta razón es que no puedes distanciar un elemento con estos espacios, ni se puede usar la tecla "tab" para tabular un espacio. Aunque ésta no es una práctica aconsejable como recurso regular, hay ocasiones en que este código nos permite "hacer ajustes" de espaciado. Por cada colocación del código, se insertará un espacio adicional en su lugar. Esta no es una etiqueta como tal si no lo que se llama un entidad Html y su identificador viene del término inglés non-breaking space** (espacio sin ruptura, pues no produce un salto de línea. Su escritura es:

 

Subíndice y superíndice

Estas dos etiquetas, además de cumplir su función de anotación ^superior o anotación _inferior, ofrece, por el tamaño de su fuente la opción de usarla en lugares que necesitemos una fuente más pequeña.

Creo que los identificadores "sup" y "sub" no necesitan más explicación. Se usan de esta manera:

<sup>Texto en superíndice</sup> y <sub>texto en subíndice</sub>

Tablas

Vamos a cerrar esta publicación con este recurso, que además de ofrecernos la creación de tablas con el fin de presentar datos, también nos puede servir para darle diseño a una parte de nuestra publicación, como puede ser una galería de imágenes.

Para la creación de tablas me voy a limitar únicamente a Markdown, ya que la estructura Html, además de ser bastante compleja para quienes no dominan la materia, no presenta ninguna ventaja frente a la sencillez de su par.

La manera de escribirlo consiste en colocar de primero el símbolo barra vertical ( | ), también conocido como "palo recto", seguido de tu contenido y una nueva barra, para cada columna repites el mismo esquema, es decir el contenido de la columna 2, la barra vertical, contenido de la columna 3, etc. y terminas con la barra vertical. Después de tener tu primera fila, es que insertas un retorno de línea y vas a repetir el esquema, pero sustituyendo el contenido de cada columna por guiones. El número de casillas debe ser igual.

Al terminar este proceso, ya el sistema estará mostrando la tabla. Si necesitas agregar más filas, solo baja a la siguiente línea y haces el proceso igual que en la primera. Es decir, la única fila que va a tener los guiones es la segunda, independientemente de la cantidad de filas que vayas a insertar.

El ejemplo a continuación:

| A1 | B1 | C1 | D1 |
|----|----|----|----|
| A2 | B2 | C2 | D3 |
| A3 | B3 | C3 | D3 |

Una ventaja que ofrecen las tablas al trabajar con imágenes, es que el sistema las reduce de acuerdo a la cantidad de columnas que utilices. Yo puedo tener dos imágenes que cada una ocupe el 100% del área utilizable, pero si coloco ambas en una tabla, se mostrarán al 50%. Si coloco tres al 33%, etc.

Un ejemplo para colocar dos imágenes juntas es:

| ![Primera imagen](http://direccion-de-la-imagen-1.jpg) | ![Segunda imagen](http://direccion-de-la-imagen-2.jpg) |
| ---- | ---- |

Esto generará una tabla con dos imágenes adyacentes.

Recuerda que no puede haber salto de línea, excepto para crear una nueva fila o finalizar tu tabla. Por lo tanto, si necesitas meter dos líneas en una sola celda, puedes usar la etiqueta de salto de línea, arriba indicada y quedaría así:

| Línea 1 de la pimera casilla<br>Línea 2 de la primera casilla | Aquí puedes aplicar los mismo o dejar una sola línea |
| --- | --- | 

Esta publicación fue elaborada ante la ausencia de participantes en el concurso convocado por la cuenta de @el-panal, para @la-colmena: "¿Sabes mucho de HTML y MarkDown? ¡Entonces gana tu premio!".

¡Hasta aquí esta guía! Espero que resulte de utilidad.

Voy a dejar esta publicación abierta a modificaciones y ediciones posteriores, para hacer los ajustes que los lectores puedan sugerir, a fin de que este contenido se mantenga lo más amplio y actualizado posible. Por lo cual serán bienvenidas todas las sugerencias.

---

_Fuente

---

@ylich
http://ylich.com
https://sptfy.com/ylich