Convierte HTML a Markdown limpio

Cómo convertir HTML a Markdown

1. Añade tu HTML. Pega el código en el cuadro, abre un archivo .html local o copia una sección de cualquier página web y pégala: con el pegado enriquecido activado, el conversor toma del portapapeles el HTML con formato en lugar del texto plano.
2. Indica una URL base si los enlaces son relativos. El código copiado del código fuente de una página suele traer enlaces como /docs/setup. Escribe la dirección de la página y cada enlace e imagen relativos pasan a ser absolutos.
3. Elige tu estilo de Markdown. Los valores por defecto (encabezados ATX, viñetas con guion, código con valla, enlaces en línea, GFM activado) van bien con GitHub, GitLab, Obsidian, la mayoría de generadores de sitios estáticos y las herramientas de IA.
4. Copia o descarga. El resultado se actualiza mientras escribes. Cópialo al portapapeles o guárdalo como archivo .md con el nombre del primer encabezado.

Qué se convierte, elemento por elemento

Markdown tiene un vocabulario mucho más pequeño que HTML, así que el verdadero trabajo de un conversor es decidir en qué se convierte cada elemento. Esto es lo que produce la herramienta:

• Encabezados: <h1>–<h6> pasan a #–######. El estilo Setext solo subraya H1 y H2 porque es todo lo que admite la sintaxis; de H3 en adelante se sigue usando #.
• Negrita y cursiva (<strong>, <b>, <em>, <i>) usan los delimitadores que elijas.
• Enlaces: pasan a [texto](url "título"), o a referencias numeradas reunidas al final del documento si eliges enlaces por referencia. Los enlaces que ejecutan scripts (javascript:) o llevan datos data: se reducen a su texto.
• Imágenes: pasan a ![alt](src). También se recogen las imágenes de carga diferida que guardan la dirección real en data-src. Las imágenes data: incrustadas se descartan porque un bloque base64 vuelve ilegible un archivo Markdown.
• Listas, incluidas las anidadas a varios niveles, se sangran bajo su elemento padre. Las listas ordenadas conservan su número de start, de modo que una lista que empieza en 4 sigue empezando en 4.
• Citas: pasan a líneas con >, incluidas las citas anidadas.
• Código: el <code> en línea pasa a comillas invertidas; los bloques <pre> pasan a bloques con valla y con el lenguaje cuando se declara uno (ver más abajo).
• Tablas: pasan a tablas GFM con barras verticales. Los detalles y límites están en la siguiente sección.
• Tachado y listas de tareas: <del>, <s> y <strike> pasan a ~~texto~~; los elementos de lista que empiezan con una casilla pasan a - [ ] o - [x].
• Eliminados por completo: <script>, <style>, <noscript>, <template>, iframes, embeds, SVG y canvas. Los contenedores de maquetación como <div> y <span> se desenvuelven y solo se conserva su texto, que es justo lo que hace que Markdown sea más pequeño y fácil de leer que el HTML del que viene.

Tablas: qué puede y qué no puede contener Markdown

La especificación de GitHub Flavored Markdown (en inglés) define una tabla como una fila de encabezado, una fila delimitadora de guiones y las filas del cuerpo. Tres reglas de la especificación determinan cómo se convierten las tablas HTML:

• Se exige una fila de encabezado. Muchas tablas HTML, sobre todo las pegadas desde hojas de cálculo o páginas de CMS antiguos, no tienen ninguna celda <th>. Tal cual no pueden convertirse en tablas con barras verticales, así que por defecto el conversor convierte la primera fila en encabezado. Desmarca la opción si prefieres conservar esas tablas como HTML.
• No cabe contenido de bloque dentro de una celda. La especificación indica que no se pueden insertar elementos de bloque en una tabla, así que los párrafos y saltos de línea dentro de una celda se aplanan en una sola línea. Las listas dentro de celdas pierden su estructura; si una tabla tiene contenido enriquecido, considera conservarla como HTML.
• Una barra vertical literal debe escaparse. Un | dentro de una celda abriría una columna nueva, así que el conversor lo escribe como \|, algo que la especificación permite en cualquier parte de una celda, incluso dentro de fragmentos de código.

Las celdas combinadas tienen soporte parcial: una celda con colspan="3" va seguida de dos celdas vacías para que las columnas sigan alineadas. Las combinaciones de filas no tienen equivalente en Markdown y no se reproducen. Un <caption> se mueve encima de la tabla como párrafo propio, y la alineación de columna de los atributos align pasa a :--, :-: o --: en la fila delimitadora.

Bloques de código y resaltado de sintaxis

