Sintaxis básica de Markdown

Visión general

A pesar de algunas variaciones, la mayoría de las aplicaciones admiten los elementos básicos de Markdown. Estos elementos son esenciales para que pueda formatear un documento. Pero no se equivoque, utilizando solo los conceptos básicos de Markdown puede crear sitios web bien diseñados para Web.

NOTA: Siempre que sea posible, cuando haya variaciones en la sintaxis de un procesador Markdown a otro, esto se indicará en el artículo.

Títulos

Todo documento tiene o debería tener un título, ¿correcto? Entonces, comencemos con eso.

El símbolo utilizado para formatear un título en Markdown es el hash #. Al crear el título, formatee el código colocando un hash al principio de la línea, delimitando el encabezado.

Por ejemplo:

# Título de nivel 1

Se convertirá en tag h1 de HTML.

<h1>Título de nivel 1</h1>.

NOTA: tag h1 representa el título más importante del HTML, generalmente el título del artículo.

El número de hashes que usa al principio de la línea indica el nivel del título, por lo tanto, el formato ### Mi título crea un título de nivel 3.

NOTA: Cuando hablamos de nivel, hablamos de los títulos convertidos a HTML. En HTML, los niveles de títulos van de 1 a 6, indicados por tags h1, h2, h3, h4, h5 y h6

EJEMPLOS

# Título de nivel 1

<h1>Título de nivel 1</h1>

## Título de nivel 2

<h2>Título de nivel 2</h2>

### Título de nivel 3

<h3>Título de nivel 3</h3>

#### Título de nivel 4

<h4>Título de nivel 4</h4>

##### Título de nivel 5

<h5>Título de nivel 5</h5>

###### Título de nivel 6

<h6>Título de nivel 6</h6>

Sintaxis alternativa

Markdown ofrece una sintaxis diferente para la construcción de títulos de nivel 1 y 2. En lugar de usar el hash al principio de la línea, agregue los signos de igualdad == debajo de los títulos de nivel 1 y los signos menos - para los títulos de nivel 2.

EJEMPLOS

Título de nivel 1
===============

<h1>Título de nivel 1</h1>

Título de nivel 2
---------------

<h2>Título de nivel 1</h2>

Algunos editores Markdown le permiten usar solo un signo igual = o un guión - debajo del texto, pero esto puede causar problemas de formato en otros editores que no son compatibles con esta sintaxis.

Títulos: mejores prácticas

Puede encontrar problemas de compatibilidad cuando hablamos del espacio entre el signo de almohadilla # al comienzo de la línea y el texto del título.

Siempre se recomienda agregar al menos un espacio entre ellos, además de brindar una mejor lectura de su documento, aún tendrá más soporte de edición entre aplicaciones Markdown.

Tabla 1.3 ejemplifica la correcta construcción del título.

Párrafos

El formato más simple para Markdown es el del párrafo. Para crear uno, simplemente separe un fragmento de texto con una línea en blanco, creando fragmentaciones que el procesador Markdown interpretará como párrafos.

EJEMPLOS

Markdown es importante para todos los programadores.

Aprender Markdown es esencial para una carrera exitosa.

<p>Markdown es importante para todos los programadores.</p>

<p>Aprender Markdown es esencial para una carrera exitosa.<p>

Párrafos: mejores prácticas

Normalmente el párrafo se pega al principio de la línea, es decir, evita sangrarlo utilizando espacios de cualquier tipo, ni espacios en blanco ni tabulaciones.

NOTA: El párrafo debe tener sangría cuando está dentro de una lista.

Tabla 1.5 ejemplifica el uso correcto para construir un párrafo.

Saltos de línea

En HTML, un salto de línea está representado por tag br.

Para generar un salto de línea en Markdown, inserte dos o más espacios en blanco al final de la línea y presione la tecla Enter.

EJEMPLOS

Primera línea del documento.
Segunda línea del documento.

<p>Primera línea del documento.<br>

Segunda línea del documento.</p>

