HTML y Markdown¶

El problema de markdown es que no cubre todas las funcionalidades que proporcionan las etiquetas html, que es una sintaxis de una gran complejidad. La solución a aplicar es simple; basta con escribir directamente etiquetas html en los textos markdown cuando sea necesario. En general serán respetadas, salvo cuando entren en conflicto con las etiquetas generadas en el proceso de conversión.

No conviene abusar de esta posibilidad, porque hace los documentos más complejos de leer y estamos renunciando a los beneficios de la sintaxis markdown. Sin embargo, resulta útil cuando queremos especificar algo de cierta complejidad.

Etiquetas `<div>`¶

En formato HTML hay una etiqueta especial, <div>, que se usa para delimitar parte de una página. Por ejemplo:

<p>Párrafo 1. </p>

<div>
  <p>Párrafo 2. </p>
  <p>Párrafo 3. Lista de colores:</p>

  <ul>
  <li>rojo</li>
  <li>verde</li>
  <li>azul</li>
  </ul>

</div>

<p>Párrafo 4. </p>

En este ejemplo, los párrafos 1 y 4 quedarían fuera del bloque, mientras que los párrafos 2 y 3 y la lista quedarían dentro.

¿Que utilidad tiene identificar partes del documento entre etiquetas <div>? Podemos, por ejemplo, aplicar un estilo especial al bloque:

<div style="background-color:beige;padding:10px">

lo que mostraría esa sección de la forma configurada por esas reglas de estilo, con un fondo de color beige, y un espaciado de 10 puntos en los cuatro márgenes.

Párrafo 1.

Párrafo 2.

Párrafo 3. Lista de colores:

rojo
verde
azul

Párrafo 4.

Bloques¶

En HTML hay varias etiquetas que se utilizan para delimitar bloques de texto, como por ejemplo:

<p> ... </p> - Delimita un párrafo
<pre> ... </pre> - Delimita un párrafo preformateado
<div> ... </div> - Delimita un bloque de texto HTML
<table> ... </table> - Delimita una tabla de datos, formada por filas y columnas.

Este tipo de etiquetas deben separarse del resto del documento con una línea en blanco antes de la etiqueta de inicio, y otra tras la de cierre. Las etiquetas de inicio y fin de bloque no deben llevar sangrado alguno.

Por ejemplo, las funcionalidades originales proporcionadas por markdown no incluyen la creación de tablas. Podemos insertar una usando directamente la sintaxis html:

País	Capital	Población
Francia	París	68 MM
Italia	Roma	58 MM
Alemania	Berlín	84 MM

El formato HTML es el siguiente:

<table>
  <tr>
    <th>País</th>
    <th>Capital</th>
    <th>Población</th>
  </tr>
  <tr>
    <td>Francia</td>
    <td>París</td>
    <td>68 MM</td>
  </tr>
  <tr>
    <td>Italia</td>
    <td>Roma</td>
    <td>58 MM</td>
  </tr>
    <tr>
    <td>Alemania</td>
    <td>Berlín</td>
    <td>84 MM</td>
  </tr>

</table>

Todo el conjunto se delimita entre etiquetas <table>. Cada fila (table row) entre etiquetas <tr>. Las celdas (table data) entre etiquetas <td> dentro de cada fila. Las celdas de cabecera (table head) se indican entre etiquetas <th>.

Dentro de un bloque HTML no tienen efecto las marcas utilizadas en la sintaxis markdown. Por ejemplo, un asterisco en el texto de la celda de una tabla se visualizará como tal, no como delimitador de texto en cursiva.

Otro ejemplo de bloque es todo aquello delimitado entre etiquetas <div>. Pero ¡ojo! Una vez más, y como sucede con otros bloques HTML, el formato markdown no tendrá efecto en su interior, y nos vemos obligados a usar otras etiquetas HTML manualmente. En realidad, esto se puede solucionar fácilmente utilizando las extensiones al lenguaje markdown, que veremos más adelante.

Entidades¶

Supongamos un manual técnico. ¿Como podemos representar la fórmula x < y > z?. El navegador considerará que <y> es una etiqueta, y como no tiene un significado especial, la ignorará.

