Bạn có từng chèn nhiều dấu cách trong HTML nhưng khi hiển thị lại chỉ còn một? Đây là vấn đề rất phổ biến khi lập trình web. Thực tế, để tạo khoảng trắng HTML, lập trình viên thường dùng ký tự đặc biệt  . Vậy   là gì, cách sử dụng ra sao và khi nào nên áp dụng? Bài viết này sẽ giúp bạn nắm rõ từ khái niệm đến ứng dụng thực tế, đảm bảo website hiển thị đúng ý muốn.
  là gì?
  (non-breaking space) là một ký tự đặc biệt tạo ra khoảng trắng HTML mà không bị rút gọn hay tự động ngắt dòng. Thông thường, khi bạn gõ nhiều dấu cách trong HTML, trình duyệt sẽ hiểu và hiển thị thành một khoảng trắng duy nhất. Đây là lúc phát huy tác dụng. Nó giúp tạo dấu cách trong HTML chính xác theo ý muốn.
Các cách tạo khoảng trắng trong HTML
Ngoài việc sử dụng để tạo khoảng trắng HTML, bạn có thể sử dụng các thẻ hỗ trợ khác trong HTML.
Sử dụng thẻ <p> để chèn khoảng trắng HTML
Thẻ <p> (paragraph) là một trong những thẻ HTML cơ bản nhất, dùng để định nghĩa một đoạn văn bản. Mỗi đoạn văn được tạo ra bởi thẻ <p> luôn bắt đầu trên một dòng mới.
Trình duyệt web tự động thêm một khoảng trống mặc định phía trên và phía dưới mỗi đoạn, tương ứng với thuộc tính margin-top và margin-bottom. Tuy nhiên, bạn hoàn toàn có thể tùy chỉnh các giá trị này bằng CSS để điều chỉnh khoảng cách theo ý muốn.
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới thiệu LANIT</title>
</head>
<body>
<h1>Về LANIT</h1>
<p>
**LANIT** là nhà cung cấp hàng đầu về các dịch vụ máy chủ, Hosting và Cloud Server tại Việt Nam. Chúng tôi mang đến những giải pháp công nghệ chất lượng cao, giúp doanh nghiệp tối ưu hóa hoạt động và phát triển bền vững.
</p>
<p>
Với đội ngũ chuyên nghiệp và hỗ trợ 24/7, LANIT cam kết mang lại trải nghiệm dịch vụ tốt nhất và đồng hành cùng sự thành công của khách hàng.
</p>
</body>
</html>
Thẻ <pre> (Preformatted Text) trong HTML
Thẻ <pre> được sử dụng để hiển thị các văn bản đã được định dạng sẵn (preformatted). Khi sử dụng thẻ này, trình duyệt sẽ giữ nguyên tất cả các khoảng trắng, dấu xuống dòng và cách bố trí ban đầu của văn bản. Điều này có nghĩa là văn bản sẽ được hiển thị chính xác như bạn đã viết trong file HTML.
Thẻ <pre> thường được dùng để:
Hiển thị mã nguồn (code).
Trình bày thơ ca hoặc các văn bản có định dạng đặc biệt.
Bất kỳ đoạn văn bản nào cần giữ nguyên khoảng cách và ngắt dòng ban đầu.
Để sử dụng, bạn chỉ cần đặt nội dung vào bên trong cặp thẻ <pre></pre>.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về thẻ pre</title>
</head>
<body>
<h1>Thông tin liên hệ LANIT</h1>
<pre>
LANIT - NHÀ CUNG CẤP DỊCH VỤ CÔNG NGHỆ
Địa chỉ: Toà Báo Công An Nhân Dân, 23 Nghiêm Xuân Yêm, Thanh Liệt, Thanh Trì, Hà Nội
Hotline: 0945.96.95.94
Email: [email protected]
Website: https://lanit.vn
</pre>
</body>
</html>
Thẻ <br> (Line Break) trong HTML
Thẻ <br> được sử dụng để tạo một ngắt dòng đơn lẻ. Không giống như thẻ <p> tạo ra một đoạn văn bản mới với khoảng cách mặc định, <br> chỉ đơn thuần chuyển nội dung sang dòng tiếp theo mà không thêm bất kỳ khoảng trống nào. Đây là một thẻ tự đóng (self-closing tag), do đó không cần thẻ đóng.
Tóm lại, việc sử dụng các ký tự đặc biệt như hoặc thẻ <pre> và <br> là những cách hiệu quả để kiểm soát khoảng trắng trong HTML. Mặc dù chúng có vai trò riêng biệt, nhưng bạn nên kết hợp chúng một cách hợp lý với CSS để tạo ra bố cục trang web chuyên nghiệp, gọn gàng và dễ bảo trì. Việc hiểu rõ từng công cụ sẽ giúp bạn tối ưu hóa việc trình bày nội dung, mang lại trải nghiệm tốt nhất cho người dùng.
