Đoạn văn trong HTML5

Trung Nguyen
27/07/2021
4 min read

Nội dung chính của bài viết

Trong hướng dẫn này, bạn sẽ học cách tạo đoạn văn trong HTML5.

Tạo đoạn văn

Phần tử đoạn văn được sử dụng để xuất bản văn bản trên các trang web.

Các đoạn văn được xác định bằng thẻ . Thẻ  là một thẻ rất cơ bản và thường là thẻ đầu tiên bạn sẽ cần để xuất bản văn bản của mình trên các trang web. Đây là một ví dụ:

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

Lưu ý: Các style CSS tích hợp trong trình duyệt sẽ tự động tạo một số khoảng trống bên trên và bên dưới nội dung của một đoạn văn (được gọi là lề), nhưng bạn có thể ghi đè nó bằng cách sử dụng CSS.

Đóng một phần tử đoạn văn

Trong HTML 4 và các phiên bản trước đó, chỉ cần sử dụng thẻ mở là đủ để bắt đầu một đoạn văn mới. Hầu hết các trình duyệt sẽ hiển thị HTML một cách chính xác ngay cả khi bạn quên thẻ kết thúc. Ví dụ:

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

Mã HTML trong ví dụ trên sẽ hoạt động trong hầu hết các trình duyệt web, nhưng đừng sử dụng nó. Việc quên thẻ kết thúc có thể tạo ra kết quả hoặc lỗi không mong muốn.

Lưu ý: Vì mục đích tương thích chuyển tiếp và thực hành viết mã tốt, bạn nên sử dụng cả thẻ mở và thẻ đóng cho các đoạn văn.

Tạo ngắt dòng

Thẻ   được sử dụng để chèn một ngắt dòng trên trang web.

Vì   là một phần tử trống, vì vậy không cần thẻ đóng  tương ứng .

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

Lưu ý: Không sử dụng đoạn văn trống tức là để thêm không gian trong các trang web của bạn. Trình duyệt có thể bỏ qua các đoạn trống vì nó là thẻ logic. Thay vào đó, hãy sử dụng thuộc tính margin của CSS để điều chỉnh không gian xung quanh các phần tử.

Tạo dòng kẻ ngang

Bạn có thể sử dụng thẻ <hr> tạo dòng kẻ ngang để phân tách các phần nội dung trên trang web một cách trực quan. Giống như  , thẻ <hr> cũng là một phần tử trống. Đây là một ví dụ:

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

Tạo khoảng trắng

Thông thường trình duyệt sẽ hiển thị nhiều khoảng trắng được tạo ra bên trong mã HTML bằng cách nhấn phím space-bar hoặc phím tab trên bàn phím như một khoảng trắng duy nhất. Nhiều ngắt dòng được tạo bên trong mã HTML thông qua việc nhấn phím enter cũng được hiển thị dưới dạng một khoảng trắng.

Các đoạn văn sau sẽ được hiển thị trong một dòng duy nhất mà không có bất kỳ khoảng trắng nào:

<p>This paragraph contains  multiple   spaces    in the source code.</p>
<p>
    This paragraph
    contains multiple tabs and line breaks
    in the source code.
</p>

Chèn ký tự   để tạo thêm khoảng trắng liên tiếp, trong khi chèn thẻ   để tạo thêm ngắt dòng trên các trang web của bạn, như được minh họa trong ví dụ sau:

<p>This paragraph has multiple&nbsp;&nbsp;&nbsp;spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>

Văn bản được định dạng sẵn

Đôi khi, việc sử dụng  ,  , v.v. để quản lý không gian không thuận tiện lắm. Thật may mắn, bạn có thể sử dụng thẻ <pre> để hiển thị khoảng trắng, tab, ngắt dòng, v.v. chính xác như được viết trong file HTML. Nó rất hữu ích trong việc trình bày văn bản mà dấu cách và ngắt dòng là quan trọng như bài thơ hoặc source code.

Ví dụ sau sẽ hiển thị văn bản trong trình duyệt như được viết trong mã nguồn HTML:

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

Mẹo: Văn bản bên trong phần tử <pre> thường được trình duyệt hiển thị bằng phông chữ monospace hoặc phông chữ có chiều rộng cố định (fixed-width), chẳng hạn như Courier, nhưng bạn có thể ghi đè điều này bằng cách sử dụng thuộc tính font của CSS.