Trong HTML, khoảng trắng bao gồm các ký tự như dấu cách (space), tab, và dấu xuống dòng (line breaks), thường được sử dụng để định dạng và bố trí tài liệu HTML cho dễ đọc. Tuy nhiên, trình duyệt web thường sẽ bỏ qua các khoảng trắng dư thừa, ví dụ như nhiều dấu cách liên tiếp sẽ được thay thế bằng một dấu cách duy nhất, và khoảng trắng ở đầu và cuối các phần tử cũng sẽ bị loại bỏ khi hiển thị nội dung. Để kiểm soát khoảng trắng trong HTML một cách chính xác, bạn có thể sử dụng một số phương pháp sau:

4 cách chèn khoảng trắng HTML đơn giản

Cách 1: Chèn khoảng trắng trong HTML với Non-Breaking Space ( )

Thẻ Non-Breaking Space ( ) được sử dụng để chèn một khoảng trắng mà không bị trình duyệt bỏ qua, nghĩa là nó sẽ hiển thị một khoảng trắng thực sự và không bị thay thế hoặc loại bỏ. Đây là cách dễ dàng để giữ lại khoảng trắng trong nội dung mà không làm gián đoạn dòng chữ.

Ví dụ:

Đây là  ví dụ  về  dấu cách.

Cách 2: Chèn khoảng trắng trong HTML sử dụng thẻ Preformatted Text (<pre>)

Thẻ <pre> giúp giữ lại định dạng văn bản nguyên bản, bao gồm cả khoảng trắng và dấu xuống dòng. Nội dung trong thẻ <pre> sẽ hiển thị đúng như cách bạn nhập vào, bao gồm tất cả khoảng trắng, tab và dòng mới.

Ví dụ:

<pre>

Đây là ví dụ

về việc giữ khoảng trắng

và xuống dòng.

</pre>

Cách 3: Dùng thẻ <br> để tạo ngắt dòng khoảng trắng trong HTML

Thẻ <br> được sử dụng để chèn một ngắt dòng (line break), tạo ra khoảng trắng giữa các đoạn văn hoặc dòng chữ mà không cần phải sử dụng thêm dấu xuống dòng.

Ví dụ:

Đây là dòng đầu tiên.<br>

Đây là dòng thứ hai sau khi ngắt dòng.

Cách 4: Chèn khoảng trắng trong HTML với thẻ <p>

Thẻ <p> (paragraph) tự động tạo khoảng cách giữa các đoạn văn bản. Thẻ này không chỉ giúp phân chia văn bản mà còn tạo khoảng trắng giữa các đoạn văn.

Ví dụ:

<p>Đây là đoạn văn thứ nhất.</p>

<p>Đây là đoạn văn thứ hai, có khoảng cách giữa các đoạn.</p>

Kết luận

Chèn khoảng trắng trong HTML là một phần quan trọng trong việc tạo bố cục và cải thiện khả năng đọc hiểu của trang web. Các phương pháp như &nbsp;, thẻ <pre>, <br>, và <p> giúp bạn kiểm soát cách thức và mức độ khoảng trắng được hiển thị trong tài liệu HTML. Tùy thuộc vào yêu cầu thiết kế, bạn có thể chọn cách chèn khoảng trắng phù hợp để tạo ra một giao diện trực quan và dễ sử dụng.