Block trong HTML
Tất cả các phần tử trong HTML có thể được chia thành hai loại: các phần tử cấp khối và các phần tử nội tuyến . Phần tử cấp khối 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>, ...
Tất cả các phần tử trong HTML có thể được chia thành hai loại: các phần tử cấp khối và các phần tử nội tuyến.
Phần tử cấp khối 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ử HTML 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ụ
Dưới đây là một ví dụ đơn giản về việc sử dụng thẻ <div>. Chúng ta sẽ học về CSS trong một chương riêng, nhưng tại đây chúng ta sử dụng nó để thấy sự hữu ích khi dùng thẻ <div>:
<!DOCTYPE html> <html> <head> <title>Vi du the div trong HTML</title> </head> <body> <div style="color:red"> <h4>Day la nhom dau tien</h4> <p>Danh sach cac loai rau</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div> <div style="color:green"> <h4>Day la nhom thu hai</h4> <p>Danh sach cac loai trai cay</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html>
Nó sẽ tạo ra kết quả sau:
Day la nhom dau tien
Danh sach cac loai rau
- Beetroot
- Ginger
- Potato
- Radish
Day la nhom thu hai
Danh sach cac loai trai cay
- Apple
- Banana
- Mango
- Strawberry
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ụ
Dưới đây là ví dụ đơn giản về thẻ <span>. Chúng ta sẽ học CSS ở một chương riêng nhưng hiện tại chúng ta tìm hiểu nó để thấy sự hữu ích của thẻ <span> này:
<!DOCTYPE html> <html> <head> <title>Vi du the span trong HTML</title> </head> <body> <p>Day la <span style="color:red">mau do</span> va day la <span style="color:green">mau xanh</span></p> </body> </html>
Nó tạo kết quả sau:
Day la mau do va day la mau xanh
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML phổ biến khác tại code24h.com:
