Incrustar HTML

Una de las características más potentes de Markdown es la capacidad de incrustar código HTML directamente, proporcionando mayor expresividad y extensiones funcionales para tus documentos.

Incrustación Básica de HTML

Elementos HTML en Línea

Puedes usar etiquetas HTML directamente en Markdown:

Este es un párrafo con <strong>texto en negrita</strong> y <em>texto en cursiva</em>.

Puedes usar <code>código en línea</code> o <mark>texto resaltado</mark>.

Aquí hay un <a href="https://www.markdownlang.com" target="_blank">enlace externo</a>.

Visualización Renderizada:

Este es un párrafo con texto en negrita y texto en cursiva.

Puedes usar código en línea o texto resaltado.

Aquí hay un enlace externo.

Elementos HTML de Bloque

<div class="alert alert-info">
  <h4>Info</h4>
  <p>Esta es una caja de alerta informativa creada con HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Esta es una cita personalizada con estilo.</p>
  <footer>—— Fuente</footer>
</blockquote>

Visualización Renderizada:

Info

Esta es una caja de alerta informativa creada con HTML.

Esta es una cita personalizada con estilo.

—— Fuente

Mejoras Comunes con HTML

Mejoras de Imágenes

Control de Tamaño de Imagen

<!-- Usa HTML para controlar el tamaño de la imagen con precisión -->
<img src="ejemplo.jpg" alt="Imagen de ejemplo" width="300" height="200">

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

<!-- Alineación de imagen -->
<div align="center">
  <img src="ejemplo.jpg" alt="Imagen centrada" width="400">
</div>

Galería de Imágenes

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

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

Video y Medios Incrustados

Incrustación de Video

<!-- Video de 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 de 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">
  Tu navegador no soporta el elemento de video.
</video>

Incrustación de Audio

<!-- Audio HTML5 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</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>

Mejoras de Tablas

Estructuras de Tablas Complejas

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Producto</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Datos de Ventas</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Ingreso 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;">Producto 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;">Producto 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>

Visualización Renderizada:

Producto	Datos de Ventas		Ingreso Total
	Q1	Q2
Producto A	¥100,000	¥120,000	¥220,000
Producto B	¥80,000	¥90,000	¥170,000

Elementos Interactivos y Formularios

Elementos de Formulario Básicos

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

Elementos Interactivos

<!-- Contenido colapsable -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Haga clic para expandir para más detalles</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Este es el contenido detallado dentro de la sección colapsable.</p>
    <p>Puedes incluir cualquier contenido HTML aquí.</p>
  </div>
</details>

<!-- Barra de progreso -->
<div style="margin: 1rem 0;">
  <label>Progreso del Proyecto:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Calificación de estrellas -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Visualización Renderizada:

Haga clic para expandir para más detalles

Este es el contenido detallado dentro de la sección colapsable.

Puedes incluir cualquier contenido HTML aquí.

Progreso del Proyecto:32%32%

★★★★☆

Diseño y Estilos

Diseño 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;">Título</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Este es un texto de descripción</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Acción
    </button>
  </div>
</div>

<!-- Diseño de tarjeta -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 1</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 2</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Tarjeta 3</h5>
    <p>Descripción del contenido de la tarjeta</p>
  </div>
</div>

Diseño de Cuadrícula

<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>Característica 1</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Característica 2</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Característica 3</h6>
    <p>Descripción de la característica</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Característica 4</h6>
    <p>Descripción de la característica</p>
  </div>
</div>

Alertas y Advertencias

Diferentes Tipos de Alertas

<!-- Alerta de información -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Información:</strong> Esta es una caja de alerta de información.
</div>

<!-- Alerta de éxito -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Éxito:</strong> La operación se completó con éxito.
</div>

<!-- Alerta de advertencia -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Advertencia:</strong> Por favor, presta atención a esta importante advertencia.
</div>

<!-- Alerta de error -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Error:</strong> Se ha producido un error.
</div>

Visualización Renderizada:

💡 Información: Esta es una caja de alerta de información.

✅ Éxito: La operación se completó con éxito.

⚠️ Advertencia: Por favor, presta atención a esta importante advertencia.

❌ Error: Se ha producido un error.

Incrustación de Contenido de Terceros

Redes Sociales

<!-- Incrustación de Twitter -->
<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Este es el contenido de un tweet...</p>
  <a href="https://twitter.com/user/status/123456789">Enlace del Tweet</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Incrustación de 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>

Servicios en Línea

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

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

<!-- Incrustación de 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 y Medallas

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

Visualización Renderizada:

Frontend React JavaScript

Línea de Tiempo

<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;">Diciembre 2023</h5>
    <p style="margin: 0;">Inicio del proyecto, análisis de requisitos y selección de tecnología completados.</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;">Enero 2024</h5>
    <p style="margin: 0;">Características principales desarrolladas, fase de pruebas iniciada.</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;">Febrero 2024</h5>
    <p style="margin: 0;">Proyecto lanzado y promoción iniciada.</p>
  </div>
</div>

Notas y Limitaciones

Seguridad de HTML

<!-- ✅ HTML seguro -->
<div style="color: blue;">Estilo seguro</div>
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>

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

Compatibilidad del Parser de Markdown

Diferentes parsers de Markdown tienen diferentes niveles de soporte de HTML:

Parser	Soporte de HTML	Limitaciones
GitHub	Parcial	Scripts y etiquetas peligrosas filtradas
GitLab	Parcial	Filtrado de seguridad
VitePress	Completo	Depende de la configuración
Jekyll	Completo	Configurable
Hugo	Parcial	Necesita ser habilitado

Recomendaciones de Mejor Práctica

✅ Recomendado:
1. Usar etiquetas HTML semánticas
2. Añadir mejoras de estilo apropiadas
3. Garantizar la accesibilidad del contenido
4. Mantener el código limpio y mantenible

❌ Evitar:
1. Sobreexplotar HTML complejo
2. Incrustar scripts inseguros
3. Ignorar la adaptación móvil
4. Usar etiquetas obsoletas

Escenarios Prácticos

1. Documentación de Producto

<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;">🚀 Características del Producto</h2>
    <p style="margin: 0; opacity: 0.9;">Experimenta nuestras nuevas características y mejoras</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);">
      Aprender Más
    </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 Rendimiento</h4>
    <p style="color: #666; line-height: 1.6;">Algoritmos optimizados y arquitectura para el rendimiento máximo.</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 y Confiable</h4>
    <p style="color: #666; line-height: 1.6;">Seguridad empresarial, transmisión y almacenamiento de datos cifrados.</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;">Interfaz de usuario intuitiva y flujo de trabajo optimizado.</p>
  </div>
  
</div>

2. Documentación de 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;">Crear Usuario</h4>
  <p style="color: #6c757d; margin: 0;">Crear una nueva cuenta de usuario</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Parámetros de Solicitud
  </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;">Requerido</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Descripción</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;">Nombre de usuario</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;">Dirección de correo electrónico</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Introducción a la Equipo

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Nuestro Equipo</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;">Ingeniero Frontend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Se centra en el desarrollo de React y Vue, apasionado por el diseño de la experiencia del usuario.</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;">Ingeniero Backend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Proficiente en Node.js y Python, enfocado en el diseño de arquitectura de sistemas.</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>

Sintaxis Relacionada

• Resumen de Sintaxis Básica - Conceptos Básicos de Markdown
• Sintaxis Extendida - Extensiones de Markdown
• Mejores Prácticas - Recomendaciones de Escritura