Học HTML, CSS từ Zero Tới Hero
Tìm hiểu về thẻ p
Các đoạn văn bản chiếm một phần lớn trong nội dung của các trang web. Trong bài này, chúng ta sẽ tìm hiểu chi tiết hơn về cách sử dụng thẻ
<p> để làm việc với các đoạn văn bản.
Chữ p viết tắt của paragraph (ý nghĩa: đoạn văn). Viết nhanh thẻ này với Emmet: gõ p và nhấn tab.
Cách sử dụng:
<p>Nội dung đoạn văn bản</p>
Ví dụ:
Thẻ <p> được dùng để thể hiện một đoạn văn bản trên trang web. Ví dụ như một bài blog được tạo ra bởi nhiều đoạn văn bản.
Ví dụ, các đoạn văn trong một bài blog:
Ví dụ về cách sử dụng thẻ p
Mỗi đoạn văn bản có thể nằm trong một thẻ <p>, một đoạn văn có thể bao gồm nhiều câu.
Ví dụ, đoạn văn sau gồm 2 câu văn:
<p>Nước không chỉ là thứ thiết yếu với cuộc sống con người mà nó còn là yếu tố hàng đầu của tuổi thọ. Ngược lại, uống không đủ nước cũng là căn nguyên của nhiều bệnh tật.</p>
Thẻ <p> cũng có thể được sử dụng cho các đoạn văn bản ngắn, không nhất thiết phải sử dụng với các đoạn văn bản dài và nhiều câu văn.
Ví dụ:
<p>Chào bạn.</p>
<p>Tôi nuôi một em Husky.</p>
Trong thực tế, phần lớn các bài viết được tạo nên từ nhiều đoạn văn khác nhau. Mỗi đoạn văn này sẽ nằm trong một thẻ <p> khác nhau.
Bạn sẽ nhận thấy rằng một đoạn văn luôn bắt đầu trên một dòng mới. Ngoài ra, các trình duyệt sẽ tự động thêm một số khoảng trắng phía trên và dưới để ngăn cách giữa các đoạn văn.
Bạn sẽ dễ dàng thấy điều này khi chúng ta có nhiều đoạn văn liên tiếp.
Khoảng cách giữa các thẻ <p> được gọi là khoảng cách lề (margin), đây là khoảng cách mặc định, chúng ta có thể sửa lại khoảng cách này khi sử dụng CSS.
Tóm tắt
- Thẻ
<p>được sử dụng để thể hiện một đoạn văn bản trên trang web. - Một đoạn văn không nhất thiết phải nhiều hơn một câu, có thể sử dụng thẻ
<p>với các đoạn văn bản ngắn. - Mỗi thẻ
<p>sẽ luôn nằm trên một dòng mới. Ngoài ra, trình duyệt sẽ tự động thêm khoảng lề trên và dưới để ngăn cách giữa các thẻ<p>.
Nhận xét