Salto de línea: mejores prácticas

El uso de espacios en blanco para crear saltos de línea, aunque es compatible con la mayoría de las aplicaciones, puede causar problemas de formato.

Aquí hay algunos puntos:

• Los espacios en blanco después de la línea son difíciles de notar.
• Las personas pueden agregar espacios en blanco al final de la línea, debido a la costumbre o descuido.
• Algunos editores de texto, como Sublime Text, tienen configuraciones que eliminan los espacios en blanco, antes y después, de la línea al guardar el documento.

NOTA: Es interesante recordar que las aplicaciones Markdown, en su mayor parte, también son compatibles con tags en HTML, es decir, puede fusionar el formato Markdown con el formato HTML en el mismo documento.

NOTA: En algunas aplicaciones, basta con presionar la tecla Enter para crear un salto de línea.

NOTA: Las variaciones de Markdown, como CommonMark, interpretan el uso de una barra invertida \ como un indicador de una nueva línea.

Presionar la tecla Enter o usar la barra invertida \, aunque es válido, no se recomienda ya que la compatibilidad depende del programa Markdown.

Tabla 1.7 muestra la sintaxis correcta para crear una nueva línea.

Énfasis

Similar a un editor WYSIWYG, como Microsoft Word, Markdown también ofrece formato para enfatizar el texto.

Entre los formatos de énfasis más populares se encuentran negrita y cursiva, que también se pueden aplicar usando la sintaxis Markdown.

Negrita en Markdown

Para formatear texto en negrita en Markdown, coloque dos asteriscos ** antes del contenido y dos asteriscos ** después del contenido.

EJEMPLOS

**This part of the text** will be bold.

<strong>This part of the text</strong> will be bold.

__This part of the text__ will be bold.

<strong>This part of the text</strong> will be bold.

Markdown**Is**Easy**To**Learn

Markdown<strong>Is</strong>Easy<strong>To</strong>Learn

NOTA: Como se muestra en los ejemplos anteriores, puede reemplazar los asteriscos con guiones bajos, usando dos guiones bajos __ antes y después del contenido también formatea el texto en negrita en Markdown.

Negrita: mejores prácticas

Tanto el uso de dos asteriscos como el uso de dos guiones bajos pueden aplicar formato en negrita al contenido.

Sin embargo, el uso de guiones bajos en medio de una palabra puede generar problemas de formato dependiendo del procesador Markdown, por lo tanto, preferiblemente usar asteriscos.

Tabla 1.9 demuestra el uso recomendado para formatear en negrita.

Cursiva en Markdown

Similar al formato de negrita, cursiva en Markdown también usa un asterisco * o un guión bajo _, pero en el caso de cursiva, use solo un asterisco * antes del contenido y un asterisco * después del contenido.

EJEMPLOS

*This part of the text* will be in italics.

<em>This part of the text</em> will be in italics.

_This part of the text_ will be in italics.

<em>This part of the text</em> will be in italics.

Markdown*Is*Easy*To*Learn

Markdown<em>Is</em>Easy<em>To</em>Learn

Para poner en cursiva la mitad de una palabra Markdown, use un asterisco antes y después del contenido.

Ejemplo:

Mar*kdo*wn

Cursiva: mejores prácticas

Utilice siempre un asterisco * cuando utilice cursiva en medio de una palabra, esto evitará problemas de compatibilidad con los procesadores Markdown.

Tabla 1.11 muestra el marcado recomendado para enfatizar el contenido en cursiva.

Negrita e itálica

¿Solo negrita o solo cursiva? Si lo desea, puede combinar los dos formatos para resaltar cualquier contenido.

Para aplicar negrita y cursiva simultáneamente, agregue tres asteriscos *** o tres guiones bajos ___ alrededor del texto a resaltar.

Si va a enfatizar la mitad de una palabra con ambos formatos, dé preferencia al uso de asteriscos, en este caso, tres asteriscos ***.

EJEMPLOS

***This part of the text*** will be bold and italicized.

