title: Guia de HTML embutido em Markdown description: Como embutir HTML em Markdown para obter imagens, vídeos, tabelas, layouts e funcionalidades avançadas.

HTML embutido

Uma das forças do Markdown é permitir HTML inline, oferecendo mais expressividade e funcionalidades.

HTML básico

Elementos inline

Podes usar tags HTML diretamente:

markdown

Este é um parágrafo com <strong>texto em negrito</strong> e <em>texto em itálico</em>.

Podes usar <code>código inline</code> ou <mark>texto destacado</mark>.

Aqui está uma <a href="https://www.markdownlang.com" target="_blank">ligação externa</a>.

Resultado:

Este é um parágrafo com texto em negrito e texto em itálico.

Podes usar código inline ou texto destacado.

Aqui está uma ligação externa.

Elementos de bloco

markdown

<div class="alert alert-info">
  <h4>Informação</h4>
  <p>Esta é uma caixa informativa criada com HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Este é um bloco de citação com estilo personalizado.</p>
  <footer>—— Fonte da citação</footer>
</blockquote>

Resultado:

Informação

Esta é uma caixa informativa criada com HTML.

Este é um bloco de citação com estilo personalizado.
—— Fonte da citação

Reforços comuns com HTML

Imagens

Tamanho

markdown

<!-- Usar HTML para controlar precisamente o tamanho da imagem -->
<img src="example.jpg" alt="Imagem de exemplo" width="300" height="200">

<!-- Imagem responsiva -->
<img src="example.jpg" alt="Imagem responsiva" style="max-width: 100%; height: auto;">

<!-- Alinhamento de imagem -->
<div align="center">
  <img src="example.jpg" alt="Imagem centralizada" width="400">
</div>

Combinações

markdown

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="Imagem 1" style="width: 200px;">
  <img src="img2.jpg" alt="Imagem 2" style="width: 200px;">
  <img src="img3.jpg" alt="Imagem 3" style="width: 200px;">
</div>

<!-- Grid de imagens -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="Imagem 1" style="width: 100%;">
  <img src="img2.jpg" alt="Imagem 2" style="width: 100%;">
  <img src="img3.jpg" alt="Imagem 3" style="width: 100%;">
  <img src="img4.jpg" alt="Imagem 4" style="width: 100%;">
</div>

Vídeo e média

Incorporar vídeo

markdown

<!-- Vídeo do YouTube -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Vídeo do Bilibili -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- Vídeo HTML5 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Incorporar áudio

markdown

<!-- Áudio HTML5 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- NetEase Cloud Music -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

Tabelas

Estruturas complexas

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Produto</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Dados de vendas</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Receita total</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Produto A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Produto B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

Resultado:

Produto	Dados de vendas		Receita total
Produto	Q1	Q2	Receita total
Produto A	¥100,000	¥120,000	¥220,000
Produto B	¥80,000	¥90,000	¥170,000

Formulários e interativos

Elementos básicos

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Nome:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">E-mail:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">Mensagem:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit"
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    Submeter
  </button>
</form>

Elementos interativos

markdown

<!-- conteúdo recolhível -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Clique para ver detalhes</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Conteúdo recolhível.</p>
    <p>Podes incluir qualquer HTML.</p>
  </div>
</details>

<!-- barra de progresso -->
<div style="margin: 1rem 0;">
  <label>Progresso:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- classificação em estrelas -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Resultado:

Clique para ver detalhes

Conteúdo recolhível.

Podes incluir qualquer HTML.

Progresso:32%32%

★★★★☆

Layout e estilos

Flexbox

markdown

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">Título</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Texto descritivo</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Ação
    </button>
  </div>
</div>

<!-- cards -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Cartão 1</h5>
    <p>Descrição</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Cartão 2</h5>
    <p>Descrição</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Cartão 3</h5>
    <p>Descrição</p>
  </div>
</div>

Grid

markdown

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>Funcionalidade 1</h6>
    <p>Descrição</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Funcionalidade 2</h6>
    <p>Descrição</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Funcionalidade 3</h6>
    <p>Descrição</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Funcionalidade 4</h6>
    <p>Descrição</p>
  </div>
</div>

Alertas e avisos

Tipos de alerta

markdown

<!-- info -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Info:</strong> Uma caixa informativa.
</div>

<!-- sucesso -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Sucesso:</strong> Operação concluída.
</div>

<!-- aviso -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Aviso:</strong> Atenção a esta nota importante.
</div>

<!-- erro -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Erro:</strong> Ocorreu um erro.
</div>

Resultado:

💡 Info: Uma caixa informativa.

✅ Sucesso: Operação concluída.

⚠️ Aviso: Atenção a esta nota importante.

❌ Erro: Ocorreu um erro.

Conteúdos de terceiros

Redes sociais

markdown

<!-- Incorporar Twitter -->
<blockquote class="twitter-tweet">
  <p lang="pt" dir="ltr">Um tweet de exemplo...</p>
  <a href="https://twitter.com/user/status/123456789">Tweet Link</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Weibo -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

Serviços online

markdown

<!-- CodePen -->
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Example" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- JSFiddle -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Componentes personalizados

Etiquetas e badges

markdown

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  Frontend
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

Resultado:

Frontend React JavaScript

Linha do tempo

