Cách Dùng Thẻ <div>
Thẻ <div>
trong HTML được dùng để gom một hoặc nhiều thẻ khác với nhau thành một nhóm. Bản thân thẻ <div>
không mang một ý nghĩa cụ thể nào trong văn bản HTML thay vào đó các thẻ bên trong <div>
sẽ giúp mô tả nội dung của bên trong nó.
Ví dụ dưới đây sử dụng hai thẻ <div>
và mỗi thẻ <div>
này chứa các thẻ <h2>
và <p>
bên trong:
<div class="html">
<h2>HTML</h2>
<p>HTML là ngôn ngữ đánh dấu</p>
</div>
<div class="js">
<h2>JavaScript</h2>
<p>JavaScritp là ngôn ngữ kịch bản</p>
</div>
Từ div là viết tắt của từ division (dịch sang tiếng Việt có nghĩa là: chia thành từng khu).
Khác với một số thẻ như các thẻ đề mục (<h1>
cho tới <h6>
), thẻ <img>
thì thẻ <div>
cũng có thể chứa một hoặc nhiều thẻ <div>
khác bên trong nó:
<div class="outter">
<div class="inner">
...
</div>
</div>
Phần Tử <div>
Phần tử <div>
được tạo ra tương ứng từ thẻ <div>
có kiểu hiển thị mặc định là block. Nghĩa là nội dung bên trong phần tử <div>
sẽ có chiều rộng bằng 100% chiều rộng của phần tử chứa nó.
Ví dụ một trang HTML như sau:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>Thẻ div</div>
<style>
body { border: 1px solid black }
div { border: 1px solid red }
</style>
</body>
</html>
Khi hiển thị trên trình duyệt sẽ có kết quả tương tự như dưới đây: