HTML có chức năng thu gọn khoảng cách dù cho bạn có chèn bao nhiêu khoảng trắng trong HTML thì khi hiển thị cũng giảm tất cả xuống thành một. Bên cạnh đó, bạn không thể sử dụng dấu cách trên bàn phím để chèn nhiều khoảng trắng liên tiếp, mà phải dùng những cặp thẻ chuyên dụng để tạo khoảng trắng phù hợp. Vậy làm thế nào để chèn thêm khoảng trắng HTML?
Đọc bài viết bên dưới để được hướng dẫn chi tiết về:
- Cách chèn khoảng trắng trong HTML bằng các cặp thẻ và thuộc tính.
- Cách kết hợp giữa các HTML Entity để chèn khoảng trắng trong HTML.
Giới thiệu về khoảng trắng HTML
Trong HTML, khoảng trắng được định nghĩa bao gồm các dấu cách, tab và dấu xuống dòng được sử dụng cho mục đích định dạng và bố trí tài liệu HTML. Những khoảng trắng này thường được trình duyệt web bỏ qua khi hiển thị nội dung, lược bỏ nhiều dấu cách liên tiếp thành một dấu cách duy nhất và bỏ qua dấu cách ở đầu và cuối trong các phần tử.
Đọc thêm: Giải đáp “tất tần tật” những điều cần biết về HTML
Thông thường, HTML Entity được sử dụng để tạo hoặc chèn thêm khoảng trắng vào giữa các từ hoặc nội dung trong đoạn code, HTML Entity phổ biến là . Ngoài ra, bạn cũng có thể sử dụng các loại thẻ trong HTML cơ bản để hỗ trợ tạo thêm khoảng trắng một cách dễ dàng.
Cách 1: Chèn khoảng trắng trong HTML với Non-Breaking Space ( )
Non-Breaking Space ( hoặc  ) hay còn gọi là khoảng trắng cố định, được xem là phương pháp đơn giản và phổ biến để thêm khoảng trắng trong HTML.
Khi hiển thị trên trang web, Non-Breaking Space sẽ trông giống như một khoảng trắng bình thường, chỉ có sự khác biệt là khoảng trắng này sẽ giúp các cụm từ luôn xuất hiện trên cùng một dòng mà không bị ngắt sang một dòng mới. sẽ cực kỳ hữu ích khi bạn muốn hiển thị các thông tin quan trọng trên cùng một dòng mà không ngắt như họ tên, số tiền, phép tính,…
Bạn có thể chèn khoảng trắng bằng   như sau:
- Đầu tiên, bạn xác định nội dung văn bản muốn thêm dấu cách.
- Tiếp theo, nhấp vào giữa hai từ bạn muốn tách và nhập “ ” vào giữa. Khi hiển thị trên trình duyệt, bạn sẽ thấy có thêm khoảng trắng giữa hai từ.
- Bạn có thể thêm “ ” tùy thích, cứ một “ ” sẽ bằng một khoảng trắng.
<p>Đây là ITviec blog.</p> <p>Đây là ITviec blog.</p> <p>Đây là ITviec blog.</p>
Hiển thị:
|
Đây là ITviec blog. Đây là ITviec blog. Đây là ITviec blog. |
Ngoài thì bạn cũng có thể sử dụng các thành phần Non-Breaking Space bổ sung là   và   để thêm khoảng trắng không ngắt tương ứng và chúng phụ thuộc vào cỡ chữ hiện tại của phần tử đang được áp dụng.
<p>ensp dùng để tạo thêm khoảng trắng có chiều rộng bằng 1 en.</p> <p>emsp dùng để tạo thêm khoảng trắng có chiều rộng bằng 1 em.</p>
Mặc dù ,   và   khá hữu ích nhưng bạn vẫn không nên sử dụng quá mức sẽ khiến cho dòng code bị dài, gây cản trở khả năng tương thích với giao diện điện thoại và hiển thị nội dung trên trang web.
Ngoài ra, bạn cũng nên tránh sử dụng Non-Breaking Space cho các định dạng văn bản như thụt lề hoặc căn giữa, những định dạng này nên được xử lý bằng CSS sẽ mang lại hiệu quả tốt hơn.
Cách 2: Chèn khoảng trắng trong HTML sử dụng thẻ Preformatted Text <pre>
Thẻ <pre> được dùng để xác định văn bản được định dạng sẵn, giúp phần văn bản gồm các khoảng trắng và ngắt dòng sẽ được hiển thị đầy đủ. Khi hiển thị trên trình duyệt web, văn bản bên trong phần tử <pre> sẽ được hiển thị giữ nguyên định dạng những khoảng trắng và không bị ngắt dòng.
Thẻ <pre> thường được sử dụng để xác định một bài thơ, hiển thị một đoạn code hoặc đoạn văn bản cần giữ nguyên định dạng gốc trên trình duyệt web. Để định dạng đoạn văn bản, bạn chỉ cần để nội dung ở bên trong cặp thẻ <pre></pre> như ví dụ sau:
<!DOCTYPE html> <html> <body> <pre> Xem danh sách bài viết Sự nghiệp IT Xem danh sách bài viết Ứng tuyển & Thăng tiến Xem danh sách bài viết Chuyên môn IT </pre> </body> </html>
Hiển thị:
| Xem danh sách bài viết Sự nghiệp IT Xem danh sách bài viết Ứng tuyển & Thăng tiến Xem danh sách bài viết Chuyên môn IT |
Cách 3: Dùng thẻ <br> để tạo ngắt dòng khoảng trắng trong HTML
Nếu Non-Breaking Space được sử dụng để tạo dấu cách không ngắt thì thẻ <br> sẽ được dùng để ngắt một dòng đơn. Thẻ <br> sẽ rất hữu ích khi bạn muốn ngắt dòng mà không nhất thiết phải bắt đầu một đoạn văn mới, thường được sử dụng trong các thông tin cung cấp địa chỉ.
Để chèn thẻ break vào đoạn văn, bạn chỉ cần xác định vị trí văn bản cần ngắt và nhập thẻ <br> vào. Thẻ <br> là một thẻ trống nên bạn sẽ không cần thêm thẻ đóng.
Ngoài ra, bạn nên lưu ý không nên quá lạm dụng thẻ <br> trong dòng code, bởi <br> có thể làm tăng số lượng code trong một file khiến việc quản lý trở nên khó khăn hơn. Thay vào đó, bạn có thể sử dụng CSS để thay thế đối với những trường hợp cần ngắt dòng nhiều.
<!DOCTYPE html> <html> <body> <p>ITviec Blog<br>Bài viết Chuyên môn IT<br>Bài viết Sự nghiệp IT</p> </body> </html>
Hiển thị:
|
ITviec Blog Bài viết Chuyên môn IT Bài viết Sự nghiệp IT |
Cách 4: Chèn khoảng trắng trong HTML với thẻ <p>
Thẻ Paragraph là một trong những loại thẻ cơ bản trong HTML và được sử dụng để biểu thị một đoạn văn trong HTML.
Một đoạn văn luôn được bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm khoảng trắng vào trước, sau một đoạn văn. Điều này được áp dụng các giá trị margin-top và margin-bottom mặc định của thẻ <p>, đồng thời có thể điều chỉnh độ rộng tùy theo ý muốn của lập trình viên.
Bên cạnh đó, <p> còn là một phần tử Semantic HTML giúp các công cụ tìm kiếm dễ dàng tối ưu và lập chỉ mục trang web của bạn tốt hơn.
<!DOCTYPE html> <html> <body> <p> Cập nhật kiến thức về các ngôn ngữ lập trình, công nghệ ngành IT và tự học với 100+ tài liệu lập trình hấp dẫn. </p> <p> Khám phá thế giới Công nghệ thông tin ngay sau đây. </p> </body> </html>
Hiển thị:
|
Cập nhật kiến thức về các ngôn ngữ lập trình, công nghệ ngành IT và tự học với 100+ tài liệu lập trình hấp dẫn. Khám phá thế giới Công nghệ thông tin ngay sau đây. |
Làm thế nào để chèn nhiều khoảng trắng trong HTML?
Thêm khoảng trắng vào HTML giúp định dạng nội dung dễ đọc và có bố cục rõ ràng hơn, tuy nhiên bạn cũng nên sử dụng quá nhiều khoảng trắng trong đoạn code của mình. Chẳng hạn như ví dụ sau:
<p>ITviec cung cấp hơn 100+ tài liệu lập trình IT</p>
Đối với ví dụ này, bạn không nên sử dụng quá nhiều trong code có thể khiến cho đoạn code khá dài dòng và khó đọc. Do đó bạn có thể sử dụng thay thế bằng các HTML Entity hoặc CSS để tạo nhiều khoảng trắng giữa các phần tử khiến cho chúng dễ đọc và rõ ràng hơn.
Theo ví dụ, có năm   tương ứng với năm khoảng trắng liên tiếp, thay vì sử dụng năm thì có thể thay thế bằng hai   và một   sẽ giúp cho đoạn mã được ngắn gọn mà vẫn đầy đủ năm khoảng trống như yêu cầu.
Xem thêm Việc làm Lập trình viên Front-End tại TP. Hồ Chí Minh
Xem thêm Việc làm Lập trình viên Front-End tại Hà Nội
Một số câu hỏi về khoảng trắng HTML thường gặp
Làm thế nào để tạo khoảng trắng giữa nội dung và hình ảnh trong HTML?
Khi bạn chèn hình ảnh vào giữa nội dung thì khi hiển thị chúng sẽ bị dính lại với nhau, do đó bạn nên tạo một khoảng cách nhỏ giữa hai phần tử này để bố cục rõ ràng hơn. Trong HTML, bạn có thể tạo khoảng trắng này bằng cách sử dụng CSS với thuộc tính margin cho thẻ <img> hoặc padding cho phần tử có chứa <img>.
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <title>Ví dụ về Margin cho Ảnh</title> <style> .image-with-margin { margin: 20px; /* Tạo khoảng trắng 20px phía trước hình ảnh */ } </style> </head> <body> <h2>Hình ảnh với Margin</h2> <img src="link-to-your-image.jpg" class="image-with-margin"> </body> </html>
Một số Non-Breaking Space thông dụng khác
Ngoài   thì khi tạo khoảng trắng giữa các từ hoặc yếu tố khác trong đoạn code, bạn có thể sử dụng các HTML Entity phổ biến khác như:
| Tên | HTML Entity |
| 3-per-em space |   có chức năng tương tự với  . |
| figure space |   được sử dụng để tạo khoảng trắng bằng với một chữ số của phông chữ hiện tại. |
| punctuation space |   thường dùng để tạo thêm khoảng trắng nhỏ bằng với một dấu câu trong phông chữ hiện tại. |
| thin space |   được dùng để tạo khoảng trắng mỏng. |
| hair space |   được sử dụng để tạo khoảng trắng siêu mỏng. |
Tổng kết khoảng trắng trong HTML
Như vậy bài viết đã gợi ý cách chèn khoảng trắng HTML đơn giản và được nhiều lập trình viên sử dụng phổ biến. HTML được xem là nền tảng cơ bản của trang web và nắm vững các kiến thức trọng tâm về HTML sẽ giúp developers có thêm nhiều cơ hội thăng tiến trong công việc.
Với sự phát triển ngày càng phổ biến của thời đại công nghệ, nắm bắt những kiến thức cơ bản về HTML hứa hẹn sẽ đem lại những cơ hội phát triển hấp dẫn trong tương lai dành cho các Front End Developer.
Xem thêm: Front End Developer là gì: Làm gì, Lộ trình học và Công cụ làm việc
Đừng quên theo dõi ITviec để được cập nhật sớm nhất các thông tin hấp dẫn về lĩnh vực công nghệ thông tin bạn nhé!
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!