Markdown vs HTML: Nên Dùng Cái Nào cho Nội dung?
Trả lời nhanh
Dùng Markdown cho nội dung prose-heavy (README, docs, blog post, chat) nơi khả năng đọc nguồn quan trọng. Dùng HTML khi cần layout chính xác, element tương tác hoặc semantic tag Markdown thiếu. Dùng Markdown Preview để render Markdown sang HTML live.
Giới thiệu
Markdown là ngôn ngữ markup nhẹ map đến một subset nhỏ của HTML. HTML là ngôn ngữ markup đầy đủ tính năng của web. Markdown ưu tiên nguồn đọc được chuyển sang HTML; HTML ưu tiên kiểm soát chính xác output render. Chúng không phải đối thủ mà là công cụ ở mức abstraction khác —và hầu hết Markdown renderer output HTML.
Từng bước một
-
So sánh khả năng đọc nguồn
Nguồn đánh dấu gần với văn bản thuần túy: **đậm**, *nghiêng*, # tiêu đề, - mục danh sách. Nguồn HTML dài dòng: <strong>in đậm</strong>, <em>in nghiêng</em>, <h1>tiêu đề</h1>, <ul><li>...</li></ul>. Đối với văn xuôi, Markdown dễ đọc và chỉnh sửa hơn nhiều trong trình soạn thảo văn bản thuần túy.
-
So sánh tính biểu cảm
Đánh dấu bao gồm ~20% HTML: tiêu đề, đoạn văn, danh sách, điểm nhấn, liên kết, hình ảnh, khối mã, trích dẫn khối. HTML bao phủ 100%: biểu mẫu, bảng có rowpan/colspan, thẻ ngữ nghĩa (<article>, <nav>, <aside>), thuộc tính dữ liệu, SVG được nhúng, tập lệnh. Khi bạn cần những gì Markdown thiếu, bạn có thể chuyển sang HTML nội tuyến hoặc chuyển hoàn toàn sang HTML.
-
So sánh đường cong học tập
Cú pháp đánh dấu phù hợp trên một trang và có thể học trong 10 phút. HTML có ~140 phần tử, thuộc tính và mô hình DOM — một đường cong dốc hơn nhưng vẫn có thể truy cập được. Đối với những người viết không chuyên về kỹ thuật (Thủ tướng, nhà tiếp thị, nhân viên hỗ trợ), Markdown là chiến thắng rõ ràng.
-
So sánh kết xuất và tính di động
Đánh dấu phải được hiển thị ở HTML (hoặc định dạng khác) để hiển thị trong trình duyệt — việc hiển thị được thực hiện bởi các thư viện như được đánh dấu, nhận xét hoặc CommonMark. HTML hiển thị trực tiếp trong bất kỳ trình duyệt nào mà không cần bước xây dựng. Markdown có thể di chuyển sang nhiều định dạng đầu ra (HTML, PDF, EPUB, docx); HTML chỉ dành cho web mà không cần chuyển đổi.
-
Quyết định dựa trên trường hợp sử dụng của bạn
Tài liệu, README, trò chuyện, nhận xét, bài đăng trên blog: Markdown. Trang tiếp thị, giao diện người dùng tương tác, mẫu email, bảng phức tạp, cấu trúc ngữ nghĩa: HTML. Nhiều hệ thống (GitHub, Notion, trình tạo trang tĩnh) chấp nhận Markdown với HTML được nhúng để mang lại lợi ích tốt nhất cho cả hai.
Ví dụ
In đậm và in nghiêng
đầu vào: Markdown: **bold** and *italic* | HTML: <strong>bold</strong> and <em>italic</em>
đầu ra: Cả hai đều hiển thị dưới dạng: in đậm và in nghiêng
Tiêu đề có liên kết
đầu vào: Markdown: ## [FreeOnlineTools](https://freeonlinetoolsgo.com) | HTML: <h2><a href="https://freeonlinetoolsgo.com">FreeOnlineTools</a></h2>
đầu ra: Both render as an <h2> containing a clickable link to freeonlinetoolsgo.com
Một bảng —Markdown so với HTML
đầu vào: Markdown: | A | B |\n|---|---|\n| 1 | 2 | | HTML: <table><tr><th>A</th><th>B</th></tr><tr><td>1</td><td>2</td></tr></table>
đầu ra: Cả hai đều hiển thị bảng 2x2. HTML là bắt buộc đối với các ô colspan, rowpan hoặc được tạo kiểu.
Điều gì đó Markdown không thể thực hiện được — nhập biểu mẫu
đầu vào: HTML: <input type="email" placeholder="you@example.com">
đầu ra: Markdown không có cú pháp cho điều khiển biểu mẫu —bạn phải sử dụng HTML nội tuyến hoặc chuyển hoàn toàn sang HTML.
Các vấn đề thường gặp
- Phân mảnh phương ngữ Markdown: CommonMark, GFM, MultiMarkdown và MDX khác nhau về bảng, chú thích cuối trang, danh sách nhiệm vụ và phép toán. Chọn một phương ngữ và một trình kết xuất hỗ trợ nó một cách rõ ràng để tránh những khác biệt về kết xuất bất ngờ.
- XSS qua HTML nội tuyến trong Markdown: hầu hết các trình kết xuất đều cho phép HTML thô theo mặc định, do đó Markdown do người dùng cung cấp có thể chèn <script>. Định cấu hình trình kết xuất để vệ sinh (ví dụ: DOMPurify) hoặc tắt HTML thô đối với dữ liệu đầu vào không đáng tin cậy.
- Độ nhạy khoảng trắng: Markdown thu gọn các dòng liền kề thành một đoạn trừ khi được phân tách bằng một dòng trống và thụt lề các khối mã bằng 4 dấu cách. Sao chép dán từ trình soạn thảo phong phú thường làm mất các dòng trống và phá vỡ cấu trúc.
- Không có cấu trúc ngữ nghĩa: ## của Markdown là <h2> nhưng không truyền tải ngữ nghĩa vượt quá cấp độ. Để có thể truy cập điều hướng (<nav>), bài viết (<article>) và phần phụ (<aside>), bạn cần có trình bao bọc HTML xung quanh đầu ra Markdown.
Mẹo
- Sử dụng Markdown cho phần nội dung tài liệu và HTML cho phần vỏ trang — hầu hết các trình tạo trang tĩnh (Astro, Eleventy, Next) đều hỗ trợ sự phân chia này một cách nguyên bản.
- Khi cho phép người dùng nhập Markdown, hãy luôn vệ sinh HTML được hiển thị bằng DOMPurify để loại bỏ các thuộc tính <script>, on* và javascript: URLs —không bao giờ tin tưởng vào lối thoát mặc định của trình kết xuất.
- Sử dụng Bản xem trước Markdown của chúng tôi để biết chính xác cách trình kết xuất chuyển đổi Markdown của bạn thành HTML trước khi đưa nó vào README hoặc tài liệu.
- Đối với các bảng phức tạp (colspan, chú thích, tiêu đề được tạo kiểu), hãy viết chúng vào HTML và nhúng vào Markdown —hầu hết các trình kết xuất đều chuyển nội tuyến HTML đến không thay đổi.