Thẻ p trong HTML. Các cách kết hợp với thẻ p

Chữ cái “p” trong thẻ <p> là viết tắt của paragraphs – đoạn văn. Thẻ p trong HTML giúp trình duyệt nhận dạng được đoạn văn bản trong HTML. Bài viết dưới đây sẽ giúp bạn phân biệt được các thẻ được dùng và không được dùng với thẻ <p> khi code HTML. 

thẻ p trong html được dùng để đánh dấu đoạn văn bản
Nguồn: trickspanda

1. Các thẻ được dùng với thẻ p trong HTML (thẻ bổ trợ thẻ p)

Những thẻ được dùng trong thẻ <p> bao gồm: 

  • Thẻ liên kết <a></a>
  • Thẻ <img /> (image): hiển thị một hình ảnh
  • Thẻ <span></span>: dùng để nhóm các inline
  • Thẻ <strong></strong>: được dùng để đánh dấu, nhấn mạnh text
  • Thẻ <em></em>: được dùng để nhấn mạnh nội dung văn bản
  • Thẻ <br></br>: dùng để ngắt đoạn văn bản 

Ví dụ thẻ br được dùng với thẻ p trong HTML 

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8″ />

<title>Tiêu đề trang web</title>

</head>

<body>

<p>Tự học code html<br />

tại nhà.</p>

</body>

</html> 

Hiển thị trên trang web như sau

Tự học code html

tại nhà

2. Các thẻ không được dùng với thẻ p trong HTML

Những thẻ có thể dùng với thẻ p bên trên đều thuộc nhóm thẻ inline, còn lại không thể chứa được các nhóm thẻ block. Nhóm các thẻ block bao gồm

2.1. Thẻ xác định danh sách 

  • <dl>, <dt>, <dd>: Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục.
  • <ol>, <li>: Dùng cho thẻ danh sách có thứ tự, 
  • <ul>, <li>: Thẻ danh sách không có thứ tự sẽ dùng cặp thẻ này
thẻ p trong html được dùng chung với các thẻ inline
Nguồn: nestify.io

2.2. Các thẻ xác định bố cục trang web

  • Thẻ <div> (phân chia khu vực)

Thẻ phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.

  • Thẻ <header> (xác định phần nội dung nằm ở đầu trang web)

Chứa tất cả phần đầu của trang web, gồm: logo, mô tả, liên kết, …

  • Thẻ <section> (xác định khu vực có nội dung)

Bao ngoài các nội dung lớn thường được đặt tiêu đề từ h1 đến h6 trong bài

  • Thẻ <aside> (xác định nội dung phụ bên cạnh nội dung chính tại sidebar)

Tất cả phần sidebar chứa banner và các link dẫn tới mục bất kỳ của trang

  • Thẻ <footer> (xác định phần nội dung nằm ở cuối trang web)

Chứa tất cả phần cuối của trang web, gồm: logo, bản quyền, thông tin doanh nghiệp (tên, mã số thuế, địa chỉ liên lạc,…)

  • Thẻ <nav> (navigation – xác định menu link điều hướng)

Chứa các liên kết giữa các trang với nhau.

thẻ p trong html không được dùng chung với các thẻ block
Nguồn: Unsplash

2.3. Các thẻ xác định bố cục nội dung

  • Thẻ <hx> (định dạng tiêu đề bài viết)

Gồm các thẻ từ <h1> cho đến <h6>, được dùng để xác định tiêu đề cho nội dung trên trang HTML. Nhờ các thẻ này, trình duyệt sẽ nhận biết được tiêu đề trên trang của một nội dung 

  • Thẻ <article> (xác định một bài viết hoặc nội dung riêng biệt)

Nội dung gồm các tin tức chi tiết, bài báo, …

  • Thẻ  <figure> – <figcaption> (xác định chú thích của hình ảnh)

Giải thích nội dung rõ nghĩa hơn cho hình ảnh

Tóm lại, khi dùng thẻ p bạn chỉ cần nhớ những nhóm thẻ được dùng trong thẻ p thuộc nhóm inline. Còn lại, không được sử dụng các nhóm thẻ block chung với thẻ p trong HTML. 

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 06, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]
Hướng dẫn cách chèn thẻ video trong HTML

Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML […]