Markdown para HTML: guia com exemplos

Se você já abriu um arquivo README no GitHub e se perguntou como um texto simples se transforma em títulos organizados, texto em negrito e links clicáveis, este guia de markdown para html é para você. Markdown é uma linguagem de marcação leve: você escreve texto com alguns símbolos simples como # e *, e um conversor o transforma em HTML limpo que pode ser usado em qualquer lugar. Neste guia, você vai aprender a sintaxe essencial do Markdown — títulos, ênfase, listas, links, imagens, blocos de código e tabelas — cada uma com um exemplo pronto para copiar e o HTML que ela produz. No final, você vai escrever Markdown com confiança e convertê-lo para HTML em segundos.

O que é Markdown e por que os desenvolvedores adoram

O Markdown foi criado por John Gruber em 2004 (com a ajuda de Aaron Swartz) como uma forma de escrever texto formatado que continua legível na sua forma original. A ideia era simples: usar caracteres que você já digita — como asteriscos e cerquilhas — em vez de colchetes angulares, e deixar que um conversor cuide da tradução para HTML. Essa filosofia é exatamente o motivo pelo qual os desenvolvedores adoram. Arquivos Markdown são texto puro, então funcionam em qualquer editor, combinam bem com controle de versão e ficam ótimos no GitHub, no GitLab e em sites de documentação.

Hoje, duas variantes dominam. CommonMark é a especificação padronizada que define as regras, enquanto o GitHub Flavored Markdown (GFM) adiciona extras práticos como tabelas, listas de tarefas e tachado. A maioria dos conversores aceita as duas. A recompensa é a velocidade: você digita alguns caracteres e obtém HTML totalmente estruturado sem tocar em uma tag. Quando quiser ver seu Markdown virar marcação de verdade, um conversor de Markdown para HTML faz isso na hora: cole seu texto e copie o HTML resultante.

Títulos, negrito e listas: o essencial do guia de markdown para html

Títulos, ênfase e listas cobrem a maior parte do Markdown do dia a dia: domine esses três e você conseguirá escrever quase qualquer documento. Vamos ver um por um, com o HTML que cada um produz.

Títulos

Use cerquilhas: uma # para o título maior, até seis para o menor. Deixe sempre um espaço depois das cerquilhas.

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

Isso vira:

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

Negrito e itálico

Envolva o texto em asteriscos ou underlines simples para o itálico, duplos para o negrito e triplos para os dois. O GFM também aceita tachado com til duplo.

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

Que se converte em:

<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

Comece os itens não ordenados com hífen, asterisco ou sinal de mais; os itens ordenados, com números. Indente dois espaços para listas aninhadas e use - [ ] para as listas de tarefas do GFM.

- Apples
- Oranges
  - Blood oranges

1. First step
2. Second step

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

O 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>

Sintaxe de links e imagens

Links e imagens são onde o Markdown realmente mostra seu valor: a sintaxe continua compacta enquanto produz âncoras HTML e imagens corretas.

Links

A forma básica é [texto do link](URL). Você pode adicionar um título opcional entre aspas depois da URL, que vira o atributo title.

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

Produz:

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

Para URLs soltas, o GFM transforma em link automaticamente tudo que estiver entre colchetes angulares: <https://toolinga.com> vira um link clicável na hora. Se você reutiliza a mesma URL várias vezes, os links de referência mantêm seu texto organizado: defina [rótulo]: https://example.com uma vez no final do documento e escreva [rótulo] onde precisar.

Imagens

Imagens funcionam exatamente como links, com um ponto de exclamação na frente. O texto entre corchetes vira o atributo alt, importante para acessibilidade e SEO.

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

Converte-se em:

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

Blocos de código e tabelas

Desenvolvedores escrevem documentação o tempo todo, então o suporte do Markdown para código e tabelas é de primeira linha.

Código em linha e blocos de código

Envolva trechos curtos em crases simples: `npm install` aparece como <code>npm install</code>. Para blocos de várias linhas, delimite com três crases e adicione o nome da linguagem para o destaque de sintaxe:

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

Isso produz um bloco <pre><code> com uma classe de linguagem que seu destacador pode usar:

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

Dica: se o seu código já contiver crases triplas, delimite com quatro crases. Precisa de uma crase literal dentro do código em linha? Envolva em crases duplas.

Tabelas

Tabelas são uma extensão do GFM, não fazem parte da especificação original, mas quase todos os conversores as aceitam. Separe o cabeçalho com uma linha de hifens e controle o alinhamento com dois-pontos.

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

Vira uma tabela 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>

Aqui :--- significa alinhado à esquerda, :---: centralizado e ---: à direita. Mantenha as barras verticais alinhadas no seu texto original para facilitar a leitura: os conversores não se importam, mas o seu eu do futuro vai agradecer.

Converta seu Markdown na hora

Conhecer a sintaxe é metade da batalha; convertê-la é a outra metade. Aqui está um mini-documento completo e exatamente o que um conversor produz a partir dele: um exemplo prático real deste guia de markdown para html em ação.

Sua entrada em 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).

O 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>

Note como cada atalho do Markdown foi mapeado para exatamente um elemento HTML, sem surpresas. Teste você mesmo: cole qualquer Markdown em um conversor de Markdown para HTML gratuito e copie o resultado direto para seu site, CMS ou modelo de e-mail. Se o HTML gerado vier com espaços em branco demais ou formatação verbosa, passe-o por um minificador de HTML para reduzir o tamanho do arquivo antes de publicar.

Guia de markdown para html: perguntas frequentes

Markdown é mais difícil que HTML?

Não, ele é propositalmente mais fácil. O HTML exige tags de abertura e fechamento para tudo; o Markdown precisa apenas de alguns caracteres intuitivos. Um título leva uma # em vez de <h1>...</h1>, e um conversor cuida da tradução, então você raramente pensa em tags.

Onde posso usar Markdown?

Em quase todo lugar onde desenvolvedores escrevem: READMEs do GitHub e do GitLab, sites de documentação, geradores de sites estáticos como Jekyll e Hugo, fóruns como Reddit e Stack Overflow, apps de chat como Discord e Slack e ferramentas de notas como Obsidian e Notion. Muitas plataformas de blog também aceitam.

Markdown aceita tabelas?

Sim, graças à sintaxe de barras verticais do GitHub Flavored Markdown, o formato mostrado neste guia. A especificação original de 2004 não incluía tabelas, então se o seu conversor mostrar barras literais, troque para um com suporte a GFM.

Markdown vai substituir o HTML?

Não, e nunca foi essa a intenção. Markdown é um atalho para escrever HTML mais rápido, não um substituto: tudo que o Markdown não consegue expressar (classes personalizadas, formulários, players de mídia incorporados) continua precisando de HTML puro — que, convenientemente, você pode misturar direto em qualquer documento Markdown.

Este guia de markdown para html cobriu tudo que um iniciante precisa: títulos, ênfase, listas, links, imagens, blocos de código e tabelas; cada um um pequeno atalho que se expande em HTML correto. A forma mais rápida de fixar o aprendizado é praticar: escreva seu próximo README, rascunho de blog ou nota de projeto em Markdown e veja a conversão acontecer. Cole seu trabalho no conversor de Markdown para HTML gratuito e obtenha HTML limpo, pronto para publicar, em segundos.