Trong HTML, mỗi thẻ đều có hành vi hiển thị mặc định là khối (block-level) hoặc dòng (inline). Việc hiểu rõ hai loại này sẽ giúp bạn tổ chức bố cục hợp lý và dễ dàng thiết kế giao diện với CSS.
1. Thẻ khối (block-level elements)
- Mặc định chiếm toàn bộ chiều ngang của vùng chứa.
- Luôn xuống dòng sau khi hiển thị.
- Thường dùng để tạo cấu trúc lớn: tiêu đề, đoạn văn, khu vực nội dung,…
Ví dụ một số thẻ khối phổ biến:
<h1>Tiêu đề</h1>
<p>Đây là một đoạn văn.</p>
<div>Một khối nội dung</div>
<ul>
<li>Mục 1</li>
<li>Mục 2</li>
</ul>
2. Thẻ dòng (inline elements)
- Chỉ chiếm kích thước vừa đủ cho nội dung.
- Không xuống dòng, nằm cùng dòng với các thẻ khác.
- Dùng để định dạng văn bản, làm nổi bật, hoặc xử lý chi tiết nhỏ.
Ví dụ một số thẻ dòng phổ biến:
<strong>Chữ đậm</strong>
<em>Chữ nghiêng</em>
<span>Phần nhỏ trong đoạn</span>
<a href="#">Liên kết</a>
<img src="..." alt="Ảnh nhỏ">
3. So sánh block và inline
| Đặc điểm | Thẻ khối (block) | Thẻ dòng (inline) |
|---|---|---|
| Chiều ngang | Chiếm toàn bộ chiều ngang | Chỉ vừa đủ nội dung |
| Xuống dòng | Có | Không |
| Ứng dụng | Tạo bố cục, nhóm nội dung lớn | Chỉnh sửa văn bản, hiển thị chi tiết |
4. Một số lưu ý
- Bạn không nên đặt thẻ block bên trong thẻ inline (sai chuẩn).
- Có thể thay đổi hành vi hiển thị bằng CSS:
Ví dụ:display: inlinehoặcdisplay: block.
5. Thực hành
Tạo file block-inline.html và thử đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thẻ block và inline</title>
<style>
.block {
background-color: lightblue;
padding: 10px;
}
.inline {
background-color: lightgreen;
padding: 5px;
}
</style>
</head>
<body>
<h2>Thẻ khối</h2>
<div class="block">Đây là một khối nội dung</div>
<p class="block">Đây là một đoạn văn</p>
<h2>Thẻ dòng</h2>
<p>Đây là <span class="inline">văn bản nằm trong thẻ inline</span> và không xuống dòng.</p>
</body>
</html>
6. Ghi nhớ
- Thẻ block tạo bố cục rõ ràng, thẻ inline xử lý chi tiết.
- Một số thẻ có thể thay đổi hành vi mặc định bằng CSS.
- Phân biệt rõ hai loại này giúp bạn viết HTML đúng cấu trúc và dễ xử lý giao diện hơn.
Thảo luận