Giới thiệu

Trong HTML, văn bản thường được thể hiện dưới dạng từng đoạn. Mỗi đoạn văn bản sẽ có một khoảng cách lề phía trên & lề phía dưới (mặc định là 16 pixel) để tách biệt đoạn văn bản với các nội dung nằm ở phía trên và phía dưới nó.

Chúng ta cần phải sử dụng thẻ tạo đoạn văn bản p trong HTML để tạo một đoạn văn. Một đoạn văn luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau đoạn văn.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Kết quả:

Hiển thị HTML

Bạn không thể chắc chắn về cách mã HTML được hiển thị trên trình duyệt. 

Với các kích thước màn hình khác nhau, mã HTML sẽ được hiển thị khác nhau.

Bạn không thể thay đổi cách hiển thị HTML bằng cách thêm các khoảng trắng hay xuống dòng trong mã HTML. 

Trình duyệt sẽ bỏ tất cả các dòng và khoảng trắng thừa khi hiển thị trang web:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

Kết quả:

Đừng quên thẻ đóng

Hầu hết các trình duyệt sẽ hiển thị chính xác mã HTML dù cho bạn quên thẻ đóng:

<p>This is a paragraph.
<p>This is another paragraph.

Kết quả:

Ví dụ trên sẽ hiển thị tốt trên hầu hết trình duyệt, nhưng không nên phụ thuộc vào trình duyệt.

Chú ý: Không dùng thẻ đóng có thể tạo ra những kết quả không mong muốn hoặc gây ra lỗi.

Thẻ xuống dòng

Thẻ <br> định nghĩa xuống dòng.

Dùng <br> nếu bạn muốn xuống dòng mà không tạo ra một đoạn văn mới.

<p>This is<br>a paragraph<br>with line breaks.</p>

Kết quả:

Thẻ <br> là thẻ rỗng, vì vậy nó không cần thẻ đóng. 

Hiển thị một bài thơ

Nếu dùng thẻ <p>, bài thơ sẽ chỉ hiển thị trên một dòng chứ không hiển thị đúng như định dạng mà mình đã cho.

<p>
  Bước tới Đèo Ngang, bóng xế tà,
  Cỏ cây chen đá, lá chen hoa.
  Lom khom dưới núi, tiều vài chú,
  Lác đác bên sông, chợ mấy nhà.
  Nhớ nước đau lòng con quốc quốc,
  Thương nhà mỏi miệng cái gia gia.
  Dừng chân đứng lại trời, non, nước,
  Một mảnh tình riêng ta với ta.
</p>

Kết quả:

Dùng thẻ <pre> 

Để hiển thị một bài thơ ta có thể dùng thẻ <pre>.

Thẻ <pre> định nghĩa một đoạn văn bản đã được định dạng trước.

Đoạn văn bản bên trong thẻ <pre> </pre> sẽ được hiển thị với font chữ cố định (thường là font Courier) và được giữ lại các khoảng trắng và xuống dòng:

<pre>
  Bước tới Đèo Ngang, bóng xế tà,
  Cỏ cây chen đá, lá chen hoa.
  Lom khom dưới núi, tiều vài chú,
  Lác đác bên sông, chợ mấy nhà.
  Nhớ nước đau lòng con quốc quốc,
  Thương nhà mỏi miệng cái gia gia.
  Dừng chân đứng lại trời, non, nước,
  Một mảnh tình riêng ta với ta.
</pre>

Kết quả:

Kết luận

Qua đây là một số chia sẻ về thẻ tạo đoạn văn bản p trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.