Trang chủ Blog Hướng dẫn cách để chèn khoảng trắng trong html?

Hướng dẫn cách để chèn khoảng trắng trong html?

Khoảng trắng trong html không còn quá xa lạ đối với những designer khi thiết kế một website. Các khoảng trắng cho ý nghĩa rất lớn khiến tăng tính thẩm mĩ cho một trang web hơn, các thông tin không bị thay đổi nhưng giúp người đọc dễ dàng tiếp cận thông tin hơn. Tuy nhiên không phải ai cũng hiểu rõ khoảng trắng trong html là gì và cách chèn ra sao. Hiểu được điều đó, chúng tôi sẽ giúp các bạn tìm hiểu những điều đó trong bài viết này.

khoang-trang-trong-html
Cách tạo khoảng trắng trong html nhanh chóng

Khoảng trắng trong html đem lại nhiều ý nghĩa đối với việc thiết kế một trang web vậy làm thế nào để có thể chèn khoảng trắng trong html? Chúng ta hãy cùng tìm hiểu các để tạo ra các khoảng trắng trong html.

Chèn khoảng trắng trong html nhanh chóng

Khi chúng ta sử dụng html thì nó chỉ hiển thị khoảng trắng giữa các từ 1 lần duy nhất và cho dù bạn có sử dụng bao nhiêu dấu space và gõ dấu cách bao nhiêu lần đi chăng nữa thì nó cũng chỉ được hiển thị 1 lần. Vậy để các từ ngữ có dấu cách ở giữa khi dấu space không còn sử dụng được thì bạn có thể sử dụng ký tự   giữa 2 từ ngữ mà bạn muốn chèn.

Một ví dụ dễ hiểu cho việc chèn &nbsp để tạo ra khoảng trống đó là khi bạn gõ từ “tạm   biệt” vào trong html thì trang web sau khi đăng tải sẽ được hiện lên là “ tạm biệt”. Đây được xem là cách rất dễ dàng để bạn có thể tạo ra các khoảng trống giữa các từ ngữ trong html khi phím space chỉ được hiện dấu cách 1 lần. Cách làm này được gọi là cách tạo ra khoảng trống không bị ngắt hoặc là khoảng trống không bị phá huỷ bởi khi sử dụng nó không làm cho từ ngữ bị xuống dòng mà chỉ tạo ra khoảng trống giữa 2 chữ. Tuy nhiên, nếu sử dụng trình tự này nhiều lần thì trình duyệt sẽ có khả năng khó được chèn các dấu ngắt dòng để website trở nên đẹp hơn và dễ nhìn hơn.

Cách chèn khoảng trắng html dài hơn

Đôi khi trong quá trình thiết kế web, bạn muốn chèn 1 khoảng trống dài hơn trong html thì bạn có thể dùng một trong 3 cách như sau: cách đầu tiên là nếu bạn muốn chèn 2 khoảng trống thì bạn có thể sử dụng ký tự   còn nếu bạn muốn chèn 4 khoảng trống thì bạn có thể sử dụng kí tự &emsp và nếu bạn muốn chèn tab vào bài viết thì bạn có thể sử dụng kí tự là    %nbsp

Khi sử dụng 1 trong 3 cách như trên thì bạn có thể dễ dàng tạo ra khoảng trắng dài hơn ở trong html và tuỳ vào mục đích chèn như chèn 2 khoảng trống, chèn 4 khoảng trống hay chèn tab mà bạn có thể sử dụng các kí tự để tiến hành thiết kế.

Cách chèn lùi đầu dòng đoạn văn

khoang-trang-trong-html
Khoảng trắng, dấu cách được chèn trong html

Lùi đầu dòng đoạn văn bằng cách sử dụng CSS được sử dụng khác nhiều lần nhờ vào thuộc tính của Padding hay Margin để đưa ra hướng dẫn cho trình duyệt web để tiến hành lùi đầu dòng như mong muốn. Khi sử dụng Padding hoặc Margin của CSS thì kết quả lùi đầu dòng của toàn văn bản sẽ được đồng nhất hơn rất nhiều khi bạn sử dụng ký tự  

Để có thể lùi đầu dòng văn bản thì ở đoạn <head></head> của văn bạn, ta sẽ tiến hành chèn đoạn mã <style>p.indent{ padding-left: 1.8em }<.style> và sau đó, khi vào phần thân của văn bản chèn trong html, nếu bạn muốn lùi đầu dòng cho đoạn văn nào thì ta chỉ cần sử dụng đoạn kí tự như sau  <p class=”indent”></p>. Nếu bạn muốn thay đổi độ dài của lùi đầu dòng thì bạn có thể thay đổi 1.8 ở đoàn mã thành con số lớn hơn.

Khi sử dụng lùi đầu dòng bằng CSS thì bạn sẽ dễ dàng hơn để lùi đầu dòng, khoảng cách lùi đầu dòng được đồng bộ hơn, đồng đều hơn dựa theo khoảng cách mà bạn đã thiết lập từ trước.

Cách tạo ngắt dòng trong html mới nhất 2022

Để tạo ngắt dòng trong html, bạn có thể gõ kí tự <br> thì đoạn văn bạn muốn ngắt dòng sẽ được nhảy xuống phần bên dưới để bạn có thể tiếp tục viết tiếp văn bản, tiếp đến bạn sẽ tiến hành gõ kí tự </br> trước dòng văn bản sẽ đặt đoạn xuống dòng của nó và đoạn văn trước đó. Với các bước thao tác đơn giản như thế thì đoạn văn có bạn đã được ngắt dòng theo ý mà bạn mong muốn.

Việc sử dụng cách ngắt dòng như trên sẽ giúp cho bạn tách được đoạn văn dài xuống dòng theo ý muốn của bạn thân khiến cho thông tin trên trang web được dễ đọc hơn và tính thẩm mĩ cũng cao hơn, giúp người đọc dễ dàng hơn trong tiếp nhận thông tin.

Cách đề định nghĩa một đoạn văn bản nếu cần

khoang-trang-trong-html
Làm thế nào để chèn khoảng trắng trong html

Trong quá trình thiết kế, nếu bạn thấy đoạn đoạn văn bản mới và bạn muốn sử dụng để làm đoạn văn thì bạn có thể thực hiện các thao tác như gõ <p> trước, tiếp theo là gõ </p> ở sau của đoạn văn bản thì nó sẽ tách khỏi các đoạn văn bản khác mà không được định dạng. Đa số sau khi ta thực hiện thao tác trên thì trình duyệt sẽ tiến hành tách đoạn văn bằng một khoảng trống.

Sử dụng đoạn văn bản được định dạng trước

Một cách để tạo ra khoảng trắng trong html đó là các nhà thiết kế sẽ sử dụng các đoạn văn đã được chứa các định dạng trước, khi đó trên html sẽ hiện lên các khoảng trống dựa trên những định dạng mà bạn đã thiết lập từ trước. Nếu bạn muốn sử dụng định dạng trước thì bạn có thể dùng thẻ <pre> ở trước đoạn văn bản đó và </pre> ở phần kết thúc của văn bản.

Và khi được định dạng trước thì ta có thể sử dụng phím Enter để ngắt dòng trong văn bản vì nó đã được thiết lập và định dạng trước.

Khoảng trắng trong html có nhiều những ý nghĩa quan trọng trong một trang web và mong rằng qua bài bài viết vừa rồi, bạn đã nhận được đầy đủ các thông tin để có thể tự tin tạo ra các khoảng trống cho văn bản trong một trang web.

banner-seo-tu-tu
Dịch vụ SEO từ từ