Thẻ Pre trong HTML là gì? Muốn sử dụng dấu tab thì làm sao?
Các bạn đang gặp vấn đề về việc định dạng đoạn văn bản trên code nhưng khi đưa lên trình duyệt thì định dạng không giống như mình nhập trên code. Thế các bạn hãy tìm đến thẻ Pre trong HTML sẽ giúp bạn giải quyết vấn đề này.
Chức năng của thẻ Pre là gì?
Thẻ <pre>: Thẻ này dùng để xác định văn bản được định dạng đúng như lúc bạn nhập code.
Bạn có thể hiểu như khi bạn code 1 đoạn văn bản, chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn) hay xuống dòng (nhấn enter) nhưng khi đưa vào trình duyệt thì trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường. Thì lúc này cần thẻ <pre> được sử dụng để cho trình duyệt hiểu rằng đây là những gì tôi muốn là chủ ý của tôi hãy để nguyên như vậy.
Hãy cùng với mình đi vào ví dụ cụ thể để hiểu rõ hơn về cách sử dụng của thẻ này nhé!
Trường hợp sử dụng thẻ pre. Muốn sử dụng dấu tab trong văn bản thì làm sao?
Cú pháp: <pre> đoạn văn bản </pre>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>
Bạn có thể hiểu như khi bạn code 1 đoạn văn bản,
chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn)
hay xuống dòng (nhấn enter)
nhưng khi đưa vào trình duyệt thì
trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường
</pre>
</body>
</html>
Đấy là khi bạn sử dụng thẻ <Pre> thì đoạn văn bản trong code như thế nào thì sẽ được hiển thị trên trình duyệt như vậy.
Thế khi không sử dụng thẻ <Pre> thì sẽ như thế nào? Mình sẽ lấy ví dụ khi không sử dụng thẻ <Pre> mà sẽ sử dụng thẻ <p> để thay thế, các bạn hãy cùng mình thử nghiệm để xem kết quả sẽ thê nào nhé!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Bạn có thể hiểu như khi bạn code 1 đoạn văn bản,
chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn)
hay xuống dòng (nhấn enter)
nhưng khi đưa vào trình duyệt thì
trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường
</p>
</body>
</html>
Như vậy khi không sử dụng thẻ <Pre> thì đoạn văn bản được hiện lên trình duyệt sẽ không như trong đoạn code nữa mà sẽ được trình duyệt sửa đổi, dù các sử dụng tab, enter, các khoảng trắng chủ ý thì đều chuyển về 1 đoạn văn bản nối dài với nhau.
Vậy là các bạn đã tìm hiểu về tag <Pre> trong HTML. Các bạn có thể thử nghiệm thẻ <Pre> tại đây: Thử nghiệm thẻ <Pre>
Nếu thấy bài viết hay nhớ like và share để mọi người cùng biết nhé!
