Đoạn văn paragraphs trong html là gì? Cách sử dụng thẻ như thế nào?

Posted on by mtoplistChuyên mục:Top List

Trong bài viết này, bạn sẽ được hướng dẫn về cách tạo 1 đoạn paragraphs trong HTML.

Bắt đầu tạo 1 đoạn văn trong HTML (Paragraphs)

1 đoạn văn còn được gọi là 1 đoạn paragraphs. Để thể hiện phần này trong HTML, chúng ta sử dụng thẻ <p>.

Thẻ <p> là 1 thẻ cơ bản nhất trong HTML, vì mọi trang web đều dùng tới phần tử này để thể hiện đoạn text trên màn hình. Dưới đây là 1 vì dụ đơn giản:

<p>Đây là đoạn text đầu tiên.</p>
<p>Đây là đoạn text thứ 2.</p>

Đóng thẻ <p>

Trong các phiên bản HTML trước đó, 1 thẻ <p> phải có thẻ bắt đầu và thẻ đóng. Tuy nhiên hiện tại, hầu hết các trình duyệt đều hiểu và hiển thị chính xác đoạn text mà bạn muốn hiện thị cho dù bạn quên đóng thẻ <p>

Note
Vì tính tương thích ở nhiều trình duyệt, TheGioiPhp khuyên bạn nên sử dụng cả thẻ mở và thẻ đóng cho các đoạn text nói riêng, các thẻ khác nói chung.

Xuống dòng trong đoạn văn Paragraphs

Thẻ <br> được sử dụng để xuống dòng trong 1 đoạn text. Phần này được thêm vào bên trong nội dung của thẻ <p>. Vì thẻ <br> là 1 phần tử trống, do đó không cần thêm thẻ đóng thẻ </br> tương ứng.

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

Note
Không được bỏ trống nội dung trong thẻ <p> để tạo ra 1 khoảng trống trong đoạn text. Vì như vậy trình duyệt sẽ bỏ qua các đoạn trống đó vì nó là thẻ logic. Thẻ <p> không được lồng trong thẻ <p>. Để giải quyết vấn đề khoảng trống, ta có thể sử dụng các thuộc tính CSS.

Ngăn 2 đoạn văn paragraphs bằng đường kẻ ngang

Để tăng tính trực quan giữa các nội dung, ta có thể sử dụng thẻ <hr> để ngăn cách chúng. Cũng giống như thẻ <br>, thẻ <hr> là 1 phần tử trống, nên không cần thêm thẻ đóng cho thẻ đó. Ví dụ:

<p>Đây là đoạn text đầu tiên.</p>
<hr>
<p>Đây là đoạn text thứ 2.</p>

Khoảng trắng trong thẻ <p>

Thông thường trên trình duyệt, chúng ta muốn tạo khoảng trắng thì chỉ việc gõ SpaceBar hoặc nhấn tab. Tương tự như xuống dòng từng đoạn text, ta chỉ việc nhấn phím Enter. Nhưng trong HTML, để thể hiện được phần này thì không thể.

<p>Đây là đoạn text đầu tiên.</p>
<p>
Đây là 
đoạn text 
thứ 2.
</p>

Như bạn đã thấy ví dụ trên, trình duyệt sẽ hiện thị 1 dòng nhưng không có nhiều khoảng trắng hoặc xuống dòng như định dạng trên. Để tạo khoảng trắng liên tiếp, thì ta phải chèn &nbsp; vào. Trong khi muốn xuống dòng thì dùng thẻ <br>.

<p>Đây là &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; đoạn text đầu tiên.</p>
<p>Đây là <br><br> đoạn text <br><br> thứ 2.</p>

Hiển thị định dạng 1 bài thơ theo từng đoạn văn paragraphs

Đôi khi, sử dụng &nbsp; hoặc thẻ <br> để tạo khoảng trắng hoặc xuống dòng trong 1 bài thơ thì thật sự bất tiện. Để dễ dàng quản lý cũng như hiển thị đúng định dạng mong muốn, bạn có thể dùng thẻ <pre> để hiện thị nội dung.

Thẻ <pre> sẽ hiểu chính xác các khoảng trắng bằng SpaceBar, phím Tab, hoặc ngắt dòng bằng phím Enter. Có phải dễ dàng hơn đúng không?

<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>

Article Categories:

HTML căn bản

mtoplist