Incorporamento HTML

Una delle potenti funzionalità di Markdown è la possibilità di incorporare direttamente codice HTML, offrendo maggiore espressività ed estensioni funzionali ai tuoi documenti.

Incorporamento HTML di base

Elementi HTML inline

Puoi usare direttamente i tag HTML in Markdown:

markdown

This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.

You can use <code>inline code</code> or <mark>highlighted text</mark>.

Here is an <a href="https://www.markdownlang.com" target="_blank">external link</a>.

Risultato renderizzato:

This is a paragraph with bold text and italic text.

You can use inline code or highlighted text.

Here is an external link.

Elementi HTML a blocco

markdown

<div class="alert alert-info">
  <h4>Info</h4>
  <p>This is an info alert box created with HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>This is a custom styled blockquote.</p>
  <footer>—— Source</footer>
</blockquote>

Risultato renderizzato:

Info

This is an info alert box created with HTML.

This is a custom styled blockquote.
—— Source

Miglioramenti HTML comuni

Miglioramenti immagini

Controllo dimensione immagine

markdown

<!-- Usa HTML per controllare precisamente la dimensione -->
<img src="example.jpg" alt="Immagine di esempio" width="300" height="200">

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

<!-- Allineamento immagine -->
<div align="center">
  <img src="example.jpg" alt="Immagine centrata" width="400">
</div>

Galleria immagini

markdown

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

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

Incorporamento video e media

Incorporamento video

markdown

<!-- Video 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>

<!-- Video 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>

<!-- Video 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>

Incorporamento audio

markdown

<!-- Audio 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>

Miglioramenti tabelle

Strutture di tabelle complesse

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Prodotto</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Dati di vendita</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Ricavo totale</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;">Prodotto 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;">Prodotto 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>

Risultato renderizzato:

Prodotto	Dati di vendita		Ricavo totale
Prodotto	Q1	Q2	Ricavo totale
Prodotto A	¥100,000	¥120,000	¥220,000
Prodotto B	¥80,000	¥90,000	¥170,000

Form e elementi interattivi

Elementi base del form

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;">Email:</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;">Messaggio:</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;">
    Invia
  </button>
</form>

Elementi interattivi

markdown

<!-- Contenuto espandibile -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Clicca per espandere per maggiori dettagli</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Questo è il contenuto dettagliato all'interno della sezione espandibile.</p>
    <p>Qui puoi includere qualsiasi contenuto HTML.</p>
  </div>
</details>

<!-- Barra di avanzamento -->
<div style="margin: 1rem 0;">
  <label>Avanzamento progetto:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Valutazione a stelle -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Risultato renderizzato:

Clicca per espandere per maggiori dettagli

Questo è il contenuto dettagliato all'interno della sezione espandibile.

Qui puoi includere qualsiasi contenuto HTML.

Avanzamento progetto:32%32%

★★★★☆

Layout e stile

Layout 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;">Titolo</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Questa è una descrizione</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Azione
    </button>
  </div>
</div>

<!-- Layout card -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 1</h5>
    <p>Descrizione contenuto card</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 2</h5>
    <p>Descrizione contenuto card</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 3</h5>
    <p>Descrizione contenuto card</p>
  </div>
</div>

Layout griglia

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>Funzionalità 1</h6>
    <p>Descrizione funzionalità</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Funzionalità 2</h6>
    <p>Descrizione funzionalità</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Funzionalità 3</h6>
    <p>Descrizione funzionalità</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Funzionalità 4</h6>
    <p>Descrizione funzionalità</p>
  </div>
</div>

Avvisi e segnalazioni

Tipi di avvisi

markdown

<!-- Avviso info -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Info:</strong> Questo è un avviso informativo.
</div>

<!-- Avviso successo -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Successo:</strong> L'operazione è stata completata con successo.
</div>

<!-- Avviso warning -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Attenzione:</strong> Si prega di prestare attenzione a questo avviso importante.
</div>

<!-- Avviso errore -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Errore:</strong> Si è verificato un errore.
</div>

Risultato renderizzato:

💡 Info: Questo è un avviso informativo.

✅ Successo: L'operazione è stata completata con successo.

⚠️ Attenzione: Si prega di prestare attenzione a questo avviso importante.

❌ Errore: Si è verificato un errore.

Incorporamento contenuti di terze parti

markdown

