Markdown a HTML: guía con ejemplos

Si alguna vez has abierto un archivo README en GitHub y te has preguntado cómo un texto plano se convierte en títulos ordenados, texto en negrita y enlaces clicables, esta guía de markdown a html es para ti. Markdown es un lenguaje de marcado ligero: escribes texto con unos pocos símbolos sencillos como # y *, y un conversor lo transforma en HTML limpio que puedes usar en cualquier parte. En esta guía aprenderás la sintaxis esencial de Markdown — títulos, énfasis, listas, enlaces, imágenes, bloques de código y tablas — con ejemplos listos para copiar y el HTML que producen. Al terminar, escribirás Markdown con confianza y lo convertirás a HTML en segundos.

Qué es Markdown y por qué lo adoran los desarrolladores

Markdown fue creado por John Gruber en 2004 (con la ayuda de Aaron Swartz) como una forma de escribir texto con formato que sigue siendo legible en su forma original. La idea era sencilla: usar caracteres que ya escribes — como asteriscos y almohadillas — en lugar de corchetes angulares, y dejar que un conversor se encargue de la traducción a HTML. Esa filosofía es la razón por la que lo adoran los desarrolladores. Los archivos Markdown son texto plano, así que funcionan en cualquier editor, se llevan bien con el control de versiones y se ven perfectos en GitHub, GitLab y los sitios de documentación.

Hoy dominan dos variantes. CommonMark es la especificación estandarizada que fija las reglas, mientras que GitHub Flavored Markdown (GFM) añade extras prácticos como tablas, listas de tareas y tachado. La mayoría de los conversores admiten ambas. La recompensa es la velocidad: escribes un par de caracteres y obtienes HTML totalmente estructurado sin tocar una etiqueta. Cuando quieras ver tu Markdown convertido en marcado real, un conversor de Markdown a HTML lo hace al instante.

Títulos, negritas y listas: lo esencial de esta guía de markdown a html

Los títulos, el énfasis y las listas cubren la mayor parte del Markdown del día a día: domina estos tres y podrás escribir casi cualquier documento. Veámoslos uno por uno, con el HTML que produce cada uno.

Títulos

Usa almohadillas: una # para el título más grande, hasta seis para el más pequeño. Deja siempre un espacio después de las almohadillas.

# Heading 1
## Heading 2
### Heading 3

Se convierte en:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Negrita y cursiva

Envuelve el texto en asteriscos o guiones bajos simples para la cursiva, dobles para la negrita y triples para ambas. GFM también admite el tachado con tildes dobles.

*italic* or _italic_
**bold** or __bold__
***bold and italic***
~~strikethrough~~

Que se convierte en:

<em>italic</em> or <em>italic</em>
<strong>bold</strong> or <strong>bold</strong>
<strong><em>bold and italic</em></strong>
<del>strikethrough</del>

Listas

Empieza los elementos sin orden con un guion, asterisco o signo más; los elementos ordenados, con números. Sangra dos espacios para las listas anidadas y usa - [ ] para las listas de tareas de GFM.

- Apples
- Oranges
  - Blood oranges

1. First step
2. Second step

- [ ] Write the draft
- [x] Publish the article

El HTML resultante:

<ul>
  <li>Apples</li>
  <li>Oranges
    <ul>
      <li>Blood oranges</li>
    </ul>
  </li>
</ul>
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Sintaxis de enlaces e imágenes

Los enlaces y las imágenes son donde Markdown demuestra su valor: una sintaxis compacta que produce anclas HTML e imágenes correctas.

Enlaces

La forma básica es [texto del enlace](URL). Puedes añadir un título opcional entre comillas después de la URL, que se convierte en el atributo title.

