Thẻ
- HTML

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

Hiển thị của phần tử div trên trang

10 bình luận


Đăng bình luận