Los bloques de código con valla pueden llevar una cadena de información tras la valla de apertura, como ```python, que los renderizadores usan para colorear el código. El conversor busca el lenguaje donde lo ponen los resaltadores: clases language-* y lang-* (Prism, highlight.js y la mayoría de renderizadores de Markdown), el contenedor highlight-source-* de GitHub y los atributos data-lang o data-language. Un <pre> sin un elemento <code> interior se sigue tratando como bloque de código, no como prosa escapada.

El texto del código se toma literalmente, así que el marcado del resaltador (todos esos elementos <span> de colores) desaparece sin tocar el código. Si el propio código contiene una racha de tres comillas invertidas, la valla se hace más larga que esa racha, porque la especificación exige que la valla de cierre sea al menos tan larga como la de apertura; así se mantiene intacta la documentación sobre Markdown escrita en Markdown.

Las opciones, explicadas

Encabezados ATX o Setext

Los encabezados ATX (# Título) sirven para los seis niveles y es lo que esperan casi todas las herramientas. Los encabezados Setext subrayan el texto con === o ---; algunas guías de estilo los prefieren para H1 y H2, pero no pueden expresar H3 ni los niveles inferiores.

Enlaces en línea o por referencia

Los enlaces en línea mantienen cada URL junto a su texto, algo que va bien en documentos cortos y en prompts de IA. Los enlaces por referencia llevan las URL a una lista numerada al final, lo que mantiene legibles los párrafos largos en un editor de texto plano y es habitual en los repositorios de documentación.

Escapar caracteres de Markdown

Textos como 2024. Un buen año o nombre_de_archivo se interpretarían mal como una lista o como cursiva, así que el conversor escapa esos caracteres con barras invertidas. Es lo correcto para cualquier cosa que vaya a renderizarse. Cuando la salida va a un chat con un modelo de IA, a un índice de búsqueda o a una nota de texto plano, desmarca el escape para obtener un texto más limpio.

URL base

Las URL relativas solo tienen sentido en la página de la que proceden. Con una URL base definida, ../images/chart.png en https://example.com/blog/post pasa a ser https://example.com/images/chart.png, resuelta con las mismas reglas que usan los navegadores.

Convertir una página web entera

Este conversor no descarga URL. Una página en tu navegador no puede leer el HTML de otro sitio salvo que ese sitio lo permita, y muchas páginas modernas montan su contenido con JavaScript tras cargarse, así que una descarga desde el servidor a menudo devolvería una carcasa vacía. Copiar desde la página ya renderizada evita ambos problemas: selecciona el artículo, copia y pega aquí. Obtienes el texto que ves de verdad, con enlaces y formato, y nada de la navegación, los avisos de cookies ni los anuncios que no seleccionaste. Para extraer todos los enlaces de una página, usa en cambio el extractor de enlaces (en inglés).

Problemas habituales y soluciones

• Una tabla aparece como HTML en la salida. GFM está desactivado, o la promoción de encabezado está desactivada y la tabla no tiene fila de encabezado. Vuelve a activar cualquiera de las dos opciones.
• Los enlaces apuntan al sitio equivocado. Eran relativos. Añade la dirección de la página como URL base.
• Los saltos de línea se ven raros. Un <br> pasa a dos espacios al final y un salto de línea, el salto duro de CommonMark. Algunos editores recortan los espacios finales al guardar, lo que lo convierte de nuevo en un salto blando.
• Falta texto. Si el HTML vino de «Ver código fuente» en un sitio con mucho JavaScript, puede que el contenido ni siquiera esté en el marcado. Copia mejor desde la página renderizada.
• Todo sale en un solo párrafo. El origen usaba elementos <div> en lugar de <p> para los párrafos. Markdown solo conoce los elementos semánticos, así que una página construida con divs con estilos se convierte en tiradas de texto plano.

¿Por qué convertir HTML a Markdown?

Markdown conserva lo que lleva significado (encabezados, énfasis, enlaces, listas, tablas, citas y código) y descarta el marcado de maquetación y los estilos en línea. Eso lo hace más fácil de editar, de revisar en un control de versiones, de llevar a una base de conocimiento como Obsidian o a un sitio de documentación, o de entregar a un modelo de IA sin gastar su contexto en atributos class. Los desarrolladores lo usan para migrar contenido de un CMS a un sitio estático; los escritores, para mover borradores entre editores; los investigadores, para conservar copias limpias de sus fuentes. Si lo que haces es reunir fuentes en vez de convertirlas, Marqly puede organizar tus enlaces de investigación (en inglés) en una única biblioteca con búsqueda, y la página del flujo para desarrolladores (en inglés) muestra cómo los documentos y fragmentos guardados siguen siendo fáciles de encontrar.

Privado por diseño

El conversor es la biblioteca de código abierto Turndown con su complemento de Markdown de GitHub, más el tratamiento propio de esta página para tablas, código y enlaces, todo incluido en la página. Funciona sin conexión una vez cargado, y el texto que pegas, los archivos y los ajustes se quedan en tu dispositivo. Para comprobar rápido el tamaño antes o después de convertir, la calculadora de tiempo de lectura también cuenta palabras y caracteres en local.