Thẻ pre trong HTML: Giữ nguyên định dạng & Hiển thị code

Bạn đã bao giờ cặm cụi gõ một đoạn thơ hay một khối code, rồi dán vào HTML và thấy mọi định dạng bay biến mất chưa? Đó là lúc thẻ pre trong html trở thành vị cứu tinh. Thẻ này giúp bạn giữ nguyên từng khoảng trắng và dấu xuống dòng, y hệt như bản gốc. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu chi tiết cách dùng thẻ <pre> để trình bày nội dung một cách hoàn hảo và chuyên nghiệp.

Tổng quan về thẻ pre trong HTML

Khi làm việc với HTML, bạn sẽ sớm nhận ra rằng trình duyệt có xu hướng “tự ý” dọn dẹp văn bản của bạn. Nó loại bỏ các khoảng trắng thừa và bỏ qua các lần xuống dòng. Nhưng nếu bạn muốn hiển thị chính xác những gì bạn đã gõ thì sao? Đây chính là lúc thẻ <pre> xuất hiện.

Thẻ pre trong HTML là gì?

Thẻ <pre> là viết tắt của Preformatted Text (văn bản được định dạng trước). Đúng như tên gọi, nội dung đặt bên trong cặp thẻ <pre>...</pre> sẽ được trình duyệt hiển thị chính xác như cách bạn đã gõ trong trình soạn thảo mã nguồn.

Nó tôn trọng mọi thứ:

• Từng khoảng trắng.
• Từng dấu tab.
• Từng dấu ngắt dòng.

Nói một cách đơn giản, thẻ <pre> nói với trình duyệt rằng: “Đừng dọn dẹp gì cả, hãy hiển thị nội dung này y như bản gốc!”

Tại sao chúng ta cần thẻ pre?

Mục đích chính của thẻ <pre> là để bảo toàn định dạng của một khối văn bản. Các thẻ văn bản thông thường như <p> (đoạn văn) hay <h1> (tiêu đề) được thiết kế để trình duyệt tự động định dạng luồng nội dung. Chúng sẽ bỏ qua các khoảng trắng và ngắt dòng thừa để văn bản hiển thị gọn gàng.

Tuy nhiên, trong nhiều trường hợp, việc giữ nguyên định dạng lại cực kỳ quan trọng. Ví dụ điển hình nhất là khi bạn muốn hiển thị code trong html. Các thụt đầu dòng và ngắt dòng trong code không phải là thừa, chúng giúp mã nguồn dễ đọc và dễ hiểu hơn. Nếu không có thẻ <pre>, một đoạn code được định dạng đẹp đẽ sẽ trở thành một mớ hỗn độn khó đọc.

Tác dụng chính của thẻ pre

Sức mạnh thực sự của thẻ <pre> nằm ở khả năng bảo toàn định dạng một cách tuyệt đối. Hãy cùng WiWeb phân tích sâu hơn về hai yếu tố quan trọng nhất mà nó giữ lại.

Giữ nguyên tất cả khoảng trắng (spaces) và tab

Trong HTML thông thường, dù bạn gõ một hay mười khoảng trắng liên tiếp, trình duyệt cũng chỉ hiển thị một khoảng trắng duy nhất. Thẻ <pre> phá vỡ quy tắc này. Nếu bạn gõ 5 khoảng trắng, nó sẽ hiển thị đúng 5 khoảng trắng. Điều này rất quan trọng khi bạn cần căn chỉnh văn bản theo cột hoặc hiển thị các cấu trúc có thụt đầu dòng.

Giữ nguyên các dấu ngắt dòng (line breaks)

Tương tự như khoảng trắng, nếu bạn nhấn Enter nhiều lần trong thẻ <p>, trình duyệt cũng sẽ không tạo ra các dòng trống. Nhưng với thẻ <pre>, mỗi lần bạn nhấn Enter để tạo một dòng mới, nó sẽ được giữ lại y nguyên. Đây là tính năng không thể thiếu khi trình bày thơ, lời bài hát, hoặc các đoạn code nhiều dòng.

Sự khác biệt giữa thẻ pre và thẻ p

Để thấy rõ sự khác biệt, không gì tốt hơn một ví dụ trực quan. Hãy xem cùng một nội dung được đặt trong thẻ <p> và thẻ <pre> sẽ trông như thế nào.

Mã HTML:

