Phần tử block và inline trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Phần tử block và inline trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Mỗi phần tử HTML đều có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

Phần tử Block-level

Một phần tử block-level luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng (trải rộng ra bên trái và bên phải). Phần tử <div> là phần tử block-level.

Ví dụ về các phần tử block-level:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

Phần tử Inline

Một phần tử inline không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng nếu cần. Ví dụ về phần tử inline:

  • <span>
  • <a>
  • <img>

Phần tử <div>

Phần tử <div> thường được sử dụng như một vùng chứa cho các phần tử HTML khác. Phần tử <div> không bắt buộc phải có thuộc tính, nhưng phổ biến có style và class.

Khi được sử dụng cùng với CSS, phần tử <div> có thể dùng để định dạng cho khối nội dung:

<div style=”background-color:black;color:white;padding:20px;”>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Hiển thị trên trình duyệt

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Phần tử <span>

Phần tử <span> thường được sử dụng làm vùng chứa cho một số văn bản. Phần tử <span> không bắt buộc có thuộc tính, nhưng phổ biến có styleclass.

Khi được sử dụng cùng với CSS, phần tử <span> có thể dùng để định dạng các phần của văn bản:

<h1>My <span style=”color:red”>Important</span> Heading</h1>

Hiển thị trên trình duyệt

My Important Heading

Các thẻ nhóm trong HTML

Thẻ Mô tả
<div> định nghĩa một phần trong tài liệu (block-level)
<span> định nghĩa một phần trong tài liệu (inline)

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: