Khi cần hiển thị nguyên cú pháp của code hay mã nguồn, hay đơn giản share code trên blog thì ta thường dùng thẻ pre và code. Thẻ xmp cũng có chức năng tương tự, tuy bị loại bỏ trong bản HTML mới nhất nhưng đa số các trình duyệt vẫn hỗ trợ nên mình cũng sẽ nhắc sơ qua. Nào chúng ta sẽ cùng tìm hiểu chức năng và ý nghĩa của các thẻ này nhé.
Thẻ pre là gì? Thẻ code là gì?
Thẻ pre là dạng văn bản trước định dạng (preformatted text) hiển thị văn bản có độ lớn cố định (vì không chịu ảnh hưởng bởi các định dạng làm to hay thu nhỏ, hay bất kỳ định dạng nào), thường ở font Courier. Các văn bản ở trong thẻ pre sẽ được giữ nguyên xi khoảng cách (space) hay xuống dòng. Và cũng bởi các đặc tính trên nên thẻ pre hay được sử dụng để chia sẻ code, các cú pháp trên website cũng như blog.
Thẻ code thường dùng để hiển thị những cụm từ ngắn hay những đoạn code ngắn cần lưu ý. Sẽ rất là đẹp nếu kết hợp thêm với CSS. Ví dụ như blog mình đang dùng thẻ code ngay trong bài viết này, chữ màu hồng nền hồng nhạt (do mình chỉnh CSS cho đẹp).
Dùng thẻ pre hiện code HTML
Bình thường thẻ pre không thể hiển thị code HTML. Khi này chúng ta phải chuyển nó về dạng escape.
&thay cho&(ampersand, U+0026)<thay cho<(less-than sign, U+003C)>thay cho>(greater-than sign, U+003E)"thay cho"(quotation mark, U+0022)'thay cho'(apostrophe, U+0027)
Ví dụ để hiển thị một đoạn code HTML như vầy bằng thẻ pre:
<head> <meta name="theme-color" content="#222"> </head>
Ta phải gõ như sau:
<pre><head>
<meta name="theme-color" content="#222">
</head></pre>
Đoạn văn bản trong thẻ pre là đoạn HTML đã được escape. Đến đây thì mình lại đặt ra một câu hỏi. Thế làm sao hiển thị được như vầy nhỉ?
<head>
<meta name="theme-color" content="#222">
</head>
Đơn giản bạn chỉ cần thêm & vô trước mỗi ký tự bị escape. Giống đoạn dưới đây nè:
<pre>&lt;head&gt;
&lt;meta name=&quot;theme-color&quot; content=&quot;#222&quot;&gt;
&lt;/head&gt;</pre>
Thẻ xmp và chức năng của nó
Thẻ xmp tương tự như thẻ pre, nó có chức năng hiển thị mã nguồn. Nhưng ở phiên bản mới nhất nó đã được loại bỏ, và đã là thẻ deprecated. Tuy nhiên, hầu hết các trình duyệt hiện nay đều vẫn hỗ trợ thẻ này. Thẻ này hay hơn thẻ pre là có thể hiển thị chính xác cả code HTML mà không cần escape, nhưng đáng tiếc nó đã lỗi thời nên không được khuyên dùng mà thay vào đó sẽ dùng thẻ pre.
Hi vọng những kiến thức này sẽ có ích và gây thú vị cho các bạn!
