Thẻ pre trong HTML

• Bùi Tấn Lực
• 1091
• 29/09/2025

Chức năng của Thẻ pre trong HTML

Thẻ pre trong HTML giữ nguyên khoảng trắng, giữ nguyên ngắt dòng giống như những gì bạn viết khi xuất ra kết quả, nó sử dụng font mặc định monospace và mọi ký tự đều có cùng chiều rộng, rất thích hợp để hiển thị các đoạn mã, dữ liệu được định dạng sẵn, hoặc bất kỳ nội dung nào cần giữ nguyên định dạng chính xác.

Cú pháp của Thẻ pre trong HTML

<pre>vanbangiudinhdang</pre>

vanbangiudinhdang: Văn bản mã code cần giữ nguyên định dạng.

Code Thẻ pre trong HTML

<pre>
Hãy Chạy thử
Code Thẻ pre trong HTML,
Web Mới cung cấp công cụ
giúp bạn chạy trực tiếp
code và xem kết quả
</pre>

Chạy Thử

Khi nào nên và không nên sử dụng thẻ pre trong HTML?

Thẻ pre phát huy hiệu quả khi cần hiển thị nội dung giữ nguyên định dạng gốc. Tuy nhiên, không phải trường hợp nào cũng phù hợp để sử dụng. Hiểu rõ thời điểm nên và không nên dùng sẽ giúp trang web hiển thị chuyên nghiệp hơn, đồng thời đảm bảo khả năng đọc và trải nghiệm của người dùng.

Những trường hợp nên sử dụng thẻ pre

Thẻ pre phù hợp trong các tình huống mà khoảng trắng, tab hoặc xuống dòng đều mang ý nghĩa đối với nội dung. Một số trường hợp phổ biến gồm:

• Hiển thị đoạn mã lập trình để giữ nguyên cấu trúc.
• Trình bày nội dung được căn lề bằng khoảng trắng.
• Hiển thị kết quả đầu ra từ Terminal hoặc Command Prompt.
• Đăng tải tập tin cấu hình có yêu cầu giữ nguyên định dạng.
• Hiển thị sơ đồ hoặc ký tự ASCII được tạo bằng văn bản.

Việc sử dụng đúng ngữ cảnh giúp người xem dễ theo dõi nội dung mà không cần tự đoán cấu trúc ban đầu.

Khi nào nên dùng thẻ code thay vì chỉ dùng thẻ pre

Thẻ pre có nhiệm vụ giữ nguyên cách trình bày, trong khi code dùng để xác định nội dung là mã nguồn. Khi hiển thị đoạn chương trình, nên kết hợp cả hai để vừa bảo toàn định dạng vừa thể hiện đúng ngữ nghĩa HTML.

Ví dụ:

<pre>
    <code>
<?php
echo "Xin chào";
?>
    </code>
</pre>

Cách kết hợp này giúp trình duyệt, công cụ hỗ trợ đọc màn hình và các hệ thống tô màu cú pháp nhận biết chính xác đây là đoạn mã lập trình.

Các trường hợp không nên lạm dụng thẻ pre

Không nên dùng thẻ pre chỉ để tạo khoảng cách hoặc căn chỉnh bố cục. Điều này khiến nội dung khó thích ứng trên nhiều kích thước màn hình và gây khó khăn khi bảo trì.

• Không dùng để tạo khoảng trắng thay cho CSS.
• Không sử dụng cho các đoạn văn bản thông thường.
• Không trình bày toàn bộ nội dung bài viết bằng thẻ pre.
• Không căn lề giao diện bằng dấu cách hoặc tab.
• Không thay thế các thẻ HTML có ý nghĩa ngữ nghĩa khác.

Chỉ nên sử dụng thẻ pre khi việc giữ nguyên định dạng là yêu cầu bắt buộc của nội dung. Điều này giúp mã HTML rõ ràng, dễ bảo trì và đảm bảo trải nghiệm hiển thị trên nhiều thiết bị.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ pre trong HTML.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thẻ pre trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp