Tìm hiểu thẻ PRE, CODE và XMP trong HTML

0
689

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ẻ precode. 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.

Dạng HTML escape là dạng HTML được thay thể các ký tự theo quy tắc sau:

  • & thay cho & (ampersand, U+0026)
  • &lt; thay cho < (less-than sign, U+003C)
  • &gt; thay cho > (greater-than sign, U+003E)
  • &quot; thay cho " (quotation mark, U+0022)
  • &apos; 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>&lt;head&gt;
     &lt;meta name=&quot;theme-color&quot; content=&quot;#222&quot;&gt;
&lt;/head&gt;</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ỉ?

&lt;head&gt;
     &lt;meta name=&quot;theme-color&quot; content=&quot;#222&quot;&gt;
&lt;/head&gt;

Đơn giản bạn chỉ cần thêm &amp; vô trước mỗi ký tự bị escape. Giống đoạn dưới đây nè:

<pre>&amp;lt;head&amp;gt;
     &amp;lt;meta name=&amp;quot;theme-color&amp;quot; content=&amp;quot;#222&amp;quot;&amp;gt;
&amp;lt;/head&amp;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.

Thuật ngữ deprecated trong lĩnh vực lập trình ám chỉ một chức năng hay một cú pháp code nào đó đã lỗi thời, tuy bây giờ có thể hoạt động như không chắc sẽ hoạt động trong tương lai. Nó sẽ bị mất đi hỗ trợ phát triển và được khuyên thay thế bằng cái mới hơn bởi nhà phát triển.

Hi vọng những kiến thức này sẽ có ích và gây thú vị cho các bạn!

Để lại bình luận

avatar

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.