Phần tử dạng block và inline
Trong văn bản HTML, các phần tử HTML thuần túy được phân loại ra thành 2 cấp độ theo cách thức mà phần tử được trình duyệt render hiện thị cho người dùng đó là những phần tử cấp độ inline (hiện thị trong hàng) và những phần tử cấp độ block (hiện thị theo khối). Mặc dù ngày nay có thể dùng CSS để chuyển đổi một phần tử ở dạng inline sang block và ngược lại với thuộc tính css: display, thì bạn vẫn cần biết một phần tử ban đầu nó thuộc về dạng nào để sử dụng cho đúng.
Phần tử HTML cấp độ block
Phần tử HTML cấp độ block (hiện thị dạng khối) là những phần tử sắp xếp theo chiều đứng của phần tử cha, trình duyệt luôn tạo ra một dòng mới, rồi đến không gian dành cho phần tử này, và kết thúc là một dòng mới.
Mặc định phần tử dạng này, có chiều rộng chiếm hết chiều rộng phẩn tử cha, chiều cao mở rộng theo nội dung của nó. Các phần tử dạng block như: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...
Các phần tử block hiện thị liên tiếp theo chiều đứng của phần tử chứa nó
Minh họa
Minh họa cho biết một phần tử cha chứa nội dung của nó và các phần tử con dạng block: block1, block2, block2.
- Độ rộng của phần tử block mở rộng tối đa (thường bằng độ rộng phần tử chứa). Xem block1
- Ba phần từ này hiện sắp xếp hiện thị theo chiều đứng của phần tử, nó luôn xuống dòng mới - kể cả phía trước không gian đủ cho nó chiếm giữ (block3 không nằm trái block2 và nằm dưới - tạo ra dòng mới phía trước).
- Ví dụ này dùng CSS để thay đổi độ rộng của phần tử (block2, block2), nhưng nguyên tắc block nó không bị thay đổi
- Chiều cao phần tử tùy thuộc vào nội dung nó chứa bên trong
block1
...
block3
Phần tử HTML cấp độ inline
Phần tử HTML cấp độ inline (trong hàng) là những phần tử chiếm không gian chiều ngang theo nội dung của phần tử, không tạo ra dòng mới (xuống dòng) trước và sau phần tử. Các phần tử inline như: <b>, <a>, <strong>, <img>, <input>, <em>, <span> ...
Ví dụ:
Khi sử dụng cần nhớ quy tắc đảm bảo mô hình nội dung của HTML: phần tử cấp độ inline không được chứa phần tử cấp độ block, nó chỉ chứa dữ liệu hoặc các phần tử inline khác. Phần tử block thì được chứa các phần tử block, inlinne, dữ liệu. Có một số ngoại lệ như thẻ <a> (inline) có thể chứa phần tử kiểu block.
Ví dụ thẻ a có thể chứa phần tử block:
<a href="/html/">
<h2>Học HTML</h2>
<p>Các bài học HTML</p>
</a>
Phần tử HTML cấp độ inline
Trong HTML có hai loại phần tử sử dụng với mục đích tổng quát, một phần tử cấp độ block là <div> và một phần tử cấp độ inline là <span>. Xem chi tiết tại: Phần tử >div> và <span>