<strong><em>This part of the text</em></strong> will be bold and italicized.

This is really ___important___.

This is really <strong><em>important</em></strong>.

This is really __*important*__.

This is really <strong><em>important</em></strong>.

This is really **_important_**.

This is really <strong><em>important</em></strong>.

This text is ***really*** important.

This text is <strong><em>really</em></strong> important.

Negrita e cursiva: mejores prácticas

Para evitar problemas de compatibilidad con las aplicaciones Markdown, al resaltar la mitad de una palabra, combinando negrita y cursiva, dé preferencia al uso de tres asteriscos.

Tabla 1.13 demuestra el uso indicado para combinar ambos formatos.

Blockquote

Por ejemplo, esta etiqueta Markdown:

> Contenido de blockquote.

Esta salida de HTML resultaría:

Contenido de blockquote.

Blockquote con varios párrafos

NOTA: El signo mayor que > debe colocarse en la línea que separa los párrafos para que el procesador Markdown pueda interpretar correctamente su marcado.

Veamos un ejemplo:

> Primer párrafo de la cita en bloque.
>
> Segundo párrafo de la cita en bloque.

La salida en HTML:

Primer párrafo de la cita en bloque.

Segundo párrafo de la cita en bloque.

Blockquotes anidado

Además de insertar varios párrafos dentro de una cita en bloque, también puede anidarlos, es decir, insertando blockquotes dentro de blockquotes, complex? Simplifiquemos.

Para crear un bloque anidado use dos signos mayores que >> antes del párrafo.

Ejemplo:

> Contenido de blockquote.
>
>> Este párrafo se interpretará como una cita en bloque anidada.

Representación de HTML:

Contenido de blockquote.

Este párrafo se interpretará como una cita en bloque anidada.

Blockquote con otros elementos

La versatilidad de blockquotes permite la inserción de otros elementos Markdown dentro de ellos.

NOTA: Es posible que algunos elementos Markdown no se procesen correctamente cuando se colocan dentro de una cita en bloque, esto varía mucho entre los procesadores Markdown.

> #### Título h4 dentro del bloque
>
> - Primer elemento de la lista dentro de la cita en bloque.
> - Segundo elemento de la lista dentro de la cita en bloque.
>
>  *Texto en cursiva* parte del párrafo sin formato **texto en negrita**.

La salida en HTML:

Título h4 dentro del bloque

• Primer elemento de la lista dentro de la cita en bloque.
• Segundo elemento de la lista dentro de la cita en bloque.

Texto en cursiva parte del párrafo sin formato texto en negrita

Listas

Las listas son esenciales para organizar temas dentro de su documento. Una lista facilita la visualización de elementos que pueden estar relacionados entre sí.

Para crear una lista en Markdown usamos números para listas ordenadas, es decir, en secuencia y guiones -, o signos más +, o asteriscos * para listas desordenadas.

Listas ordenadas

Empecemos ordenando los elementos de nuestra lista, para eso ponemos un número seguido de un punto y el texto del elemento.

Vale la pena señalar que los números de los elementos no necesitan estar en orden numérico ascendente, sin embargo, el primer elemento de la lista debe comenzar con el número uno 1.

NOTA: Para crear un elemento sangrado, inserte una tabulación antes del número que marca el elemento. En algunos procesadores Markdown también puedes insertar 3 espacios antes de la numeración, el resultado es similar, sin embargo esto puede variar dependiendo de la aplicación, en caso de duda usa TAB.

EJEMPLOS

1. Primer elemento
2. Segundo elemento
3. Tercer elemento
4. Cuarto elemento

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    <li>Cuarto elemento</li>
</ol>

1. Primer elemento
1. Segundo elemento
1. Tercer elemento
1. Cuarto elemento

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    <li>Cuarto elemento</li>
</ol>

1. Primer elemento
8. Segundo elemento
3. Tercer elemento
5. Cuarto elemento

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    <li>Cuarto elemento</li>
</ol>

