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>, <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>

<!-- Nhom so 1 -->
<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>

<!-- Nhom so 2 -->
<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

Bài học HTML phổ biến khác tại s2sontech.com: