HTML5 การใช้งาน Div Element

<div>
    <h2>เกี่ยวกับเรา</h2>
    <p>เราคือบริษัทที่เชี่ยวชาญในการให้บริการ...</p>
</div>

<div class="container">
    <div class="header">ส่วนหัว</div>
    <div class="main-content">เนื้อหาหลัก</div>
    <div class="footer">ส่วนท้าย</div>
</div>

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

<div class="box">
    เนื้อหาภายในกล่อง
</div>

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid black;
}

<button onclick="toggleVisibility()">คลิกเพื่อแสดง/ซ่อน</button>
<div id="content" style="display:none;">
    นี่คือข้อมูลที่ถูกซ่อน
</div>

<script>
    function toggleVisibility() {
        var content = document.getElementById('content');
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    }
</script>

<div class="flex-container">
    <div class="item">รายการที่ 1</div>
    <div class="item">รายการที่ 2</div>
    <div class="item">รายการที่ 3</div>
</div>

.flex-container {
    display: flex;
    justify-content: space-between;
}
.item {
    background-color: lightgreen;
    padding: 20px;
    margin: 10px;
}

<div class="outer">
    <div class="middle">
        <div class="inner">เนื้อหาภายในสุด</div>
    </div>
</div>

.outer {
    background-color: lightcoral;
    padding: 20px;
}
.middle {
    background-color: lightyellow;
    padding: 20px;
}
.inner {
    background-color: lightblue;
    padding: 20px;
}