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
-
Phần tử HTML cấp độ block là những phần tử chiếm hết không gian theo chiều ngang của phần tử cha (phần tử chứa nó). Còn chiều cao mở rộng theo nội dung của phần tử này. Trong trình duyệt các phần tử dạng này tạo ra các dòng mới (xuống dòng) ở trước và sau phần tử, các phần tử cấp độ 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ó
-
Phần tử HTML cấp độ inline 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> ...
Các phần tử block hiện thị liên tiếp theo chiều ngang của phần tử chứa nó, không áp dụng thuộc tính CSS
width
,height
. -
Khi sử dụng (nhất là viết CSS) cần nhớ: phần tử cấp độ inline
không được chứa phần tử cấp độ block. Có một số ngoại lệ như thẻ
<a> có thể chứa phần tử kiểu block, ví dụ
<a href="/html/"> <h2>Học HTML</h2> <p>Các bài học HTML</p> </a>
Học HTML
Các bài học HTML
Thẻ <div>
Thẻ <div> (viết tắt của division) là phần tử
dạng block cơ bản dùng để chứa nội dung, dùng nó để phân nội dung thành các
phân đoạn, 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, chứa phần tử inline khác. Tương tự div, span
thường kết hợp với CSS
để định dạng, trình bày nội dung 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