Thế nào là khoảng trắng whitespace trong HTML

Khoảng trắng là những ký tự (có thể gõ từ các trình soạn thảo) như: ký tự trắng, ký tự tab, ký tự xuống dòng

• Ký tự trắng : ký tự rỗng (space character), bạn gõ phím spacebar trên bàn phím để có ký tự này.
• Ký tự tab : nhấn phím tab trên bàn phím. Nó là phím tạo bảng, tùy thuộc các trình soạn thảo nó hiện thị với nhiều khoảng trắng.
• Ký tự xuống dòng : trong các trình soạn thảo bạn nhấn Enter. Cũng tùy thuộc trình soạn thảo xuống dòng nó là một ký tự CR (Carriage Return, mã ASCII 13) hoặc là một ký tự LF (Line Feed, mã ASCII 10) hoặc là cả một chuỗi CRLF (Soạn thảo trong Windows như notepad xuống dòng là tạo ra chuỗi CRLF còn gọi là EOL)

Khoảng trắng là những ký tự (có thể gõ từ các trình soạn thảo) như: ký tự trắng (space, rỗng, khi bạn gõ spacebar trên bàn phím), ký tự tab (nhấn phím TAB), ký tự xuống dòng (nhấn Enter, tùy thuộc trình soạn tạo nó có thể là ký tự CR, LF, hoặc cả chuỗi CRLF).

Khi viết nội dung HTML, sử dụng các khoảng trắng trên giúp cho bạn trình bày mã code HTML sáng sủa, dễ đọc. Tuy nhiên, trong HTML khoảng trắng hiện thị khi viết mã và nó thể hiện như thế nào trên trình duyệt có sự khác nhau lớn, nên bạn cần lưu ý để sử dụng một cách phù hợp. Dưới đây là các lưu ý khi sử dụng whitespace trong HTML

HTML bỏ qua hầu hết các khoảng trắng

Nhiều khoảng trắng giữa các từ (word) thì chỉ giữ lại một

Trong code HTML giữa các từ có nhiều khoảng trắng, thì trình duyệt render coi như chỉ có một khoảng khắng. Ví dụ:

Ký tự Tab, CR, LF đều hiện thị như space (spacebar)

Khoảng trắng ở đầu, cuối phần tử bị loại bỏ

Khi bạn viết HTML, mà sau khi mở thẻ là các khoảng trắng, thì các khoảng trắng này bị loại bỏ. Tương tự vậy, các khoảng trắng trước đóng thẻ bị loại bỏ.

Viết thế này (khung đỏ là các khoảng trắng):

Thì tương đương:

<tag>Nội dung</tag>

---

Khoảng trắng phía trước, sau phần tử bị loại bỏ

Phía trước mở một thẻ, phía sau đóng một thẻ nếu có khoảng trắng thì coi như không có.

Viết thế này:

Thì tương đương:

<tag>Nội dung</tag>

Chèn nhiều khoảng trắng vào HTML

Nếu muốn trình duyệt không bỏ qua các khoảng trắng theo quy tắc trên, thì các ký tự khoảng trắng space chèn vào HTML cần sử dụng mã ký tự (HTML Entity) để chèn, ví dụ ký tự spacebar thì viết là &nbsp;

Tham khảo mã ký tự HTML tại: Mã ký tự HTML đặc biệt

 <p>&nbsp;&nbsp;Xin&nbsp;&nbsp;&nbsp;chào!</p>

Kết quả là: (phía trước chữ Xin có 2 khoảng trắng ...)

  Xin   chào!

Nguồn tin: Xuanthulab