Thẻ <div> và <span> trong HTML được sử dụng để nhóm và định dạng nội dung. Chúng đều là các thẻ chứa không có ý nghĩa ngữ nghĩa đặc biệt (non-semantic elements), nhưng rất hữu ích cho việc cấu trúc và định dạng trang web. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ <div> và <span>:
Thẻ <div>
Mục đích: Thẻ <div> là một khối (block-level element) được sử dụng để nhóm các phần tử và tạo cấu trúc cho trang web. Nó chiếm toàn bộ chiều rộng của phần tử chứa nó và bắt đầu từ dòng mới.
Cú pháp:
<div>
<!-- Nội dung hoặc các phần tử khác -->
</div>
Ví dụ Sử Dụng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of div</title>
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
}
.footer {
background-color: #ddd;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>My Website</h1>
</div>
<div class="content">
<p>Welcome to my website. This is a content section.</p>
</div>
<div class="footer">
<p>Footer content here</p>
</div>
</div>
</body>
</html>
.container: Nhóm các phần tử lại với nhau, định dạng chung cho toàn bộ trang.
.header: Định dạng phần đầu trang.
.content: Định dạng phần nội dung chính.
.footer: Định dạng phần chân trang.
Thẻ <span>
Mục đích: Thẻ <span> là một phần tử inline được sử dụng để nhóm các phần tử hoặc văn bản trong một dòng mà không tạo ra sự ngắt dòng. Nó chủ yếu được dùng để áp dụng các kiểu CSS cho các phần nhỏ của văn bản hoặc nhóm các phần tử inline.
Cú pháp:
<span>
<!-- Nội dung -->
</span>
Ví dụ Sử Dụng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of span</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph with <span class="highlight">highlighted text</span> in the middle.</p>
</body>
</html>
Sự Khác Biệt Chính
Khối và Inline:
- Thẻ
<div> là thẻ khối, có nghĩa là nó chiếm toàn bộ chiều rộng của phần tử chứa nó và luôn bắt đầu trên dòng mới.
- Thẻ
<span> là thẻ inline, có nghĩa là nó chỉ chiếm không gian cần thiết và không tạo ra ngắt dòng.
Sử Dụng:
- Dùng
<div> khi bạn cần nhóm các phần tử lớn hơn hoặc cấu trúc trang, như các phần của layout.
- Dùng
<span> khi bạn cần nhóm các phần tử nhỏ hơn hoặc áp dụng kiểu CSS cho một đoạn văn bản hoặc các phần tử inline khác.
Khi Nào Nên Sử Dụng
- Thẻ
<div>: Khi bạn muốn tạo cấu trúc layout cho trang web hoặc nhóm các phần tử khối lại với nhau để định dạng hoặc xử lý.
- Thẻ
<span>: Khi bạn cần áp dụng kiểu CSS cho một phần nhỏ của văn bản hoặc nhóm các phần tử inline mà không làm thay đổi dòng của chúng.
Cả hai thẻ <div> và <span> đều rất linh hoạt và hữu ích trong việc tạo cấu trúc và định dạng cho các phần tử HTML trên trang web.