<p>
    HTML là ngôn ngữ đánh dấu siêu văn bản.
        Nó được sử dụng để tạo ra
    các trang web.
</p>

<pre>
    HTML là ngôn ngữ đánh dấu siêu văn bản.
        Nó được sử dụng để tạo ra
    các trang web.
</pre>

Kết quả hiển thị trên trình duyệt:

• Với thẻ <p>:
  HTML là ngôn ngữ đánh dấu siêu văn bản. Nó được sử dụng để tạo ra các trang web.
• Với thẻ <pre>:
  HTML là ngôn ngữ đánh dấu siêu văn bản.
  Nó được sử dụng để tạo ra
  các trang web.

Bạn thấy không? Thẻ <p> đã “dọn dẹp” mọi thứ thành một dòng duy nhất. Trong khi đó, thẻ <pre> đã giữ nguyên định dạng html một cách hoàn hảo, bao gồm cả các khoảng trắng thụt vào ở đầu dòng.

Hướng dẫn cách dùng thẻ pre (Cú pháp & Ví dụ)

Bây giờ bạn đã hiểu sức mạnh của thẻ <pre>, hãy cùng tìm hiểu cách dùng thẻ pre trong html. Tin vui là nó cực kỳ đơn giản!

Cú pháp cơ bản

Cú pháp của thẻ <pre> rất dễ nhớ. Bạn chỉ cần đặt nội dung cần giữ định dạng vào giữa cặp thẻ mở <pre> và thẻ đóng </pre>.

<pre>
Nội dung của bạn ở đây.
    Với tất cả khoảng trắng

và dấu xuống dòng được giữ lại.
</pre>

Thế thôi! Rất đơn giản phải không nào? Giờ hãy xem một vài ví dụ thực tế nhé.

Ví dụ 1: Hiển thị một bài thơ với định dạng gốc

Thơ ca là một trường hợp hoàn hảo để sử dụng thẻ <pre>. Việc ngắt dòng và căn lề trong thơ mang ý nghĩa nghệ thuật, và chúng ta chắc chắn không muốn trình duyệt làm hỏng nó.

<pre>
Sóng bắt đầu từ gió,
Gió bắt đầu từ đâu?
Em cũng không biết nữa
Khi nào ta yêu nhau.

- Xuân Quỳnh
</pre>

Kết quả sẽ là một đoạn thơ được trình bày đẹp mắt, đúng với ý đồ của tác giả.

Ví dụ 2: Trình bày nghệ thuật ASCII (ASCII Art)

Nghệ thuật ASCII là những hình ảnh được tạo ra từ các ký tự văn bản. Để những hình ảnh này hiển thị đúng, việc giữ nguyên từng ký tự và khoảng trắng là bắt buộc. Thẻ <pre> là công cụ duy nhất có thể làm được điều này.

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

Thử bỏ đoạn mã trên vào thẻ <p>, bạn sẽ thấy chú mèo biến mất ngay lập tức! Đây là một ví dụ vui nhưng cho thấy tầm quan trọng của việc bảo toàn định dạng tuyệt đối.

Ứng dụng quan trọng nhất: Chèn và hiển thị code trong HTML

Dù có nhiều ứng dụng, nhưng mục đích sử dụng phổ biến và quan trọng nhất của thẻ <pre> chính là để hiển thị code trong HTML. Đối với các lập trình viên, blogger công nghệ, đây là một công cụ không thể thiếu.

Tại sao pre là thẻ tốt nhất để hiển thị mã nguồn?

Mã nguồn không chỉ là các dòng lệnh, mà còn là cấu trúc. Các lập trình viên sử dụng thụt đầu dòng (indentation) để phân cấp và làm cho code dễ đọc hơn. Các ngôn ngữ như Python thậm chí còn dùng thụt đầu dòng để định nghĩa các khối lệnh. Thẻ <pre> đảm bảo rằng tất cả cấu trúc trực quan này được giữ nguyên khi hiển thị trên web, giúp người đọc dễ dàng sao chép và hiểu mã.

Kết hợp thẻ pre và thẻ code để tối ưu ngữ nghĩa

Để hiển thị code một cách chuyên nghiệp và đúng chuẩn nhất, bạn nên kết hợp thẻ pre và thẻ code.

