[HTML/HTML5] Phần 7: Đoạn văn bản trong HTML

Phần tử HTML dùng để định nghĩa 1 đoạn văn bản là phần tử p. Ví dụ sau sẽ hiển thị 2 đoạn văn bản bằng cách dùng thẻ p.

<p>Đây là đoạn văn bản thứ nhất --- dammio.com</p>
<p>Đây là đoạn văn bản thứ hai.</p>

Lưu ý: Trình duyệt sẽ tự động thêm 1 số khoảng trắng trước và sau đoạn văn bản.

Hiển thị HTML
Bạn không thể chắc chắn cách thức HTML sẽ được hiển thị. Với các màn hình có kích thước lớn nhỏ khác nhau, kết quả của HTML sẽ khác nhau. Trong HTML, bạn cũng không thể thay đổi kết quả hiển thị bằng cách thêm các khoảng trắng, dòng trống trong mã nguồn. Trình duyệt sẽ loại bỏ bất kỳ khoảng trắng và các dòng thừa khi trang được hiển thị.

<p>
Xin chào các bạn.          Đây
là trang web dammio.com chứa

các khoảng trắng thừa
và các dòng ngăn dư cách trong mã nguồn. Tuy nhiên, 


trình duyệt sẽ bỏ qua chúng khi hiển thị.
</p>

Ví dụ trên sẽ có kết quả như ví dụ sau.

<p>
Xin chào các bạn. Đây
là trang web dammio.com chứa
các khoảng trắng thừa
và các dòng ngăn dư cách trong mã nguồn. Tuy nhiên, 
trình duyệt sẽ bỏ qua chúng khi hiển thị.
</p>

Đừng quên thẻ đóng
Đa số trình duyệt sẽ hiển thị đúng HTML ngay cả khi bạn quên thẻ đóng:

<p>Đây là đoạn văn bản thứ nhất --- dammio.com
<p>Đây là đoạn văn bản thứ hai.

Tuy nhiên nếu bạn bỏ thẻ đóng đôi khi gây ra lỗi hiển thị không mong muốn vì vậy tốt nhất là luôn sử dụng thẻ đóng.

Cách dòng
Phần tử br dùng để định nghĩa cách dòng. Hãy dùng br nếu bạn muốn có 1 dòng mới mà không cần phải thêm 1 đoạn văn bản:

<p>Đây là<br>một đoạn văn<br>với 1 số dòng ngăn cách.</p>

Thẻ br là thẻ trống, do đó không có thẻ đóng.

Vấn đề với hiển thị bài thơ
Bài thơ sau sẽ hiển thị trên 1 dòng.

<p>
   Chỉ là gió, nhưng lòng tôi thả bướm

   Thêm phất phơ cho hơi thở vừa hiền

   Chỉ là trăng, nhưng tôi thấy thần tiên

   Như tuyệt diệu: bởi hồn tôi xanh quá
</p>

Để khắc phục việc hiển thị bài thơ trên 1 dòng, bạn hãy dùng phần tử pre như phần sau.

Phần tử pre
Phần tử pre định nghĩa văn bản chưa được định nghĩa. Văn bản bên trong phần tử pre sẽ hiển thị với font chữ cố định (thường là Courier) và cho phép khoảng trắng và cách dòng.

<pre>
  Chỉ là gió, nhưng lòng tôi thả bướm

  Thêm phất phơ cho hơi thở vừa hiền

  Chỉ là trăng, nhưng tôi thấy thần tiên

  Như tuyệt diệu: bởi hồn tôi xanh quá
</pre>

Kết luận: Ô la, đến đây bạn đã học được cách mô tả 1 đoạn văn bản, xuống dòng và thẻ pre dùng để hiển thị thơ ca ở HTML. Mời bạn tiếp tục theo dõi series để học hỏi thêm về HTML.