Nhúng HTML

Một đặc điểm mạnh của Markdown là có thể nhúng trực tiếp mã HTML, giúp tài liệu có khả năng trình bày và mở rộng tính năng phong phú hơn.

Nhúng HTML cơ bản

Phần tử HTML nội tuyến

Có thể sử dụng thẻ HTML trực tiếp trong Markdown:

markdown

Đây là một đoạn chứa <strong>chữ đậm</strong> và <em>chữ nghiêng</em>.

Bạn có thể dùng <code>mã nội tuyến</code> hoặc <mark>bôi nổi bật</mark>.

Có một <a href="https://www.markdownlang.com" target="_blank">liên kết ngoài</a>.

Kết quả hiển thị:

Đây là một đoạn chứa chữ đậm và chữ nghiêng.

Bạn có thể dùng mã nội tuyến hoặc bôi nổi bật.

Có một liên kết ngoài.

Phần tử HTML cấp khối

markdown

<div class="alert alert-info">
  <h4>Thông tin</h4>
  <p>Đây là một hộp thông tin được tạo bằng HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>Đây là một khối trích dẫn với kiểu tùy chỉnh.</p>
  <footer>—— Nguồn trích dẫn</footer>
</blockquote>

Kết quả hiển thị:

Thông tin

Đây là một hộp thông tin được tạo bằng HTML.

Đây là một khối trích dẫn với kiểu tùy chỉnh.
—— Nguồn trích dẫn

Tăng cường HTML thường dùng

Nâng cao cho hình ảnh

Điều khiển kích thước hình ảnh

markdown

<!-- Dùng HTML để kiểm soát kích thước chính xác -->
<img src="example.jpg" alt="Hình minh họa" width="300" height="200">

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

<!-- Căn chỉnh hình ảnh -->
<div align="center">
  <img src="example.jpg" alt="Hình căn giữa" width="400">
</div>

Trình bày nhóm hình ảnh

markdown

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

<!-- Lưới hình ảnh -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="Hình 1" style="width: 100%;">
  <img src="img2.jpg" alt="Hình 2" style="width: 100%;">
  <img src="img3.jpg" alt="Hình 3" style="width: 100%;">
  <img src="img4.jpg" alt="Hình 4" style="width: 100%;">
</div>

Nhúng video và media

Nhúng 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>

Nhúng âm thanh

markdown

<!-- Âm thanh 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>

Tăng cường bảng

Cấu trúc bảng phức tạp

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Sản phẩm</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">Doanh số</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">Tổng doanh thu</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;">Sản phẩm 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;">Sản phẩm 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>

Kết quả hiển thị:

Sản phẩm	Doanh số		Tổng doanh thu
Sản phẩm	Q1	Q2	Tổng doanh thu
Sản phẩm A	¥100,000	¥120,000	¥220,000
Sản phẩm B	¥80,000	¥90,000	¥170,000

Biểu mẫu và phần tử tương tác

Phần tử biểu mẫu cơ bản

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">Họ tên:</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;">Tin nhắn:</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;">
    Gửi
  </button>
</form>

Phần tử tương tác

markdown

<!-- Nội dung có thể thu gọn -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">Nhấp để mở rộng chi tiết</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>Đây là nội dung chi tiết đã được thu gọn.</p>
    <p>Có thể chứa bất kỳ nội dung HTML nào.</p>
  </div>
</details>

<!-- Thanh tiến trình -->
<div style="margin: 1rem 0;">
  <label>Tiến độ dự án:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- Đánh giá sao -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

Kết quả hiển thị:

Nhấp để mở rộng chi tiết

Đây là nội dung chi tiết đã được thu gọn.

Có thể chứa bất kỳ nội dung HTML nào.

Tiến độ dự án:32%32%

★★★★☆

Bố cục và kiểu dáng

Bố cục 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;">Tiêu đề</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">Đây là văn bản mô tả</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      Thao tác
    </button>
  </div>
</div>

<!-- Bố cục thẻ (card) -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Thẻ 1</h5>
    <p>Mô tả nội dung thẻ</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Thẻ 2</h5>
    <p>Mô tả nội dung thẻ</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>Thẻ 3</h5>
    <p>Mô tả nội dung thẻ</p>
  </div>
</div>

Bố cục 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>Tính năng 1</h6>
    <p>Mô tả tính năng</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>Tính năng 2</h6>
    <p>Mô tả tính năng</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>Tính năng 3</h6>
    <p>Mô tả tính năng</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>Tính năng 4</h6>
    <p>Mô tả tính năng</p>
  </div>
</div>

Hộp nhắc và cảnh báo