<!-- Incorporamento Twitter -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Questo è il contenuto di un tweet...</p>
  <a href="https://twitter.com/user/status/123456789">Link Tweet</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Incorporamento 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>

Servizi online

markdown

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

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

<!-- Incorporamento 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>

Componenti personalizzati

Tag e badge

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>

Risultato renderizzato:

Frontend React JavaScript

Timeline

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;">Dicembre 2023</h5>
    <p style="margin: 0;">Avvio progetto, completata analisi requisiti e selezione tecnologie.</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;">Gennaio 2024</h5>
    <p style="margin: 0;">Sviluppate le funzionalità core, avviata la fase di test.</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;">Febbraio 2024</h5>
    <p style="margin: 0;">Lancio progetto e avvio promozione.</p>
  </div>
</div>

Note e limitazioni

Sicurezza HTML

markdown

<!-- ✅ HTML sicuro -->
<div style="color: blue;">Stile sicuro</div>
<strong>Testo in grassetto</strong>
<em>Testo in corsivo</em>

<!-- ❌ Contenuto potenzialmente filtrato -->
<script>alert('Unsafe script')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Compatibilità parser Markdown

I diversi parser Markdown hanno livelli di supporto HTML differenti:

Parser	Supporto HTML	Limitazioni
GitHub	Parziale	Script e tag pericolosi filtrati
GitLab	Parziale	Filtraggio sicurezza
VitePress	Completo	Dipende dalla configurazione
Jekyll	Completo	Configurabile
Hugo	Parziale	Deve essere abilitato

Raccomandazioni best practice

markdown

✅ Consigliato:
1. Usa tag HTML semantici
2. Aggiungi miglioramenti di stile appropriati
3. Garantire l'accessibilità dei contenuti
4. Mantieni il codice pulito e manutenibile

❌ Evita:
1. Uso eccessivo di HTML complesso
2. Incorporamento di script non sicuri
3. Ignorare l'adattamento mobile
4. Uso di tag deprecati

Scenari pratici

1. Documentazione prodotto

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;">🚀 Funzionalità prodotto</h2>
    <p style="margin: 0; opacity: 0.9;">Scopri le nostre nuove funzionalità e miglioramenti</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);">
      Scopri di più
    </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;">⚡ Alte prestazioni</h4>
    <p style="color: #666; line-height: 1.6;">Algoritmi e architettura ottimizzati per prestazioni elevate.</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;">🔒 Sicuro e affidabile</h4>
    <p style="color: #666; line-height: 1.6;">Sicurezza di livello enterprise, trasmissione e archiviazione dati criptate.</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;">🎨 Facile da usare</h4>
    <p style="color: #666; line-height: 1.6;">Interfaccia utente intuitiva e flusso di lavoro semplificato.</p>
  </div>
  
</div>

2. Documentazione 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;">Crea utente</h4>
  <p style="color: #6c757d; margin: 0;">Crea un nuovo account utente</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Parametri richiesta
  </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;">Parametro</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;">Obbligatorio</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Descrizione</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 utente</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;">Indirizzo email</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Presentazione del team

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Il nostro team</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="Zhang San" 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;">Zhang San</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">Frontend Engineer</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Specializzato in sviluppo React e Vue, appassionato di user experience design.</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="Li Si" 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;">Li Si</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">Backend Engineer</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Esperto di Node.js e Python, focalizzato su design architetturale di sistema.</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>

Sintassi correlata

Panoramica sintassi di base - Basi Markdown
Sintassi estesa - Estensioni Markdown
Best practice - Raccomandazioni di scrittura

Strumenti e risorse

Framework HTML/CSS

Bootstrap: Prototipazione rapida e design responsivo
Tailwind CSS: Framework CSS utility-first
Bulma: Framework CSS moderno
Foundation: Framework front-end responsivo

Strumenti online

CodePen: Editor online HTML/CSS/JS
JSFiddle: Test di snippet di codice
CSS Grid Generator: Generatore layout CSS grid
Flexbox Froggy: Gioco per imparare Flexbox

Strumenti sviluppatore browser

Chrome DevTools: Ispezione elementi e debug stili
Firefox Developer Tools: Debug grid e flexbox
Safari Web Inspector: Debug macOS/iOS
Edge DevTools: Verifica accessibilità

Ricorda, anche se incorporare HTML è potente, usalo con moderazione per mantenere la documentazione leggibile e manutenibile.

Incorporamento HTML ​