En principio, la solución proporcionada por markdown es usar backticks:

La fórmula es: `x < y > z`

Pero hay situaciones en que tenemos que indicar que un carácter se respete, sin necesidad de mostrarlo en un tipo de letra especial. La solución es sustituir esos caracteres en el texto markdown o HTML por el código del carácter, Por ejemplo:

La fórmula es: x &#60; y &#62; z

Muestra:

La fórmula es: x < y > z

Todo carácter tiene un código, y esta forma de representarlos se denomina "entidades". Cada una comienza con un prefijo &# y termina con un punto y coma. Podemos sustituir el código numérico por un nombre simbólico:

La fórmula es: x &#lt; y &#gt; z

Vemos que el carácter < se representa mediante <, abreviatura de less than, y el carácter >, mediante >, abreviatura de greater than.

¿Cual de las dos técnicas es preferible? < es visualmente más descriptivo que <, ya que es imposible saberse los códigos de memoria. Pero no todos los caracteres tienen su abreviatura. Sin embargo, todos tienen un código.

Las entidades no solo se utilizan para forzar un carácter sin que sea interpretado como etiqueta HTML. También se usan para incluir caracteres que son difíciles de representar o de interpretar.

Veamos algunos ejemplos de entidades:

Carácter	Nombre	Código
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`
€	`€`	`€`
©	`©`	`©`
®	`®`	`®`
←	`←`	`←`
↑	`↑`	`↑`
→	`→`	`→`
↓	`↓`	`↓`

Algunos símbolos matemáticos:

Carácter	Nombre	Código
∀	`∀`	`∀`
∂	`∂`	`∂`
∃	`∃`	`∃`
∅	`∅`	`∅`
∇	`∇`	`∇`
∈	`∈`	`∈`
∉	`∉`	`∉`
∋	`&ni;`	`∋`
∏	`∏`	`∏`
∑	`∑`	`∑`
√	`√`	`√`
∞	`∞`	`∞`
∫	`∫`	`∫`
≤	`≤`	`≤`
≥	`≥`	`≥`

Otros símbolos:

☎ : ☎
☏ : ☏
☐ : ☐
☑ : ☑
☒ : ☒
☜ : ☜
☝ : ☝
☞ : ☞
☟ : ☟
☹ : ☹
☺ : ☺
♪ : ♪
♫ : ♫
⚠ : ⚠
⚽ : ⚽

Algunos Emojis:

😀 : 😀
😁 : 😁
😂 : 😂
😃 : 😃
😄 : 😄
😅 : 😅

Podemos explorar la web para localizar una lista más completa. Hacer una búsqueda del término "HTML entities".

Non-breaking Space¶

Una caso especial es la entidad  , conocida como non-breaking space. Representa un espacio que se debe respetar.

Supongamos que escribimos:

Dependiendo de las condiciones ambientales, la velocidad máxima permitida en una autopista es de 120 km/h

No queremos que el navegador divida la frase justo entre las palabras 120 y km/h:

... la velocidad máxima permitida es de 120
km/h

por lo que escribimos en su lugar:

la velocidad máxima permitida es de 120&nbsp;km/h

Lo que representa un espacio en blanco donde no se puede partir la línea.

Otra utilidad es la posibilidad de forzar espaciado extra:

&nbsp;&nbsp;&nbsp;&nbsp;Texto sangrado cuatro espacios

Un caso similar es el non-breaking hyphen (‑) usado para representar un guión entre dos palabras que deben ir unidas.

Escapes¶

Todo carácter precedido por una barra invertida será tratado como texto regular. Por ejemplo,

\*texto con asteriscos\*

Mostrará los asteriscos como parte del texto, sin que se consideren como delimitadores de letra enfatizada.

Un carácter \ se considerará como texto regular siempre que no preceda a alguno de los siguientes:

\   barra invertida
`   acento invertido
*   asterisco
_   subrayado
{}  llaves
[]  corchetes
()  paréntesis
#   hash
+   signo de suma
-   guión
.   punto
!   exclamación

En esas situaciones, para mostrar una barra invertida como parte del texto regular, utilizar una doble barra \\.