HTML Xuống dòng: Sử dụng thẻ và <pre>

Bạn có thể thêm một dòng mới vào trang HTML bằng thẻ   hoặc <pre>. Thẻ   thêm một ngắt dòng trong trang. Thẻ <pre> định dạng văn bản chính xác như văn bản xuất hiện trong mã của bạn. Nếu có bất kỳ dòng mới nào trong thẻ <pre>, chúng sẽ được phản ánh trên trang cuối cùng.

Bạn có bao giờ muốn thêm một dòng mới vào trang web của mình? Bạn không thể chỉ thêm dòng mới bằng phím Enter. Thay vào đó, bạn cần sử dụng một trong các thẻ HTML được xây dựng cho mục đích tạo dòng mới.

Trong hướng dẫn này, chúng ta sẽ thảo luận về thẻ HTML   và <pre>. Cả hai thẻ đều cho phép bạn thêm dòng mới vào văn bản HTML của mình. Không còn chần chừ, hãy bắt đầu.

HTML Xuống dòng: và <pre>

Đôi khi khi viết HTML, chúng ta cần thêm ngắt dòng hoặc khoảng trắng vào giao diện người dùng (UI). Những khoảng trống này sẽ làm cho trang web dễ đọc hơn. Có hai cách để thêm dòng mới trong HTML:

Thẻ  : Tạo ngắt dòng.
Thẻ <pre>: Định dạng văn bản chính xác như được viết trong trình soạn thảo của bạn.

Thẻ HTML

Chúng ta có thể thêm dòng mới vào văn bản bằng thẻ  . Thẻ này, được gọi là phần tử ngắt dòng (break return element), chèn một dòng mới sau phần tử trước đó.

Cú pháp cho thẻ này là:

<p> Test<br> </p>

Thẻ   thêm một dòng mới sau từ "Test". Thẻ này không có thẻ đóng, thay vào đó, bạn chỉ cần thêm   vào bất kỳ nơi nào bạn muốn dòng mới. Hãy xem một ví dụ chi tiết hơn:

Đây là ví dụ sử dụng sau mỗi dòng trong một địa chỉ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ngắt dòng</title>
</head>
<body>
  <div>
    <p>Lorem ipsum dolor sit amet...</p>
    <address>
      <span>123 Main St</span><br>
      <span>Hometown, USA</span><br>
      <span>23455-2345</span>
    </address>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</body>
</html>

Trong mã này, chúng ta sử dụng thẻ   sau mỗi thẻ HTML  trong thẻ <address>. Điều này thêm dòng mới cho mỗi phần của địa chỉ.

Thẻ HTML <pre>

Thẻ HTML <pre> nhúng văn bản được định dạng trước (preformatted text) vào mã của bạn. Thẻ này sẽ chèn văn bản chính xác như chúng ta nhập vào trong mã đánh dấu (markup). Vì vậy, bất kỳ ngắt dòng nào trong văn bản sẽ xuất hiện trong mã cuối cùng.

Khác với thẻ  , phần tử <pre> có cả thẻ mở và thẻ đóng. Đây là cú pháp cho thẻ <pre> trong mã HTML:

<pre> Đây là một câu. </pre>

Mã này định dạng văn bản "Đây là một câu" chính xác như nó xuất hiện giữa các thẻ <pre>.

Đặc điểm của thẻ <pre> là mọi thứ được nhập chính xác như bạn viết nó trong trình soạn thảo.

Văn bản sao chép/dán không có ngắt dòng. Do đó, văn bản sao chép/dán có thể không xuất hiện như bạn mong đợi. Trình biên dịch đọc nó như một dòng văn bản liên tục dài. Bằng cách thêm một số ngắt dòng thực tế (bằng cách nhấn phím return hoặc enter), hành vi mong đợi sẽ xảy ra.

Hãy xem một ví dụ chi tiết hơn về thẻ <pre>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ngắt dòng</title>
  <style>
    body { max-width: 800px; width: 100%; }
  </style>
</head>
<body>
  <pre style="width: 100%;">
    <p style="width: 800px;"> Lorem, ipsum dolor sit amet... </p>
    <address>
      2345 Main St.
      Hometown, Anywhere, USA
      12345-3456
    </address>
    <p style="width: 800px; height: 500px; background: pink;"> Lorem ipsum... </p>
  </pre>
</body>
</html>

Chúng ta thêm thẻ <pre> ngay sau thẻ <body> trong mã. Tất cả văn bản bên trong thẻ — các thẻ đoạn văn HTML và thẻ <address> — được định dạng như nó xuất hiện trong trình soạn thảo văn bản.

Chúng ta không cần sử dụng thẻ   trong địa chỉ. Điều này là vì chúng ta đã chèn các dòng mới bằng phím enter trong trình soạn thảo văn bản.

Thông thường, điều này sẽ không cho phép chúng ta thêm dòng mới vào tài liệu. Bởi vì chúng ta đã sử dụng thẻ <pre>, các dòng mới được tạo bằng phím enter xuất hiện trong tài liệu cuối cùng.

Kết luận

Có hai cách để chèn ngắt dòng vào HTML:   và <pre>. Thẻ   hữu ích nếu bạn muốn thêm một dòng mới đơn lẻ ở một vị trí cụ thể. <pre> tốt hơn nếu bạn có một khối văn bản mà bạn muốn xuất hiện như nó trong trình soạn thảo văn bản của bạn.

Bạn muốn tìm hiểu thêm về viết mã HTML? Chúng tôi có hướng dẫn Cách học HTML liệt kê các khóa học và tài nguyên hàng đầu bạn có thể sử dụng để nâng cao kiến thức.

HTML Xuống dòng: Sử dụng thẻ <br> và <pre>

HTML Xuống dòng: <br> và <pre>

Thẻ HTML <br>

Thẻ HTML <pre>

Kết luận