Các loại hộp thông báo

markdown

<!-- Thông tin -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 Thông tin:</strong> Đây là một hộp thông báo.
</div>

<!-- Thành công -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ Thành công:</strong> Thao tác đã hoàn tất thành công.
</div>

<!-- Cảnh báo -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ Cảnh báo:</strong> Vui lòng chú ý thông tin quan trọng này.
</div>

<!-- Lỗi -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ Lỗi:</strong> Đã xảy ra lỗi.
</div>

Kết quả hiển thị:

💡 Thông tin: Đây là một hộp thông báo.

✅ Thành công: Thao tác đã hoàn tất thành công.

⚠️ Cảnh báo: Vui lòng chú ý thông tin quan trọng này.

❌ Lỗi: Đã xảy ra lỗi.

Nhúng nội dung bên thứ ba

Mạng xã hội

markdown

<!-- Nhúng Twitter -->
<blockquote class="twitter-tweet">
  <p lang="zh" dir="ltr">Đây là một nội dung tweet...</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>

<!-- Nhúng 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>

Dịch vụ trực tuyến

markdown

<!-- Nhúng 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>

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

<!-- Nhúng 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>

Thành phần tùy chỉnh

Nhãn và huy hiệu

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>

Kết quả hiển thị:

Frontend React JavaScript

Dòng thời gian (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;">12/2023</h5>
    <p style="margin: 0;">Khởi động dự án, hoàn thành phân tích yêu cầu và lựa chọn công nghệ.</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;">01/2024</h5>
    <p style="margin: 0;">Hoàn thành phát triển chức năng cốt lõi, chuyển sang giai đoạn kiểm thử.</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;">02/2024</h5>
    <p style="margin: 0;">Triển khai sản phẩm lên môi trường, bắt đầu vận hành và quảng bá.</p>
  </div>
</div>

Lưu ý và giới hạn

Bảo mật HTML

markdown

<!-- ✅ HTML an toàn -->
<div style="color: blue;">Kiểu an toàn</div>
<strong>Văn bản đậm</strong>
<em>Văn bản nghiêng</em>

<!-- ❌ Nội dung có thể bị lọc bỏ -->
<script>alert('script không an toàn')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

Tương thích giữa các bộ phân tích Markdown

Các bộ xử lý Markdown hỗ trợ HTML ở mức độ khác nhau:

Trình phân tích	Hỗ trợ HTML	Giới hạn
GitHub	Hỗ trợ một phần	Lọc script và thẻ nguy hiểm
GitLab	Hỗ trợ một phần	Lọc bảo mật
VitePress	Hỗ trợ đầy đủ	Phụ thuộc cấu hình
Jekyll	Hỗ trợ đầy đủ	Có thể cấu hình
Hugo	Hỗ trợ một phần	Cần bật tính năng

Khuyến nghị thực hành tốt

markdown

✅ Nên làm:
1. Dùng thẻ HTML mang tính ngữ nghĩa
2. Bổ sung kiểu dáng ở mức hợp lý
3. Đảm bảo khả năng truy cập nội dung
4. Giữ mã gọn gàng và dễ bảo trì

❌ Tránh:
1. Lạm dụng HTML phức tạp
2. Nhúng script không an toàn
3. Bỏ qua hỗ trợ thiết bị di động
4. Dùng thẻ đã bị loại bỏ

Tình huống áp dụng thực tế

1. Tài liệu sản phẩm

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;">🚀 Tính năng sản phẩm</h2>
    <p style="margin: 0; opacity: 0.9;">Trải nghiệm các tính năng và cải tiến mới của chúng tôi</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);">
      Tìm hiểu thêm
    </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;">⚡ Hiệu năng cao</h4>
    <p style="color: #666; line-height: 1.6;">Thuật toán và kiến trúc tối ưu cho trải nghiệm hiệu năng vượt trội.</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;">🔒 An toàn và tin cậy</h4>
    <p style="color: #666; line-height: 1.6;">Bảo mật cấp doanh nghiệp, mã hóa dữ liệu khi truyền và lưu trữ.</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;">🎨 Dễ sử dụng</h4>
    <p style="color: #666; line-height: 1.6;">Giao diện trực quan, quy trình thao tác đơn giản.</p>
  </div>
  
</div>