markdown

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Dez 2023</h5>
    <p style="margin: 0;">Arranque do projeto, requisitos e escolha técnica.</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Jan 2024</h5>
    <p style="margin: 0;">Core concluído, início de testes.</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">Fev 2024</h5>
    <p style="margin: 0;">Deploy e início de operação.</p>
  </div>
</div>

Notas e limitações

Segurança

markdown

<!-- ✅ HTML seguro -->
<div style="color: blue;">Estilos seguros</div>
<strong>Texto em negrito</strong>
<em>Texto em itálico</em>

<!-- ❌ Pode ser filtrado -->
<script>alert('Script inseguro')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Compatibilidade do processador

Diferentes processadores de Markdown têm níveis diferentes de suporte para HTML:

Processador	Suporte HTML	Limites
GitHub	Parcial	Filtra scripts e tags perigosas
GitLab	Parcial	Filtros de segurança
VitePress	Total	Depende de config
Jekyll	Total	Configurável
Hugo	Parcial	Precisa ativar

Boas práticas

markdown

✅ Recomenda-se:
1. Usar etiquetas HTML semânticas
2. Adicionar melhorias de estilo adequadas
3. Garantir acessibilidade do conteúdo
4. Manter código limpo e manutenível

❌ Evitar:
1. Uso excessivo de HTML complexo
2. Incorporar scripts inseguros
3. Ignorar adaptação móvel
4. Usar etiquetas obsoletas

Casos práticos

1) Documentação de produto

markdown

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 Funcionalidades</h2>
    <p style="margin: 0; opacity: 0.9;">Experimente novidades e melhorias</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      Saber mais
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ Alto desempenho</h4>
    <p style="color: #666; line-height: 1.6;">Algoritmos e arquitetura otimizados.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 Seguro e fiável</h4>
    <p style="color: #666; line-height: 1.6;">Segurança a nível empresarial, encriptação.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 Fácil de usar</h4>
    <p style="color: #666; line-height: 1.6;">UI intuitiva e fluxos simples.</p>
  </div>
  
</div>

2) Documentação de API

markdown

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">Criar utilizador</h4>
  <p style="color: #6c757d; margin: 0;">Cria uma nova conta</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Parâmetros do pedido
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Parâmetro</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Tipo</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Obrigatório</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Descrição</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">Nome</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">E‑mail</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3) Equipa

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 A nossa equipa</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="João" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">João</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">Frontend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Foco em React/Vue e UX.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="Maria" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">Maria</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">Backend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Node.js/Python e arquitetura.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

Sintaxe relacionada

Ferramentas e recursos

Frameworks HTML/CSS

Bootstrap: prototipagem e responsive
Tailwind CSS: utilities‑first
Bulma: moderno
Foundation: responsive

Ferramentas online

CodePen: editor online HTML/CSS/JS
JSFiddle: testes de snippets
CSS Grid Generator: gerador de grid
Flexbox Froggy: jogo de Flexbox

DevTools do navegador

Chrome DevTools: inspeção/estilos
Firefox Developer Tools: grid/flexbox
Safari Web Inspector: macOS/iOS
Edge DevTools: acessibilidade

Lembra‑te: HTML embutido é poderoso, mas usa com moderação para manter legibilidade e manutenção.

title: Guia de HTML embutido em Markdown description: Como embutir HTML em Markdown para obter imagens, vídeos, tabelas, layouts e funcionalidades avançadas. ​

HTML embutido ​

HTML básico ​

Elementos inline ​

Elementos de bloco ​

Informação

Reforços comuns com HTML ​

Imagens ​

Tamanho ​

Combinações ​

Vídeo e média ​

Incorporar vídeo ​

Incorporar áudio ​

Tabelas ​

Estruturas complexas ​

Formulários e interativos ​

Elementos básicos ​

Elementos interativos ​

Layout e estilos ​

Flexbox ​

Grid ​

Alertas e avisos ​

Tipos de alerta ​

Conteúdos de terceiros ​

Redes sociais ​

Serviços online ​

Componentes personalizados ​

Etiquetas e badges ​

Linha do tempo ​

Notas e limitações ​

Segurança ​

Compatibilidade do processador ​

Boas práticas ​

Casos práticos ​

1) Documentação de produto ​

2) Documentação de API ​

3) Equipa ​

Sintaxe relacionada ​

Ferramentas e recursos ​

Frameworks HTML/CSS ​

Ferramentas online ​

DevTools do navegador ​

title: Guia de HTML embutido em Markdown description: Como embutir HTML em Markdown para obter imagens, vídeos, tabelas, layouts e funcionalidades avançadas.

HTML embutido

HTML básico

Elementos inline

Elementos de bloco

Reforços comuns com HTML

Imagens

Tamanho

Combinações

Vídeo e média

Incorporar vídeo

Incorporar áudio

Tabelas

Estruturas complexas

Formulários e interativos

Elementos básicos

Elementos interativos

Layout e estilos

Flexbox

Grid

Alertas e avisos

Tipos de alerta

Conteúdos de terceiros

Redes sociais

Serviços online

Componentes personalizados

Etiquetas e badges

Linha do tempo

Notas e limitações

Segurança

Compatibilidade do processador

Boas práticas

Casos práticos

1) Documentação de produto

2) Documentação de API

3) Equipa

Sintaxe relacionada

Ferramentas e recursos

Frameworks HTML/CSS

Ferramentas online

DevTools do navegador