Trong HTML, hai thẻ quan trọng giúp nhóm nội dung và tạo bố cục linh hoạt là <div> và <span>. Dù bản thân chúng không hiển thị gì đặc biệt, nhưng khi kết hợp với CSS, chúng giúp tổ chức và trang trí nội dung hiệu quả.
1. Thẻ <div> – khối phân chia nội dung
- Là thẻ khối (block-level), chiếm toàn bộ chiều ngang.
- Dùng để gộp nhiều phần tử lại với nhau thành một khối.
- Rất hữu ích khi tạo layout trang web.
Ví dụ:
<div>
<h2>Giới thiệu</h2>
<p>Tôi là một lập trình viên web.</p>
</div>
2. Thẻ <span> – nội dung nội dòng
- Là thẻ nội dòng (inline), chỉ chiếm diện tích cần thiết.
- Dùng để bọc một phần nhỏ trong dòng văn bản, thường để áp dụng CSS riêng.
Ví dụ:
<p>Tôi <span style="color: red;">yêu thích</span> HTML.</p>
3. So sánh <div> và <span>
| Đặc điểm | <div> | <span> |
|---|---|---|
| Loại thẻ | Block (khối) | Inline (nội dòng) |
| Dùng để | Nhóm nhiều phần tử | Nhóm một phần nhỏ trong văn bản |
| Ứng dụng | Tạo layout, chia cột | Đổi màu, kiểu chữ cho đoạn nhỏ |
4. Kết hợp với thuộc tính class và id
Cả <div> và <span> thường được kết hợp với CSS thông qua class hoặc id.
Ví dụ:
<div class="box">
<p>Đây là nội dung trong khối có class là box.</p>
</div>
<p>Chữ <span id="highlight">này nổi bật</span> nhờ id.</p>
5. Thực hành
Tạo file div-span.html và thêm đoạn sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thẻ div và span</title>
<style>
.gioithieu {
background-color: #f0f0f0;
padding: 10px;
}
#noibat {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gioithieu">
<h2>Giới thiệu</h2>
<p>Tôi là <span id="noibat">người đam mê lập trình</span> và học HTML mỗi ngày.</p>
</div>
</body>
</html>
6. Ghi nhớ
<div>dùng để nhóm nhiều thành phần – thích hợp cho chia bố cục.<span>dùng để nhóm một phần nhỏ nội dung – phù hợp với chỉnh sửa cục bộ.- Cả hai đều cực kỳ quan trọng khi làm việc với CSS và JavaScript.
Thảo luận