Ký tự khoảng trắng trong HTML

Khoảng trắng whitespace

Khoảng trắng là những ký tự không nhìn thấy nhưng có thể gõ được bằng trình soạn thảo như : ký tự trắng (space), ký tự tab (tab), ký tự xuống dòng (enter).

• Ký tự trắng: Là ký tự rỗng được tạo ra khi nhấn phím spacebar trên bàn phím.
• Ký tự tab: Được sinh ra khi bạn nhấn phím tab trên bàn phím, số lượng khoảng trắng được sinh ra mỗi lần nhấn tab sẽ phụ thuộc vào cấu hình của từng trình soạn thảo.
• Ký tự xuống dòng: Được sinh ra khi bạn nhấn phím enter . Tùy thuộc trình soạn thảo mà ký tự xuống dòng là một ký tự CR (mã ASCII 13 - Carriage Return), LF(mã ASCII 10 - Line Feed) hoặc cả chuỗi CRLF(gọi là EOL - End Of Line)

Việc sử dụng các khoảng trắng khi lập trình sẽ làm cho các dòng code của bạn trở lên sáng sủa, dễ đọc, dễ debug. Tuy nhiên sẽ có sự khác biệt khi trình duyệt hiển thị nó. Bạn cần hiểu rõ để sử dụng cho phù hợp, dưới đây là một số lưu ý khi sử dụng khoảng trắng.

Trình duyệt bỏ qua hầu hết các khoảng trắng

Nhiều khoảng trắng giữa các từ chỉ hiển thị một

giữa các từ có nhiều khoảng trắng liên tiếp nhau thì trình duyệt coi như một ký tự trắng.

<p>Xin               chào,  
Tôi          Là         YesMY.net</p>

sẽ hiển thị 

Ký tự tab, xuống dòng CR, LF đều hiển thị tương được khoảng trắng

<tag>Xin

chao

      Tôi là coder</tag>
 tương đương với <tag>Xin chào Tôi là coder</tag>

Khoảng trắng đầu và cuối nội dung bị bỏ qua

<tag> Xin chào     </tag> tương đương với <tag>Xin chào</tag>

Khoảng trắng trước và sau các thẻ bị bỏ qua

    <tag>Xin chào</tag>      tương đương với <tag>Xin chào</tag>

Lưu ý:

Đối với các phần tử liên tiếp nhau thì các khoảng trắng ở cuối phần tử trước, giữa hai phần tử, đầu phần tử liền sau sẽ được hiển thị một khoảng trắng

VD: <span> Xin chào       </span>          <b>       Tôi là coder</b> cũng tương tự như <span Xin chào</span> <b>Tôi là coder</b>

Hiển thị nhiều khoảng trắng liên tiếp

Nếu muốn hiển thị nhiều khoảng trắng liên tiếp thì ta dùng mã ký tự (HTML Entity Code): &nbsp;

vd: <p> Xin chào, &nbsp;&nbsp;&nbsp;&nbsp; Tôi là coder<p>