Intégration HTML

L'une des fonctionnalités puissantes de Markdown est la possibilité d'intégrer directement du code HTML, offrant ainsi une expressivité plus riche et des extensions fonctionnelles à vos documents.

Intégration HTML de base

Éléments HTML en ligne

Vous pouvez utiliser des balises HTML directement dans Markdown :

Ceci est un paragraphe avec du <strong>texte en gras</strong> et du <em>texte en italique</em>.

Vous pouvez utiliser du <code>code en ligne</code> ou du <mark>texte surligné</mark>.

Voici un <a href="https://www.markdownlang.com" target="_blank">lien externe</a>.

Rendu obtenu :

Ceci est un paragraphe avec du texte en gras et du texte en italique.

Vous pouvez utiliser du code en ligne ou du texte surligné.

Voici un lien externe.

Éléments HTML de bloc

<div class="alert alert-info">
  <h4>Info</h4>
  <p>Ceci est une boîte d'alerte info créée avec du HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Ceci est une citation personnalisée avec style.</p>
  <footer>—— Source</footer>
</blockquote>

Rendu obtenu :

Info

Ceci est une boîte d'alerte info créée avec du HTML.

Ceci est une citation personnalisée avec style.

—— Source

Améliorations HTML courantes

Améliorations des images

Contrôle de la taille des images

<!-- Utilisez HTML pour contrôler précisément la taille de l'image -->
<img src="example.jpg" alt="Image exemple" width="300" height="200">

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

<!-- Alignement de l'image -->
<div align="center">
  <img src="example.jpg" alt="Image centrée" width="400">
</div>

Galerie d'images

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

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

Intégration de vidéos et médias

Intégrer une vidéo

<!-- Vidéo YouTube -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="Lecteur vidéo YouTube" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Vidéo 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>

<!-- Vidéo HTML5 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Votre navigateur ne supporte pas la balise vidéo.
</video>

Intégrer de l'audio

<!-- Audio HTML5 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Votre navigateur ne supporte pas la balise audio.
</audio>

<!-- Musique NetEase Cloud -->
<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>

Améliorations des tableaux

Structures de tableaux complexes

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Produit</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Données de ventes</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Chiffre d'affaires total</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">T1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">T2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">Produit 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;">Produit 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>

Formulaires et éléments interactifs

Éléments de formulaire de base

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Name:</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;">Message:</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;">
    Submit
  </button>
</form>

Éléments interactifs

<!-- Contenu collapsible -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Click to expand for more details</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>This is the detailed content inside the collapsible section.</p>
    <p>You can include any HTML content here.</p>
  </div>
</details>

<!-- Barre de progression -->
<div style="margin: 1rem 0;">
  <label>Project Progress:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Étoile de notation -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Rendu obtenu :

Click to expand for more details

This is the detailed content inside the collapsible section.

You can include any HTML content here.

Project Progress:32%32%

★★★★☆

Mise en page et style

Mise en page Flexbox

<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;">Title</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">This is a description text</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Action
    </button>
  </div>
</div>

<!-- Layout de carte -->
<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>Card content description</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 2</h5>
    <p>Card content description</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Card 3</h5>
    <p>Card content description</p>
  </div>
</div>

Mise en page en grille

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

Alertes et avertissements

Différents types d'alertes

<!-- Alerte d'info -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Info:</strong> This is an info alert box.
</div>

<!-- Alerte de succès -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Success:</strong> The operation was completed successfully.
</div>

<!-- Avertissement d'avertissement -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Warning:</strong> Please pay attention to this important notice.
</div>

<!-- Alerte d'erreur -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Error:</strong> An error has occurred.
</div>

Rendu obtenu :

💡 Info: This is an info alert box.

✅ Success: The operation was completed successfully.

⚠️ Warning: Please pay attention to this important notice.

❌ Error: An error has occurred.

Intégration de contenu tiers