1. Primer elemento
2. Segundo elemento
3. Tercer elemento
    1. Elemento sangrado
    2. Elemento sangrado
4. Cuarto elemento

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento
    <ol>
        <li>Elemento sangrado</li>
        <li>Elemento sangrado</li>
    </ol>
    </li>
    <li>Cuarto elemento</li>
</ol>

Listas desordenadas

Una lista desordenada es una secuencia de elementos indicados, generalmente por algún símbolo a la izquierda del elemento, es decir, no hay una secuencia numérica aquí.

El marcado Markdown para crear listas desordenadas es el signo más / más +, o el signo menos / menos / guión -, o el asterisco *.

Coloque uno de estos dos signos antes del elemento de la lista para demarcarlo, seguido de un espacio en blanco y el contenido del elemento.

NOTA: Sangra un elemento de la lista insertando una pestaña antes de marcar el elemento.

EJEMPLOS

- Primer elemento
- Segundo elemento
- Tercer elemento
- Cuarto elemento

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    <li>Cuarto elemento</li>
</ul>

* Primer elemento
* Segundo elemento
* Tercer elemento
* Cuarto elemento

<ul>

    <li>Primer elemento</li>

    <li>Segundo elemento</li>

    <li>Tercer elemento</li>

    <li>Cuarto elemento</li>

</ul>

+ Primer elemento
* Segundo elemento
- Tercer elemento
+ Cuarto elemento

<ul>

    <li>Primer elemento</li>

    <li>Segundo elemento</li>

    <li>Tercer elemento</li>

    <li>Cuarto elemento</li>

</ul>

- Primer elemento
- Segundo elemento
- Tercer elemento
    - Elemento sangrado
    - Elemento sangrado
- Cuarto elemento

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento
    <ul>
        <li>Elemento sangrado</li>
        <li>Elemento sangrado</li>
    </ul>
    </li>
    <li>Cuarto elemento</li>
</ul>

Agregar elementos

Markdown te permite insertar otros elementos en medio de una lista sin romper su continuidad.

Para preservar el formato de la lista, sangra el elemento diferente con 4 espacios o una tabulación.

Párrafos

* Este es el primer elemento de la lista.
* Este es el segundo elemento de la lista.
    Un párrafo agregado sin romper la cadena de la lista.
* Y finalmente el tercer elemento de la lista.

El resultado sería este:

• Este es el primer elemento de la lista.
• Este es el segundo elemento de la lista.

• Un párrafo agregado sin romper la cadena de la lista.

• Y finalmente el tercer elemento de la lista.

Blockquote dentro de la lista

* Este es el primer elemento de la lista.
* Este es el segundo elemento de la lista.

    > Blockquote en el medio de la lista.

* Y finalmente el tercer elemento de la lista.

El resultado se vería así:

• Este es el primer elemento de la lista.

• Este es el segundo elemento de la lista.

  Blockquote en el medio de la lista.

• Y aquí está el tercer elemento de la lista.

Bloque de código

Al insertar un bloque de código dentro de una lista, aplique una sangría de ocho espacios o dos pestañas.

A continuación se muestra un ejemplo de una lista con un bloque de código dentro.

1. Primero abramos nuestro archivo index.html.
2. Busque el bloque de código que se muestra a continuación:

        <html>
            <head>
            <title>El título de mi sitio web</title>
        </head>

3. Cambia el título de la página.

El resultado se ve así:

1. Primero abramos nuestro archivo index.html.

2. Busque el bloque de código que se muestra a continuación:

   <html>
       <head>
       <title>El título de mi sitio web</title>
   </head>

3. Cambia el título de la página.

Tenga en cuenta que la secuencia numérica de la lista no ha cambiado incluso con la inserción del bloque de código entre los elementos.

Imagenes

