Thẻ P Trong HTML
Trong bài viết hôm trước chúng ta đã đi vào tìm hiểu thẻ tiêu đề rồi phải không nào. Trong bài viết hôm nay mình sẽ giới thiệu đến bạn cách sử dụng thẻ p (paragraphs) trong HTML và tính năng của nó nhé!
Thẻ <p> HTML là gì?
Bây giờ bạn hãy tưởng tượng mình đang đọc một cuốn sách mà tất cả các chữ đều dính liền vào nhau, không có dấu chấm câu, không có khoảng trắng, không có gì cả. Mình nghĩ bạn sẽ cảm thấy khó chịu và nhanh chóng quăng nó đi cho rồi phải không nào?
Vậy đối với Website cũng như vậy. Nếu bạn chỉ đơn thuần “đưa” một đống văn bản vào trang HTML mà không có sử dụng bất kỳ thẻ nào để bố cục, định dạng nội dung thì người dùng dĩ nhiên sẽ thoát trang của bạn ngay lập tức.
Đó là lý do vì sao chúng ta cần thẻ <p>. Thẻ này giúp chúng ta chia văn bản thành các đoạn riêng biệt, tạo ra sự rõ ràng, mạch lạc và dễ đọc cho nội dung trên website.
Cú Pháp của thẻ <p>:
Thẻ <p> là một phần tử HTML được sử dụng để định nghĩa một đoạn văn bản. Nó là một trong những thẻ cơ bản nhất và được sử dụng rộng rãi nhất trong việc xây dựng cấu trúc nội dung cho một trang web.
Cấu trúc cơ bản của thẻ <p>:
<p>Đây là nội dung của đoạn văn bản.</p>Trong đó:
- <p> là thẻ mở, bắt đầu của một đoạn văn.
- </p> là thẻ đóng, kết thúc của đoạn văn.
- “Đây là nội dung của đoạn văn bản.” là nội dung thực tế của đoạn văn, có thể là bất kỳ văn bản nào bạn muốn hiển thị.
Ví dụ:
See the Pen
thẻ P HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Khi bạn mở file HTML này trong trình duyệt, bạn sẽ thấy hai đoạn văn bản được hiển thị, mỗi đoạn nằm trên một dòng riêng biệt.
Tại sao chúng ta cần sử dụng thẻ <p>?
Có thể bạn sẽ tự hỏi, tại sao chúng ta cần sử dụng thẻ <p> để tạo đoạn văn? Tại sao không chỉ viết văn bản trực tiếp vào file HTML? Dưới đây là một vài lý do quan trọng:
- Cấu trúc và tổ chức: Thẻ
<p>giúp bạn cấu trúc và tổ chức nội dung trên trang web một cách rõ ràng. Nó cho phép bạn chia nội dung thành các đoạn văn riêng biệt, giúp người đọc dễ dàng theo dõi và hiểu nội dung hơn. - Tính nhất quán: Khi bạn sử dụng thẻ
<p>, trình duyệt sẽ tự động thêm khoảng cách trên và dưới mỗi đoạn văn, tạo ra sự nhất quán về mặt giao diện. Nếu bạn chỉ viết văn bản trực tiếp, bạn sẽ phải tự mình xử lý khoảng cách này, sẽ rất là mệt mỏi đấy.
Lưu ý: Luôn sử dụng thẻ <p> để tạo đoạn văn trong trang web, ngay cả khi bạn chỉ có một dòng văn bản nhé. Điều này giúp đảm bảo tính nhất quán và dễ đọc của trang web.
Chú ý về khoảng trắng và dòng mới
HTML không tự động nhận diện các khoảng trắng (space) và dòng mới (line break) trong code của bạn. Nếu bạn muốn tạo khoảng trắng hoặc dòng mới trong văn bản, bạn cần sử dụng các thẻ đặc biệt như (non-breaking space) hoặc <br> (line break). Tuy nhiên, việc lạm dụng các thẻ này có thể làm cho code của bạn trở nên khó đọc và khó bảo trì. Thay vào đó, hãy sử dụng thẻ <p> để tạo ra các đoạn văn có cấu trúc rõ ràng và dễ quản lý nha.
Bài tập thực hành: Định dạng các đoạn văn
Để giúp bạn hiểu rõ hơn về cách sử dụng thẻ <p>, chúng ta sẽ cùng nhau thực hiện một bài tập nhỏ.
Yêu cầu:
Bạn có một đoạn văn bản dài, chưa được định dạng. Hãy sử dụng thẻ <p> để chia đoạn văn bản này thành các đoạn nhỏ, dễ đọc hơn.
Hướng dẫn:
- Tạo một file HTML mới với cấu trúc cơ bản (khai báo doctype, thẻ
<html>,<head>,<body>). - Copy đoạn văn bản chưa định dạng vào trong thẻ
<body>. - Sử dụng thẻ
<p>để bao quanh mỗi đoạn văn nhỏ mà bạn muốn tạo. - Lưu file HTML và mở nó trên trình duyệt để xem kết quả.
Ví dụ:
Giả sử bạn có đoạn văn bản sau:
Đây là đoạn văn bản đầu tiên. Nó nói về tầm quan trọng của việc học lập trình web. Lập trình web là một kỹ năng rấtHot và có nhu cầu cao trên thị trường lao động hiện nay. Nếu bạn muốn có một công việc tốt và thu nhập ổn định, hãy bắt đầu học lập trình web ngay hôm nay!Đây là đoạn văn bản thứ hai. Nó giới thiệu về các ngôn ngữ lập trình web phổ biến như HTML, CSS, JavaScript. HTML là ngôn ngữ dùng để tạo cấu trúc cho trang web. CSS là ngôn ngữ dùng để định dạng giao diện cho trang web. JavaScript là ngôn ngữ dùng để tạo hiệu ứng và tương tác cho trang web.Đây là đoạn văn bản thứ ba. Nó khuyến khích bạn hãy kiên trì và nỗ lực trong quá trình học lập trình web. Học lập trình web không phải là một việc dễ dàng, nhưng nếu bạn có đam mê và quyết tâm, bạn sẽ thành công. Chúc bạn may mắn!
Bạn có thể định dạng nó như sau:
<!DOCTYPE html>
<html>
<head>
<title>Bài tập thẻ p</title>
</head>
<body>
<p>Đây là đoạn văn bản đầu tiên. Nó nói về tầm quan trọng của việc học lập trình web. Lập trình web là một kỹ năng rất hot và có nhu cầu cao trên thị trường lao động hiện nay. Nếu bạn muốn có một công việc tốt và thu nhập ổn định, hãy bắt đầu học lập trình web ngay hôm nay!</p>
<p>Đây là đoạn văn bản thứ hai. Nó giới thiệu về các ngôn ngữ lập trình web phổ biến như HTML, CSS, JavaScript. HTML là ngôn ngữ dùng để tạo cấu trúc cho trang web. CSS là ngôn ngữ dùng để định dạng giao diện cho trang web. JavaScript là ngôn ngữ dùng để tạo hiệu ứng và tương tác cho trang web.</p>
<p>Đây là đoạn văn bản thứ ba. Nó khuyến khích bạn hãy kiên trì và nỗ lực trong quá trình học lập trình web. Học lập trình web không phải là một việc dễ dàng, nhưng nếu bạn có đam mê và quyết tâm, bạn sẽ thành công. Chúc bạn may mắn!</p>
</body>
</html>Các thẻ HTML liên quan đến văn bản
Ngoài thẻ <p>, còn có một số thẻ HTML khác liên quan đến văn bản mà bạn nên biết:
<h1>đến<h6>: Các thẻ tiêu đề, được sử dụng để tạo tiêu đề cho các phần khác nhau của trang web.<span>: Một thẻ inline được sử dụng để nhóm các phần nhỏ của văn bản và áp dụng kiểu dáng cho chúng.<strong>: Được sử dụng để làm nổi bật văn bản quan trọng.<em>: Được sử dụng để nhấn mạnh văn bản.<br>: Thẻ ngắt dòng, được sử dụng để tạo một dòng mới trong văn bản.<hr>: Thẻ đường ngang, được sử dụng để tạo một đường kẻ ngang phân chia nội dung.
Lorem Ipsum là gì?
Đôi khi bạn muốn có một đoạn văn đại khái để mình có thể dễ dàng thực hành HTML thì chẳng lẽ lại đánh tay hay sao?
Bạn hãy dùng Lorem Ipsum. Nó là một đoạn văn bản được tạo sẵn (placeholder text) và thường được sử dụng trong thiết kế đồ họa, thiết kế web. Nó có nguồn gốc từ một đoạn văn bản Latin cổ điển của Cicero, được xáo trộn để tạo ra một văn bản vô nghĩa nhưng vẫn giữ được hình thức và cấu trúc của một đoạn văn bản thông thường. Thật tuyệt phải không nào?
Ví dụ về Lorem Ipsum:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
Các trang web tạo Lorem Ipsum:
Có rất nhiều trang web cung cấp công cụ tạo Lorem Ipsum miễn phí, cho phép bạn tạo ra các đoạn văn bản Lorem Ipsum với độ dài và số lượng tùy chỉnh. Một số trang web phổ biến bao gồm:
Bài tập thực hành
Để củng cố kiến thức về thẻ <p>, bạn hãy thử thực hiện các bài tập sau:
- Tạo một trang web đơn giản: Tạo một trang web có tiêu đề và ba đoạn văn giới thiệu về bản thân bạn. Sử dụng thẻ
<h1>cho tiêu đề và thẻ<p>cho các đoạn văn. - Sử dụng Lorem Ipsum: Thay thế nội dung của các đoạn văn bằng các đoạn văn bản Lorem Ipsum được tạo từ một trang web tạo Lorem Ipsum.
- Thử nghiệm với các thẻ HTML khác: Thêm các thẻ
<strong>,<em>,<br>và<hr>vào trang web của bạn để xem chúng ảnh hưởng đến văn bản như thế nào nhé.
Kết luận
Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết về thẻ <p>. Chúc bạn thành công trên con đường trở thành một nhà phát triển web nhé!
