Phần tử HTML dạng block và inline

• Block và Inline
• Thẻ <div>
• Thẻ <span>

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ả:

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