[Visit Toolinga](https://toolinga.com "Free online tools")

Produce:

<a href="https://toolinga.com" title="Free online tools">Visit Toolinga</a>

Para las URL sueltas, GFM convierte en enlace automáticamente todo lo que vaya entre corchetes angulares: <https://toolinga.com> se vuelve un enlace clicable sin más. Si reutilizas la misma URL muchas veces, los enlaces de referencia mantienen tu texto ordenado: define [etiqueta]: https://example.com una vez al final del documento y escribe [etiqueta] donde lo necesites.

Imágenes

Las imágenes funcionan exactamente igual que los enlaces, con un signo de exclamación delante. El texto entre corchetes se convierte en el atributo alt, importante para la accesibilidad y el SEO.

![A cat sitting on a laptop](cat.jpg "A helpful cat")

Se convierte en:

<img src="cat.jpg" alt="A cat sitting on a laptop" title="A helpful cat">

Bloques de código y tablas

Los desarrolladores escriben documentación constantemente, así que el soporte de Markdown para código y tablas es de primera clase.

Código en línea y bloques de código

Envuelve los fragmentos cortos en acentos graves simples: `npm install` se muestra como <code>npm install</code>. Para los bloques de varias líneas, delimítalos con tres acentos graves y añade el nombre del lenguaje para el resaltado de sintaxis:

```python
def greet(name):
    return f"Hello, {name}!"
```

Eso produce un bloque <pre><code> con una clase de lenguaje que tu resaltador puede usar:

<pre><code class="language-python">def greet(name):
    return f"Hello, {name}!"</code></pre>

Consejo: si tu código ya contiene triples acentos graves, delimítalo con cuatro en su lugar. ¿Necesitas un acento grave literal dentro del código en línea? Envuélvelo en acentos graves dobles.

Tablas

Las tablas son una extensión de GFM, no forman parte de la especificación original, pero casi todos los conversores las admiten. Separa el encabezado con una fila de guiones y controla la alineación con dos puntos.

| Tool | Free | Rating |
| :--- | :---: | ---: |
| Toolinga | Yes | 5 |
| Others | Sometimes | 3 |

Se convierte en una tabla HTML completa:

<table>
  <thead>
    <tr><th>Tool</th><th>Free</th><th>Rating</th></tr>
  </thead>
  <tbody>
    <tr><td>Toolinga</td><td>Yes</td><td>5</td></tr>
    <tr><td>Others</td><td>Sometimes</td><td>3</td></tr>
  </tbody>
</table>

Aquí :--- significa alineado a la izquierda, :---: centrado y ---: a la derecha. Mantén las barras verticales alineadas en tu texto fuente para que sea legible: a los conversores no les importa, pero a tu yo del futuro sí.

Convierte tu Markdown al instante

Conocer la sintaxis es la mitad de la batalla; convertirla es la otra mitad. Aquí tienes un mini-documento completo y exactamente lo que produce un conversor: un ejemplo práctico real de esta guía de markdown a html en acción.

Tu entrada en Markdown:

## Weekend Project

This weekend I built a **simple** website. Two wins:

- Faster load times
- Cleaner design

Read the full story on [my blog](https://example.com/blog).

El HTML resultante:

<h2>Weekend Project</h2>
<p>This weekend I built a <strong>simple</strong> website. Two wins:</p>
<ul>
  <li>Faster load times</li>
  <li>Cleaner design</li>
</ul>
<p>Read the full story on <a href="https://example.com/blog">my blog</a>.</p>

Fíjate en cómo cada atajo de Markdown se asignó a exactamente un elemento HTML, sin sorpresas. Pruébalo tú mismo: pega cualquier Markdown en un conversor de Markdown a HTML gratuito y copia el resultado directamente en tu sitio web, CMS o plantilla de correo. Si el HTML generado trae espacios en blanco de más o un formato verboso, pásalo por un minificador de HTML para reducir el tamaño del archivo antes de publicarlo.

Guía de markdown a html: preguntas frecuentes

¿Markdown es más difícil que HTML?

No, es deliberadamente más fácil. HTML exige etiquetas de apertura y cierre para todo; Markdown solo necesita unos pocos caracteres intuitivos. Un título lleva una # en lugar de <h1>...</h1>, y un conversor se encarga de la traducción, así que rara vez piensas en etiquetas.

¿Dónde puedo usar Markdown?

Casi en todas partes donde escriben los desarrolladores: archivos README de GitHub y GitLab, sitios de documentación, generadores de sitios estáticos como Jekyll y Hugo, foros como Reddit y Stack Overflow, apps de chat como Discord y Slack, y herramientas de notas como Obsidian y Notion. Muchas plataformas de blogs también lo aceptan.

¿Markdown admite tablas?

Sí, gracias a la sintaxis de barras verticales de GitHub Flavored Markdown, el formato que muestra esta guía. La especificación original de 2004 no incluía tablas, así que si tu conversor muestra barras literales, cambia a uno compatible con GFM.

¿Markdown reemplazará a HTML?

No, y nunca fue su objetivo. Markdown es un atajo para escribir HTML más rápido, no un reemplazo: lo que no puede expresar (clases personalizadas, formularios, reproductores multimedia) sigue necesitando HTML puro, que puedes mezclar directamente en cualquier documento Markdown.

Esta guía de markdown a html cubrió todo lo que un principiante necesita: títulos, énfasis, listas, enlaces, imágenes, bloques de código y tablas; cada uno un pequeño atajo que se expande en HTML correcto. La forma más rápida de afianzarlo es practicar: escribe tu próximo README, borrador de blog o nota de proyecto en Markdown y míralo convertirse. Pega tu trabajo en el conversor de Markdown a HTML gratuito y obtén HTML limpio, listo para publicar, en segundos.