Thẻ <pre> trong HTML

1) Thẻ <pre> trong HTML

- Như chúng ta đã biết, trong quá trình soạn thảo mã lệnh, nếu ta nhập nhiều dấu khoảng trắng liên tiếp hoặc gõ phím Enter để xuống dòng thì khi hiển thị lên màn hình nó vẫn chỉ được xem như một dấu khoảng trắng.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>Hãy tham gia      diễn đàn HỎI     ĐÁP LẬP 
TRÌNH WEB trên Facebook của chúng tôi


Để được hỗ   trợ giải đáp những    câu hỏi về 

lĩnh vực    lập trình web 
   một cách nhanh        nhất và tốt 
        nhất</p>
</body>
</html>

Xem ví dụ

- Từ đây, thẻ <pre> giúp cho nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên định dạng giống như trong lúc soạn thảo.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <pre>Hãy tham gia      diễn đàn HỎI     ĐÁP LẬP 
TRÌNH WEB trên Facebook của chúng tôi


Để được hỗ   trợ giải đáp những    câu hỏi về 

lĩnh vực    lập trình web 
   một cách nhanh        nhất và tốt 
        nhất</pre>
</body>
</html>

Xem ví dụ

2) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <pre> với định dạng CSS như sau:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}