Médias sociaux

<!-- Embed Twitter -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">This is a tweet content...</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>

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

Services en ligne

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

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

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

Composants personnalisés

Tags et badges

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

Rendu obtenu :

Frontend React JavaScript

Timeline

<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;">December 2023</h5>
    <p style="margin: 0;">Project started, requirements analysis and technology selection completed.</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;">January 2024</h5>
    <p style="margin: 0;">Core features developed, entered testing phase.</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;">February 2024</h5>
    <p style="margin: 0;">Project launched and started promotion.</p>
  </div>
</div>

Notes et limitations

Sécurité HTML

<!-- ✅ HTML sûr -->
<div style="color: blue;">Style sûr</div>
<strong>Texte en gras</strong>
<em>Texte en italique</em>

<!-- ❌ Contenu potentiellement filtré -->
<script>alert('Script non sûr')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Compatibilité du parseur Markdown

Différents parseurs Markdown ont des niveaux de support HTML variés :

Parser	Support HTML	Limitations
GitHub	Partiel	Scripts et balises dangereuses filtrés
GitLab	Partiel	Filtrage de sécurité
VitePress	Complet	Dépend de la configuration
Jekyll	Complet	Configurable
Hugo	Partiel	Doit être activé

Recommandations de meilleures pratiques

✅ Recommandé :
1. Utiliser des balises HTML sémantiques
2. Ajouter des améliorations de style appropriées
3. Assurer l'accessibilité du contenu
4. Garder le code propre et maintenable

❌ Éviter :
1. Surutiliser les balises HTML complexes
2. Intégrer des scripts non sûrs
3. Ignorer l'adaptation mobile
4. Utiliser des balises obsolètes

Scénarios pratiques

1. Documentation de produit

<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;">🚀 Product Features</h2>
    <p style="margin: 0; opacity: 0.9;">Experience our brand new features and improvements</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);">
      Learn More
    </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;">⚡ High Performance</h4>
    <p style="color: #666; line-height: 1.6;">Optimized algorithms and architecture for ultimate performance.</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;">🔒 Secure and Reliable</h4>
    <p style="color: #666; line-height: 1.6;">Enterprise-grade security, encrypted data transmission and storage.</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;">🎨 Easy to Use</h4>
    <p style="color: #666; line-height: 1.6;">Intuitive user interface and streamlined workflow.</p>
  </div>
  
</div>

2. Documentation API

<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;">Create User</h4>
  <p style="color: #6c757d; margin: 0;">Create a new user account</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Request Parameters
  </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;">Parameter</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Type</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Required</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Description</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;">User name</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;">Email address</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Introduction de l'équipe

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Our 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;">Focuses on React and Vue development, passionate about 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;">Proficient in Node.js and Python, focused on system architecture design.</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>

Syntaxes liées

• Vue d'ensemble de la syntaxe de base - Markdown de base
• Syntaxe étendue - Extensions Markdown
• Meilleures pratiques - Recommandations d'écriture

Outils et ressources

Frameworks HTML/CSS

• Bootstrap : Prototypage rapide et conception responsive
• Tailwind CSS : Framework CSS utilitaire-first
• Bulma : Framework CSS moderne
• Foundation : Framework front-end réactif

Outils en ligne

• CodePen : Éditeur HTML/CSS/JS en ligne
• JSFiddle : Test de snippets de code
• CSS Grid Generator : Générateur de grille CSS
• Flexbox Froggy : Jeu d'apprentissage Flexbox

Outils de développement de navigateur

• Chrome DevTools : Inspection d'éléments et débogage des styles
• Firefox Developer Tools : Débogage de grille et Flexbox
• Safari Web Inspector : Débogage macOS/iOS
• Edge DevTools : Vérification de l'accessibilité

Rappelez-vous, bien que l'intégration HTML soit puissante, utilisez-la avec modération pour garder votre documentation lisible et maintenable.