การฝัง HTML

หนึ่งในจุดแข็งของ Markdown คือสามารถฝังโค้ด HTML ได้โดยตรง ช่วยเพิ่มพลังการแสดงผลและความสามารถในการขยายเอกสารให้ยืดหยุ่นมากขึ้น

การฝัง HTML พื้นฐาน

องค์ประกอบแบบอินไลน์ (Inline)

คุณสามารถใช้แท็ก HTML ภายใน Markdown ได้ทันที เช่น:

นี่คือย่อหน้าที่มี <strong>ตัวหนา</strong> และ <em>ตัวเอียง</em>

คุณยังใช้ <code>โค้ดในบรรทัด</code> หรือ <mark>ไฮไลต์</mark> ได้

นี่คือลิงก์ภายนอก <a href="https://www.markdownlang.com" target="_blank">ไปยัง MarkdownLang</a>

องค์ประกอบแบบบล็อก (Block)

<div class="alert alert-info">
  <h4>ข้อมูล</h4>
  <p>นี่คือตัวอย่างกล่องแจ้งเตือนที่สร้างด้วย HTML</p>
  
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>นี่คือบล็อกอ้างอิงที่กำหนดสไตล์เอง</p>
  <footer>—— แหล่งที่มา</footer>
</blockquote>

การเสริมพลังรูปภาพ

ควบคุมขนาดรูป

<!-- ควบคุมขนาดอย่างแม่นยำด้วย HTML -->
<img src="example.jpg" alt="รูปตัวอย่าง" width="300" height="200">

<!-- รูปแบบตอบสนอง -->
<img src="example.jpg" alt="รูปตอบสนอง" style="max-width: 100%; height: auto;">

<!-- จัดกึ่งกลาง -->
<div align="center">
  <img src="example.jpg" alt="รูปกึ่งกลาง" width="400">
</div>

การจัดวางรูปหลายรูป

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

<!-- แบบตาราง (Grid) -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="รูป 1" style="width: 100%;">
  <img src="img2.jpg" alt="รูป 2" style="width: 100%;">
  <img src="img3.jpg" alt="รูป 3" style="width: 100%;">
  <img src="img4.jpg" alt="รูป 4" style="width: 100%;">
</div>

วิดีโอและสื่อ

ฝังวิดีโอ

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

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

ฝังเสียง

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

ตารางขั้นสูง

โครงสร้างตารางที่ซับซ้อน

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">สินค้า</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">ยอดขาย</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">รายรับรวม</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;">Product 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>
  </tbody>
</table>

องค์ประกอบโต้ตอบและฟอร์ม

<!-- เนื้อหาพับเก็บได้ -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">คลิกเพื่อดูรายละเอียด</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>นี่คือเนื้อหารายละเอียดที่ถูกพับเก็บ</p>
  </div>
</details>

<!-- แถบความคืบหน้า -->
<div style="margin: 1rem 0;">
  <label>ความคืบหน้า:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

เค้าโครงและสไตล์

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;">หัวเรื่อง</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">ข้อความอธิบาย</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      ดำเนินการ
    </button>
  </div>
</div>

Grid

<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>ฟีเจอร์ 1</h6>
    <p>รายละเอียด</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>ฟีเจอร์ 2</h6>
    <p>รายละเอียด</p>
  </div>
</div>

ความปลอดภัยและความเข้ากันได้

• สคริปต์และแท็กที่อันตรายอาจถูกตัวประมวลผล Markdown บางตัว “กรองทิ้ง” เพื่อความปลอดภัย
• ระดับการรองรับ HTML แตกต่างกันไปตามแพลตฟอร์ม (เช่น GitHub, VitePress, Jekyll)

สถานการณ์ใช้งานจริง

บล็อกสินค้า/ฟีเจอร์

<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;">🚀 ฟีเจอร์เด่น</h2>
    <p style="margin: 0; opacity: 0.9;">สัมผัสประสบการณ์ใหม่ที่ทรงพลัง</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);">
      อ่านเพิ่มเติม
    </button>
  </div>
</div>

ไวยากรณ์ที่เกี่ยวข้อง

• ภาพรวมไวยากรณ์พื้นฐาน
• ไวยากรณ์ขยาย
• แนวปฏิบัติที่ดีที่สุด