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
(khối) nó được hiện thị bắt đầu bởi một dòng mới, đó là các phần tử:
Ví dụ: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...
Các phần tử dạng inline
nó hiện thị bình thường mà không có sự ngắt dòng mới, như các phần tử:
Ví dụ: <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>Một đoạn văn bản.</p> <p>Đ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>Some <span style="color:red">Important</span> Message</h2>
Kết quả:
Some Important Message
Tóm lại:
Thẻ <div>
dùng để định nghĩa khối trong HTML.
Thẻ <span>
định nghĩa các phần văn bản dạng inline
không ngắt dòng.
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