2. Tài liệu 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;">Tạo người dùng</h4>
  <p style="color: #6c757d; margin: 0;">Tạo một tài khoản người dùng mới</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 Tham số yêu cầu
  </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;">Tham số</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Kiểu</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Bắt buộc</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">Mô tả</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;">Tên người dùng</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;">Địa chỉ email</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3. Giới thiệu đội ngũ

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 Đội ngũ của chúng tôi</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;">Kỹ sư frontend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Tập trung vào phát triển React và Vue, đam mê thiết kế 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="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;">Kỹ sư backend</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">Thành thạo Node.js và Python, tập trung thiết kế kiến trúc hệ thống.</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>

Cú pháp liên quan

Tổng quan cú pháp cơ bản - Nền tảng Markdown
Cú pháp mở rộng - Tính năng mở rộng Markdown
Thực hành tốt nhất - Gợi ý soạn tài liệu

Công cụ và tài nguyên

Khung HTML/CSS

Bootstrap: Dựng mẫu nhanh và thiết kế responsive
Tailwind CSS: CSS ưu tiên tiện ích (utility-first)
Bulma: Khung CSS hiện đại
Foundation: Khung frontend responsive

Công cụ trực tuyến

CodePen: Trình soạn HTML/CSS/JS trực tuyến
JSFiddle: Kiểm thử đoạn mã nhỏ
CSS Grid Generator: Trình tạo bố cục lưới CSS
Flexbox Froggy: Trò chơi học Flexbox

Công cụ phát triển trên trình duyệt

Chrome DevTools: Kiểm tra phần tử và gỡ lỗi kiểu
Firefox Developer Tools: Gỡ lỗi Grid và Flexbox
Safari Web Inspector: Gỡ lỗi trên macOS/iOS
Edge DevTools: Kiểm tra khả năng truy cập

Hãy nhớ: Nhúng HTML rất mạnh, nhưng nên dùng vừa phải để giữ tính dễ đọc và dễ bảo trì cho tài liệu.

Nhúng HTML ​

Nhúng HTML cơ bản ​

Phần tử HTML nội tuyến ​

Phần tử HTML cấp khối ​

Thông tin

Tăng cường HTML thường dùng ​

Nâng cao cho hình ảnh ​

Điều khiển kích thước hình ảnh ​

Trình bày nhóm hình ảnh ​

Nhúng video và media ​

Nhúng video ​

Nhúng âm thanh ​

Tăng cường bảng ​

Cấu trúc bảng phức tạp ​

Biểu mẫu và phần tử tương tác ​

Phần tử biểu mẫu cơ bản ​

Phần tử tương tác ​

Bố cục và kiểu dáng ​

Bố cục Flexbox ​

Bố cục Grid ​

Hộp nhắc và cảnh báo ​

Các loại hộp thông báo ​

Nhúng nội dung bên thứ ba ​

Mạng xã hội ​

Dịch vụ trực tuyến ​

Thành phần tùy chỉnh ​

Nhãn và huy hiệu ​

Dòng thời gian (timeline) ​

Lưu ý và giới hạn ​

Bảo mật HTML ​

Tương thích giữa các bộ phân tích Markdown ​

Khuyến nghị thực hành tốt ​

Tình huống áp dụng thực tế ​

1. Tài liệu sản phẩm ​

2. Tài liệu API ​

3. Giới thiệu đội ngũ ​

Cú pháp liên quan ​

Công cụ và tài nguyên ​

Khung HTML/CSS ​

Công cụ trực tuyến ​

Công cụ phát triển trên trình duyệt ​

Nhúng HTML

Nhúng HTML cơ bản

Phần tử HTML nội tuyến

Phần tử HTML cấp khối

Tăng cường HTML thường dùng

Nâng cao cho hình ảnh

Điều khiển kích thước hình ảnh

Trình bày nhóm hình ảnh

Nhúng video và media

Nhúng video

Nhúng âm thanh

Tăng cường bảng

Cấu trúc bảng phức tạp

Biểu mẫu và phần tử tương tác

Phần tử biểu mẫu cơ bản

Phần tử tương tác

Bố cục và kiểu dáng

Bố cục Flexbox

Bố cục Grid

Hộp nhắc và cảnh báo

Các loại hộp thông báo

Nhúng nội dung bên thứ ba

Mạng xã hội

Dịch vụ trực tuyến

Thành phần tùy chỉnh

Nhãn và huy hiệu

Dòng thời gian (timeline)

Lưu ý và giới hạn

Bảo mật HTML

Tương thích giữa các bộ phân tích Markdown

Khuyến nghị thực hành tốt

Tình huống áp dụng thực tế

1. Tài liệu sản phẩm

2. Tài liệu API

3. Giới thiệu đội ngũ

Cú pháp liên quan

Công cụ và tài nguyên

Khung HTML/CSS

Công cụ trực tuyến

Công cụ phát triển trên trình duyệt