Phần tử dạng block và inline
Trong văn bản HTML, các phần tử HTML được phân loại ra thành 2 cấp độ đó là:
block và inline
Các phần tử dạng block (hình chữ nhật)
chúng hiện thị liên tiếp theo chiều đứng, chúng bám sát mép trái của phần tử chứa nó.
Đó là các thẻ:
<h1>, <form>, <li>, <ol>, <ul>, <p>,
<pre>, <table>, <div> ...
Các phần tử dạng inline
chúng hiện thi liên tiếp theo chiều ngang.
Đó là các phần tử: <b>, <a>, <strong>, <img>, <input>,
<em>, <span> ...
Thẻ <div>
Thẻ <div> là một loại thẻ block
thường được sử dụng làm khối để chứa các phần tử HTML khác. Thường thì
div sẽ được sử dụng kết hợp với CSS để trình bày HTML
<div style="background-color:green; color:white; padding:20px;">
<p style="border:1px solid red">Một đoạn văn bản.</p>
<p style="border: 1px solid red">Đoạn văn bản khác.</p>
</div>
Kết quả:
Một đoạn văn bản.
Đoạn văn bản khác.
Thẻ <span>
Thẻ <span> thì lại là loại thẻ inline, thường nó được dùng để chứa văn bản. Tương tự div, span thường kết hợp với CSS để định dạng văn bản nó chứa:
<h2>
Học
<span style="color:red">HTML</span>
cơ bản
</h2>
Kết quả:
Học HTML cơ bản
Tóm lại:
Thẻ <div> dùng để định nghĩa khối block chung trong HTML.
Thẻ <span> định nghĩa các inline, phần văn bản dạng inline không ngắt dòng.
Quy tắc: Phần tử loại block thì có thể chứa các phần tử inline,
phần tử inline thì không được chứa phần tử block
Ngoài ra có một số phần tử có thể sử dụng khi thì là dạng
block khi thì inline như:
- APPLET - nhúng Java applet
- IFRAME - Inline frame
- INS - chèn văn bản
- MAP - image map
- OBJECT - embedded object
- SCRIPT - script trong HTML
