Phần tử block và inline trong 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>

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ó style và class.

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>

Các thẻ nhóm trong HTML