Thẻ <div> trong HTML

1) Thẻ <div> trong HTML

- Thẻ <div> là một trong những thẻ quan trọng và được sử dụng nhiều nhất trong HTML.

- Thẻ <div> là một phần tử khối, cho nên trước và sau phần tử <div> sẽ bị ngắt xuống dòng.

- Thẻ <div> thường được dùng để nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng như thiết kế bố cục của trang web.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body{
            margin:0px;
        }
        #container{
            width:800px;
            border:1px solid gray;
            margin-left:auto;
            margin-right:auto;
        }
        #container > div:nth-child(1){
            background-color:#73ad21;
            color:white;
            font-size:25px;
            text-align:center;
            padding:20px;
        }
        #container > div:nth-child(2){
            margin:15px;
        }
        #container > div:nth-child(3){
            background-color:#ddd;
            font-size:18px;
            text-align:center;
            padding:15px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <div>WEB CƠ BẢN .VN</div>
            <div>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>
        </div>
        <div>
            <h2>Layout là gì?</h2>
            <p>Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành
            phần chính trên một trang web.</p>
            <p>Một trang web thường gồm các thành phần chính như:</p>
            <ul>
                <li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li>
                <li>Footer: Thông tin bản quyền của trang web</li>
                <li>Menu: Thanh chức năng</li>
                <li>Nội dung</li>
                <li>....</li>
            </ul>
        </div>
        <div>&copy;2016 Web cơ bản All Rights Reserved</div>
    </div>
</body>
</html>

Xem ví dụ

2) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <div> với định dạng CSS như sau:

div{
    display: block;
}