1. Primero abra el archivo del logotipo Markdown.
2. Vea el logo Markdown en la pantalla.

    ![Logotipo de Markdown](https://markdown.net.br/assets/img/basic-syntax/markdown-logo-small.png)

3. Ahora puede cerrar el archivo.

La representación de HTML se vería así:

1. Primero abra el archivo del logotipo Markdown.

2. Vea el logo Markdown en la pantalla.

   
3. Ahora puede cerrar el archivo.

Código

Usando Markdown podemos demarcar una parte del contenido como código usando comillas inversas `. Coloque una comilla inversa antes y después del texto que será interpretado por el procesador Markdown como código.

EJEMPLO

`código`.

<code>código.</code>

Escapar comillas sencillas

Puede encontrar la siguiente situación.

El contenido al que desea aplicar el formato de código ya contiene una comilla sencilla `. O si desea utilizar la comilla sencilla para resaltar parte del texto dentro del código mismo.

Para traducir, debe colocar una comilla sencilla dentro de una demarcación de código sin que esta comilla sencilla se interprete como marcado Markdown.

La solución es simple, duplique la parte posterior inicial y final que rodean el fragmento de código.

EJEMPLOS

``Usando `comilla sencilla` dentro del marcado de código.``

<code>Usando `comilla sencilla` dentro del marcado de código.</code>

Bloque de código

Markdown nos permite crear bloques de código sangrando 4 espacios o una tabulación.

Vea el siguiente ejemplo:

    <html>
        <head>
        </head>
    </html>

El resultado:

<html>
    <head>
    </head>
</html>

Usando la sintaxis extendida de Markdown podemos crear bloques de código sin sangrar espacios, para eso necesitamos usar la etiqueta bloques de código rodeados.

Lineas horizontales

Tres asteriscos seguidos ***, o tres guiones ---, o tres guiones bajos ___ crean una línea horizontal.

Una línea debe contener solo estos caracteres para que el procesador Markdown interprete la línea horizontal correctamente.

***

---

_________________

Usando cualquiera de los caracteres, el resultado será el mismo, ver más abajo.

NOTA: No es necesario estipular un número máximo de caracteres para crear una línea, siempre y cuando uses al menos 3 y la línea solo tenga estos caracteres, puedes ingresar tantos como quieras.

Líneas horizontales: mejores prácticas

Siempre agregue una línea en blanco antes y después de la marca de la línea horizontal. Esto es necesario debido a la sintaxis alternativa para la creación de títulos, si coloca tres guiones --- directamente debajo de una línea con contenido, esto se interpretará como un título de nivel 2.

Tabla 1.18 ejemplifica la creación de líneas horizontales de la manera correcta.

Links

Links se utilizan para crear vínculos entre partes de su documento. Cuando se trata de crear una página para Web o incluso archivos PDF, poder insertar links es una de las características indispensables para editar este tipo de documentos.

La sintaxis básica para crear links en Markdown es la siguiente:

• Coloque el texto que representará link entre corchetes, ejemplo:
  [El mejor sitio Markdown del mundo].
• Luego, la dirección de link, también conocida como URL, debe estar entre paréntesis, ejemplo:
  (https://es.markdown.net.br)

Poniendolo todo junto.

Visita [El mejor sitio de Markdown del mundo](https://es.markdown.net.br).

Y la salida en HTML.

Visite El mejor sitio de Markdown del mundo

Agregar títulos

Si tiene un poco de experiencia con HTML, sabe que cuando el usuario coloca mouse sobre un link en la página, normalmente se le presenta una pequeña etiqueta que describe el propósito de link.

Esta etiqueta es el título de link y para crearla usando Markdown, simplemente agregue entre paréntesis un texto entre comillas después de URL.

Ejemplo:

Visita [El mejor sitio Markdown del mundo](https://es.markdown.net.br "La referencia definitiva de Markdown.").

Salga de HTML, coloque mouse sobre link y observe cómo aparece el título.

Visita El mejor sitio Markdown del mundo

Direcciones URLs y email

<https://es.markdown.net.br>
<email@host.com>

El resultado se ve así:

https://es.markdown.net.br
email@host.com

Haciendo hincapié en links

Añadiendo asteriscos alrededor del formato link, es decir, antes de los corchetes y después de los paréntesis, le indica al procesador Markdown que se debe enfatizar ese link.

Por ejemplo:

Visita el sitio web: *[Referencia de Markdown](https://es.markdown.net.br)*.
Recomiendo el buscador: **[Duck Duck GO](https://duckduckgo.com/)**.

La salida en HTML se vería así:

Visita el sitio web: Referencia de Markdown
Recomiendo el motor de búsqueda: Duck Duck GO.

También puede resaltar un link usando formato de código.

Ejemplo:

Revisa la sección: [`código`](#code).

Resultado:

Revise la sección: código

Estilo de referencia Links

Markdown ofrece una sintaxis alternativa para crear links que permite una vista más limpia de su documento.

Con esta sintaxis puedes colocar el texto que será transformado en link en el medio del párrafo con solo una referencia, al final del documento agrega todo el links usando las mismas referencias que antes.

NOTA: Puede colocar la referencia link en cualquier lugar de su documento, lo recomiendo al final por razones de organización.

Como la creación de esta referencia link se divide en dos partes, analizaremos cada una de ellas.

Primera parte de link

Primero crearemos dos conjuntos de corchetes, dentro del primer lugar el texto link, que es el texto que aparecerá en la página, en segundo lugar una etiqueta que nos servirá como referencia para la dirección link:

[Markdown - Wikipedia][1]

NOTA: La etiqueta link de referencia, ubicada dentro del segundo par de corchetes, puede ser cualquier cosa, números, palabras, frases, incluso puede incluir puntuación, depende de usted, siempre que la referencia a link en el final del documento es el mismo.

Ejemplos:

[Markdown - Wikipedia][wiki_markdown.1]
[Sitio web oficial de John Gruber][JOHN GRUBER]

NOTA: La etiqueta de referencia tampoco distingue entre mayúsculas y minúsculas, es decir, wiki_markdown es lo mismo que WIKI_MARKDOWN.

Segunda parte de link

La segunda parte indica dónde apunta ese link, es decir, el URL de link.

Para configurar la segunda parte de link tenemos que tener lo siguiente:

1. Una etiqueta de referencia link válida que creó anteriormente en su documento, escríbala entre corchetes, seguida de dos puntos y al menos un espacio en blanco (por ejemplo, [etiqueta]:).
3. El título de link entre comillas "", comillas simples '' o paréntesis (), por supuesto, el título es opcional.

Todos los ejemplos siguientes son válidos para formatear la segunda parte:

[1]: https://en.wikipedia.org/wiki/Markdown
[1]: https://en.wikipedia.org/wiki/Markdown "Markdown - Wikipedia"
[1]: https://en.wikipedia.org/wiki/Markdown 'Markdown - Wikipedia'
[1]: https://en.wikipedia.org/wiki/Markdown (Markdown - Wikipedia)
[1]: <https://en.wikipedia.org/wiki/Markdown> "Markdown - Wikipedia"
[1]: <https://en.wikipedia.org/wiki/Markdown> 'Markdown - Wikipedia'
[1]: <https://en.wikipedia.org/wiki/Markdown> (Markdown - Wikipedia)

Volveré a señalar que puede poner esta segunda parte de link en cualquier lugar de su documento, la agrego al final del archivo por razones de organización

Poniendo todas las piezas juntas

Aquí voy a presentarles una situación en la que el uso de la referencia links puede hacer que su documento Markdown sea más fácil de leer.

Supongamos que necesita agregar uno o más links a un sitio web con más información sobre el contenido cubierto en ese párrafo.

En Markdown se vería así:

Para obtener más información, puede consultar este artículo de Markdown: [Wikipedia](https://en.wikipedia.org/wiki/Markdown "Markdown - Wikipedia"). O la documentación del idioma: [John Gruber](https://daringfireball.net/projects/markdown/ "Documentación original de Markdown.").

Tenga en cuenta que agregar links dentro del párrafo puede hacer que el texto sea más difícil de leer, especialmente si la persona que lo lee no conoce Markdown.

Como los links son importantes para el contexto del párrafo, no podemos eliminarlos, sin embargo, hay una forma más eficaz de limpiar ese párrafo utilizando la referencia links.

Para obtener más información, puede consultar este artículo de Markdown: [Wikipedia][1]. O la documentación del idioma: [John Gruber][2].

[1]: <https://en.wikipedia.org/wiki/Markdown> "Markdown - Wikipedia"
[2]: https://daringfireball.net/projects/markdown/ "Documentación original de Markdown."

Los dos formatos anteriores tendrán resultados zusivalyxxent en HTML:

Para obtener más información, puede consultar este artículo de Markdown: Wikipedia. O la documentación del idioma: John Gruber.

Referencia Links: mejores prácticas

En algunos casos, puede encontrar espacios en blanco en URLs, esto puede convertirse en un problema dependiendo de la aplicación Markdown.

Para evitar anomalías de formato, utilice el espacio en blanco codificado: %20.

Tabla 1.19 muestra el formato de los espacios en blanco en URL utilizando codificación.

Imagenes

La sintaxis de Markdown para agregar una imagen es la siguiente:

1. Un signo de exclamación: !.
2. El texto alternativo de la imagen entre corchetes: []
3. La dirección completa de la imagen entre paréntesis: ()
4. Título opcional entre comillas, aún entre paréntesis: ( "")

Ejemplo:

![Markdown es el lenguaje de marcado más simple del mundo.](https://markdown.net.br/assets/img/markdown.jpg "Logotipo de Markdown")

La conversión a HTML se ve así:

Imagen y Link

Para usar una imagen como link:

1. Cree un formato link normal.
2. En el primer par de corchetes en el formato link, que hace referencia a su texto, use el formato de imagen Markdown que aprendió anteriormente.

Ejemplo:

[![Una piedra antigua en el desierto.](https://markdown.net.br/assets/img/shiprock.jpg "Shiprock, New Mexico By Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

El resultado:

Caracteres que escapan

Para escapar de un carácter en el Markdown, es decir, para representarlo literalmente en el documento, inserte una barra invertida antes.

Ejemplo:

\* La barra invertida antes del asterisco hace que el procesador Markdown interprete esa línea como un párrafo y no como un elemento de una lista.

El resultado se ve así:

* La barra invertida antes del asterisco hace que el procesador Markdown interprete esta línea como un párrafo y no como un elemento de una lista.

Caracteres que puedes escapar

Tabla 1.20 muestra qué caracteres puede escapar en Markdown usando la barra invertida: \.

HTML y Markdown

Los programadores que ya tienen experiencia en HTML, a veces mezclan las dos sintaxis en el mismo documento, es decir, HTML y Markdown.

HTML puede ser útil en tareas como cambiar atributos de los elementos de su documento, como colores, ubicación, tamaño, etc.

Coloque el tags HTML directamente en su documento.

**negrita** <em>Itálico</em>

El resultado se ve así:

negrita itálico

HTML y Markdown: mejores prácticas

Es importante tener en cuenta que no todos los procesadores Markdown son compatibles con tags HTML; en algunos casos, solo admiten un subconjunto de estos tags.

La prueba y el error pueden ser una estrategia. Intente formatear el contenido usando tags y verifique si la salida en HTML es la esperada, o por supuesto, vea la documentación de la aplicación.

No sangra la línea del tags en HTML, ni con espacios en blanco ni con tabulaciones, esto puede interferir con el formato del elemento cuando se convierte.

Insertar una línea en blanco antes y después de los elementos del bloque, ejemplo: <div>, <table>, <pre>, <p>.

Evite colocar elementos Markdown dentro del contenido de tags HTML.

El código siguiente, aunque funciona en algunos editores, tiene una mezcla de sintaxis que puede causar problemas de formato.

<p>Itálico **negrita**</p>