Tất cả các phần tử trong HTML có thể được chia thành hai loại: block elements - các phần tử cấp khối và inline elements - các phần tử nội tuyến.
Nội dung chính
Phần tử cấp khối (block) trong HTML
Phần tử cấp khối thường bắt đầu và kết thúc với một dòng mới khi hiển thị trong trình duyệt. Ví dụ cho các phần tử này là <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, và <address>. Tất cả chúng bắt đầu bởi một dòng mới, và bất cứ cái gì theo sau chúng, đều xuất hiện trên dòng mới này.
Phần tử nội tuyến trong HTML
Các phần tử nội tuyến xuất hiện trong một câu và không cần phải cách dòng. Ví dụ cho các phần tử này là <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, và <var>.
Tạo nhóm các phần tử trong HTML
Có 2 thẻ quan trọng mà chúng ta sử dụng thường xuyên để tạo nhóm các thẻ HTML khác là (i) <div> và (ii) <span>.
Thẻ <div> trong HTML
Đây là một thẻ cấp khối rất quan trọng đóng vai trò lớn trong việc tạo nhóm các thẻ HTML khác và áp dụng CSS trong nhóm các phần tử. Ngay trong hiện tại thì thẻ <div> có thể được sử dụng để tạo cách bố trí (layout) cho web, tại đây chúng ta xác định các phần khác nhau (trái, phải, trên,…) của trang bằng cách sử dụng thẻ này. Thẻ này không cung cấp bất cứ sự thay đổi về thị giác trên khối nhưng nó có nhiều ý nghĩa hơn khi được sử dụng cùng với CSS.
Ví dụ thẻ <div> trong HTML
Dưới đây là một ví dụ đơn giản về việc sử dụng thẻ <div>:
<!DOCTYPE html> <html> <head> <title>Vi du the div trong HTML</title> </head> <body> <!-- Nhom so 1 --> <div style="color:red"> <h4>Day la nhom dau tien</h4> <p>Danh sach ngon ngu lap trinh:</p> <ul> <li>C++</li> <li>Java</li> <li>PHP</li> <li>Python</li> </ul> </div> <!-- Nhom so 2 --> <div style="color:green"> <h4>Day la nhom thu hai</h4> <p>Danh sach cac hang dien thoai:</p> <ul> <li>Apple</li> <li>Xiaomi</li> <li>Samsung</li> <li>Sony</li> </ul> </div> </body> </html>
Kết quả:
Thẻ <span> trong HTML
Thẻ <span> là một phần tử nội tuyến và có thể được sử dụng để tạo nhóm nội tuyến trong tài liệu HTML. Thẻ này cũng không cung cấp bất cứ sự thay đổi về thị giác trên khối, nhưng nó có nhiều ý nghĩa hơn khi sử dụng cùng với CSS.
Sự khác nhau giữa thẻ <span> và thẻ <div> là thẻ <span> được sử dụng với các phần tử nội tuyến trong khi thẻ <div> được sử dụng với các phần tử cấp khối.
Ví dụ <span> trong HTML
Dưới đây là ví dụ đơn giản về thẻ <span>:
<!DOCTYPE html> <html> <head> <title>Vi du the span trong HTML</title> </head> <body><p>Day la <span style="color:red">mau do</span>, day la <span style="color:green">mau xanh</span></p></body> </html>
Kết quả:
