พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน div Tag

ใน HTML5 แท็ก <div> (ย่อมาจาก division) ใช้ในการจัดกลุ่มเนื้อหาหรือองค์ประกอบต่าง ๆ บนหน้าเว็บ โดยไม่มีความหมายเชิงเนื้อหาเหมือนแท็กอื่น ๆ เช่น <header> หรือ <article> มักถูกใช้ร่วมกับ CSS และ JavaScript เพื่อควบคุมการแสดงผลและการทำงานของเนื้อหาในกลุ่มนั้น ๆ

การใช้งานทั่วไปของ <div>

จัดกลุ่มเนื้อหา <div> มักใช้ในการจัดกลุ่มเนื้อหาที่เกี่ยวข้องกัน เช่น ข้อความ ภาพ หรือลิงก์ เพื่อให้จัดรูปแบบได้ง่ายขึ้น เช่นจัดให้อยู่ในบล็อกเดียวกัน

HTML
<div>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph about my website.</p>
    <img src="image.jpg" alt="Image description">
</div>

ใช้กับ CSS เพื่อจัดรูปแบบ ใช้ <div> ร่วมกับ CSS เพื่อจัดตำแหน่งหรือกำหนดสไตล์เฉพาะ เช่น สีพื้นหลัง ระยะขอบ และการจัดวาง

HTML
<style>
    .container {
        width: 80%;
        margin: 0 auto;
        background-color: #f0f0f0;
        padding: 20px;
    }
</style>

<div class="container">
    <h2>Content Area</h2>
    <p>This content is styled using a div container.</p>
</div>

โครงสร้างเค้าโครงเว็บไซต์ (Layout Structure) สามารถใช้ <div> เพื่อจัดกลุ่มส่วนต่าง ๆ ของหน้าเว็บ เช่น ส่วนหัว ส่วนเนื้อหา และส่วนท้าย

HTML
<div id="header">
    <h1>Website Header</h1>
</div>

<div id="main-content">
    <p>This is the main content area.</p>
</div>

<div id="footer">
    <p>Website Footer</p>
</div>

การประยุกต์ใช้ร่วมกับ Flexbox หรือ Grid ใช้ <div> กับ CSS Flexbox หรือ CSS Grid เพื่อจัดเลย์เอาต์ที่ซับซ้อนมากขึ้น

HTML
<style>
    .flex-container {
        display: flex;
        justify-content: space-around;
    }

    .flex-container div {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        text-align: center;
        padding: 20px;
    }
</style>

<div class="flex-container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

ใช้กับ JavaScript <div> สามารถใช้เป็นตัวกำหนดพื้นที่ที่เราต้องการให้ JavaScript เข้าควบคุมการทำงาน เช่น การแสดง/ซ่อนเนื้อหา

HTML
<div id="toggleDiv">
    <p>This content can be toggled.</p>
</div>

<button onclick="toggleDiv()">Toggle Content</button>

<script>
    function toggleDiv() {
        var div = document.getElementById("toggleDiv");
        if (div.style.display === "none") {
            div.style.display = "block";
        } else {
            div.style.display = "none";
        }
    }
</script>

การใช้งานที่ไม่แนะนำ

แม้ว่า <div> จะเป็นแท็กที่ใช้งานได้หลากหลาย แต่ใน HTML5 ควรพิจารณาใช้แท็กที่มีความหมายเชิงเนื้อหามากขึ้น เช่น <header>, <footer>, <section>, หรือ <article> เพื่อให้โครงสร้างของเอกสารชัดเจนและเป็นไปตามมาตรฐาน

ตัวอย่างเช่น แทนที่จะใช้

HTML
<div id="header">
    <h1>Header</h1>
</div>

ควรใช้แท็กที่ถูกต้อง

HTML
<header>
    <h1>Header</h1>
</header>

สรุป

  • แท็ก <div> ใช้จัดกลุ่มเนื้อหาที่ไม่มีความหมายเชิงเนื้อหา แต่มีประโยชน์ในเชิงการจัดรูปแบบ (CSS) และการทำงาน (JavaScript)
  • สามารถนำไปประยุกต์ใช้ในการจัดเลย์เอาต์หรือโครงสร้างเว็บไซต์
  • ควรใช้อย่างเหมาะสม ร่วมกับแท็กที่มีความหมายเชิงโครงสร้างใน HTML5 เพื่อให้โค้ดมีความเป็นระเบียบและเข้าใจง่าย
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