• Thẻ <pre>: Chịu trách nhiệm về mặt trình bày. Nó đảm bảo khối code giữ nguyên định dạng (khoảng trắng, ngắt dòng).
• Thẻ <code>: Chịu trách nhiệm về mặt ngữ nghĩa. Nó thông báo cho trình duyệt và các công cụ tìm kiếm rằng nội dung bên trong nó là một đoạn mã máy tính.

Bằng cách lồng thẻ <code> vào bên trong thẻ <pre>, bạn có được lợi ích của cả hai. Đây được coi là cách làm tốt nhất (best practice).

Ví dụ: Chèn một đoạn mã CSS hoặc JavaScript

Hãy xem cách chúng ta trình bày một đoạn mã CSS bằng sự kết hợp này:

<pre><code>
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

a {
    color: #007bff;
}
</code></pre>

Với cấu trúc này, đoạn mã CSS của bạn không chỉ hiển thị đẹp mắt mà còn được các công cụ hiểu đúng ngữ nghĩa, giúp cải thiện SEO cho các bài viết kỹ thuật.

Các thuộc tính của thẻ pre cần biết

Bản thân thẻ <pre> không có nhiều thuộc tính đặc biệt, nhưng có một vài điểm bạn cần lưu ý để sử dụng nó hiệu quả và đúng chuẩn.

Các thuộc tính toàn cục (Global Attributes)

Giống như hầu hết các thẻ HTML khác, thẻ <pre> hỗ trợ tất cả các thuộc tính toàn cục. Những thuộc tính phổ biến nhất bạn có thể dùng là:

• class: Để áp dụng các quy tắc CSS cho khối <pre>.
• id: Để định danh duy nhất cho khối <pre>, thường dùng cho JavaScript hoặc anchor link.
• style: Để thêm CSS nội tuyến trực tiếp vào thẻ (nhưng nên ưu tiên dùng class).

Lưu ý về các thuộc tính đã lỗi thời (width, cols)

Trong các phiên bản HTML cũ, thẻ <pre> có các thuộc tính như width hay cols để kiểm soát chiều rộng. Tuy nhiên, các thuộc tính của thẻ pre này đã lỗi thời và không còn được hỗ trợ trong HTML5.

Cách làm hiện đại và đúng đắn là sử dụng CSS để định dạng. Ví dụ, để giới hạn chiều rộng và thêm thanh cuộn cho khối code quá dài, bạn có thể dùng CSS như sau:

pre {
    max-width: 100%;
    overflow-x: auto; /* Thêm thanh cuộn ngang khi cần */
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 5px;
}

Font chữ mặc định: Monospace

Một đặc điểm quan trọng của thẻ <pre> là văn bản bên trong nó mặc định được hiển thị bằng một font chữ monospace (như Courier hoặc Consolas).

Trong font monospace, tất cả các ký tự (kể cả khoảng trắng) đều có chiều rộng bằng nhau. Điều này cực kỳ hữu ích cho việc hiển thị code, vì nó giúp các ký tự và các dòng được căn chỉnh thẳng hàng một cách hoàn hảo.

Câu hỏi thường gặp về thẻ pre

Dưới đây là một vài câu hỏi WiWeb thường nhận được về thẻ <pre>. Chúng tôi đã tổng hợp và trả lời ngắn gọn để bạn tiện theo dõi.

Lời kết

Tóm lại, thẻ <pre> là một công cụ đơn giản nhưng vô cùng mạnh mẽ trong HTML. Bạn nên sử dụng nó bất cứ khi nào việc bảo toàn định dạng văn bản gốc là điều bắt buộc.

Các trường hợp sử dụng lý tưởng bao gồm:

• Hiển thị mã nguồn (code snippet) từ bất kỳ ngôn ngữ lập trình nào.
• Trình bày thơ ca hoặc lời bài hát.
• Hiển thị nghệ thuật ASCII (ASCII art).
• Hiển thị đầu ra (output) từ một chương trình máy tính hoặc dòng lệnh.

Nắm vững cách dùng thẻ <pre> sẽ giúp bạn trình bày nội dung trên trang web của mình một cách rõ ràng, chính xác và chuyên nghiệp hơn rất nhiều.

Bạn còn thắc mắc nào về thẻ <pre> hay có ý định sử dụng nó cho dự án nào của mình không? Hãy chia sẻ với WiWeb ở phần bình luận nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, nơi mọi chi tiết nhỏ đều được chăm chút, WiWeb luôn sẵn sàng đồng hành. Liên hệ với chúng tôi ngay hôm nay!