`, ``, `

` 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:

Contenido de este bloque y debe cerrase al final.

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](https://elandroidelibre.elespanol.com/2018/06/markdown-lenguaje-permite-escribir-dar-estilo.html) 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? #

 _{[Fuente](https://giphy.com/gifs/love-clueless-alicia-silverstone-yj5oYHjoIwv28)}

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](https://giphy.com/gifs/black-yellow-font-5nrWPububC3XRg30ir)} 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 `Contenido a colocar en negritas` 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 `Contenido a colocar en negritas` 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: `negritas, negritas, **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 `Contenido en cursivas` así como `Contenido en cursivas` y la versión Mardown, que es asterisco simple `*Contenido en cursivas*` Así quedan las tres opciones: `cursivas, cursivas, *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: `

Título principal

,

Título secundario

` 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: `

Título 1

, # Título 1` `

Título 2

, ## Título 2` `

Título 3

, ### Título 3` `

Título 4

, ### Título 4` `

Título 5

, ### Título 5` `

Título 6

, ### 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: `

Contenido citado

` 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](https://www.pexels.com/es-es/foto/adulto-camara-casual-concentrarse-598917/)} ## 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:
El formato para Markdown es:  o 
**\* 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:

• Primer elemento de la lista no numerada
• Segundo elemento
• Tercer elemento

y para la lista ordenada:

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

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: 200. Primer elemento de la lista ordenada 10. Segundo elemento 87. Tercer elemento  ## Centrado de texto #

 _{[Fuente](https://www.pexels.com/es-es/foto/amarillo-blanco-brillante-centrar-226569/)}

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: Contenido centrado
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: 
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ó:

Título con cursiva interna

Que también puede escribirse como # Título con *cursiva interna*
 ## Divisiones y clases # Más arriba en el texto expliqué que una de las etiquetas comunes en Html es `

`, 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:

Todo el contenido a justificar.

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:

Contenido alineado a la izquierda.

 _{[Fuente](https://www.pexels.com/es-es/foto/flotante-levitacion-moda-mujer-1427654/)}

### 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í:

Elemento flotante a la derecha

Elemento flotante a la izquierda

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:

Texto en rojo

### Un detalle importante con las divisiones `

` 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.


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* #

 _{[Fuente](https://giphy.com/gifs/rock-coding-programming-MdA16VIoXKKxNE8Stk)}

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 pa