Div และ Span

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Semantic HTML ซึ่งเป็นการใช้แท็กที่มีความหมายเพื่ออธิบายโครงสร้างและเนื้อหาของเว็บไซต์ให้ชัดเจน อย่างไรก็ตาม ยังมีแท็ก HTML อีกสองตัวที่สำคัญและถูกใช้งานอย่างแพร่หลายในการจัดกลุ่มองค์ประกอบต่างๆ บนหน้าเว็บ นั่นคือ <div> และ <span> ในบทนี้ เราจะมาทำความเข้าใจถึงความแตกต่างระหว่างแท็กทั้งสองนี้ วิธีการใช้งานร่วมกับ CSS และวิธีการใช้ <div> เพื่อจัดโครงสร้างหน้าเว็บ

ความแตกต่างระหว่าง <div> และ <span>

ทั้ง <div> และ <span> เป็นแท็ก container ที่ใช้ในการจัดกลุ่มองค์ประกอบ HTML แต่มีความแตกต่างที่สำคัญดังนี้:

<div> (Division): เป็นแท็กแบบ block-level element นั่นหมายความว่า <div> จะเริ่มต้นในบรรทัดใหม่เสมอ และกินพื้นที่ความกว้างทั้งหมดที่มีอยู่ (default width: 100%) เหมาะสำหรับจัดกลุ่มองค์ประกอบขนาดใหญ่ เช่น ส่วนหัว (header), ส่วนท้าย (footer), แถบด้านข้าง (sidebar), หรือส่วนเนื้อหาหลัก (main content).
<span>: เป็นแท็กแบบ inline element นั่นหมายความว่า <span> จะไม่เริ่มต้นในบรรทัดใหม่ และกินพื้นที่เฉพาะส่วนที่เนื้อหาภายในครอบครองเท่านั้น เหมาะสำหรับจัดกลุ่มองค์ประกอบขนาดเล็กภายในบรรทัดเดียวกัน เช่น การเน้นคำ, การเปลี่ยนสีตัวอักษร, หรือการเพิ่มสไตล์ให้กับข้อความบางส่วน.

สรุปง่ายๆ: <div> ใช้สำหรับจัดกลุ่มองค์ประกอบในระดับ block หรือระดับส่วน (section) ของหน้าเว็บ ในขณะที่ <span> ใช้สำหรับจัดกลุ่มองค์ประกอบในระดับ inline หรือระดับตัวอักษร/คำ

การใช้ CSS กับ <div> และ <span>

ทั้ง <div> และ <span> เป็นแท็กเปล่าๆ ที่ไม่มีสไตล์เริ่มต้น การใช้งานส่วนใหญ่จึงมักจะมาพร้อมกับการกำหนดสไตล์ด้วย CSS เพื่อให้องค์ประกอบที่ถูกจัดกลุ่มมีลักษณะตามที่เราต้องการ

ตัวอย่างการใช้ CSS กับ <div>

<div style="background-color: lightblue; padding: 20px;">
  <h2>ส่วนหัวของเว็บไซต์</h2>
  <p>นี่คือเนื้อหาภายในส่วนหัวของเว็บไซต์</p>
</div>

ในตัวอย่างนี้ เราใช้ <div> เพื่อสร้างส่วนหัวของเว็บไซต์ และกำหนดสไตล์ด้วย CSS แบบ inline ให้มีพื้นหลังสีฟ้าอ่อน (background-color: lightblue) และมีระยะห่างภายใน (padding: 20px)

ตัวอย่างการใช้ CSS กับ <span>

<p>นี่คือข้อความ <span style="color: red; font-weight: bold;">สำคัญมาก</span> ที่คุณต้องอ่าน</p>

ในตัวอย่างนี้ เราใช้ <span> เพื่อเน้นคำว่า "สำคัญมาก" ให้เป็นสีแดง (color: red) และตัวหนา (font-weight: bold) ภายในย่อหน้า

ข้อควรจำ: แม้ว่าเราจะสามารถกำหนดสไตล์ด้วย CSS แบบ inline ได้ แต่การใช้ CSS ภายนอก (external CSS) หรือ CSS ภายใน (internal CSS) จะเป็นวิธีที่แนะนำมากกว่าสำหรับการบำรุงรักษาโค้ดในระยะยาว

การจัดโครงสร้างหน้าเว็บด้วย <div>

<div> มีบทบาทสำคัญในการจัดโครงสร้างหน้าเว็บ โดยเราสามารถใช้ <div> เพื่อแบ่งหน้าเว็บออกเป็นส่วนต่างๆ ที่ชัดเจน เช่น:

<div id="header">: ส่วนหัวของเว็บไซต์
<div id="navigation">: แถบนำทาง
<div id="main">: ส่วนเนื้อหาหลัก
<div id="sidebar">: แถบด้านข้าง
<div id="footer">: ส่วนท้ายของเว็บไซต์

การใช้ <div> ร่วมกับ id attribute จะช่วยให้เราสามารถอ้างอิงถึงส่วนต่างๆ ของหน้าเว็บได้ง่ายขึ้นใน CSS และ JavaScript

ตัวอย่างโครงสร้างหน้าเว็บด้วย <div>

<!DOCTYPE html>
<html>
<head>
  <title>โครงสร้างหน้าเว็บด้วย Div</title>
  <style>
    #header {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
    }
    #navigation {
      background-color: #ddd;
      padding: 10px;
    }
    #main {
      padding: 20px;
    }
    #sidebar {
      background-color: #eee;
      padding: 10px;
      width: 200px;
      float: right;
    }
    #footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
      clear: both; /* ล้าง float */
    }
  </style>
</head>
<body>

  <div id="header">
    <h1>เว็บไซต์ของฉัน</h1>
  </div>

  <div id="navigation">
    <a href="#">หน้าแรก</a> |
    <a href="#">เกี่ยวกับเรา</a> |
    <a href="#">ติดต่อเรา</a>
  </div>

  <div id="main">
    <h2>เนื้อหาหลัก</h2>
    <p>นี่คือเนื้อหาหลักของเว็บไซต์...</p>
  </div>

  <div id="sidebar">
    <h3>แถบด้านข้าง</h3>
    <p>โฆษณาหรือข้อมูลอื่นๆ...</p>
  </div>

  <div id="footer">
    <p>สงวนลิขสิทธิ์ © 2023</p>
  </div>

</body>
</html>

ในตัวอย่างนี้ เราได้สร้างโครงสร้างหน้าเว็บอย่างง่าย โดยใช้ <div> เพื่อแบ่งหน้าเว็บออกเป็นส่วนต่างๆ และกำหนดสไตล์ด้วย CSS เพื่อให้แต่ละส่วนมีลักษณะที่แตกต่างกัน

ข้อควรระวัง: แม้ว่า <div> จะมีประโยชน์ในการจัดโครงสร้างหน้าเว็บ แต่ในปัจจุบันเราควรพิจารณาใช้ Semantic HTML5 tags เช่น <header>, <nav>, <main>, <aside>, และ <footer> แทน <div> ที่มี id attribute เดียวกัน เพื่อให้โครงสร้างหน้าเว็บมีความหมายและเข้าถึงได้ง่ายยิ่งขึ้น (ตามที่ได้เรียนรู้ในบทที่แล้ว) อย่างไรก็ตาม การเข้าใจการทำงานของ <div> ยังคงมีความสำคัญเนื่องจากยังมีการใช้งานอย่างแพร่หลายในโค้ดเก่าและในบางสถานการณ์ที่ Semantic HTML5 tags อาจไม่เหมาะสม

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ <div> และ <span> ซึ่งเป็นแท็ก container ที่ใช้ในการจัดกลุ่มองค์ประกอบ HTML <div> เป็นแท็กแบบ block-level element ที่เหมาะสำหรับจัดกลุ่มองค์ประกอบขนาดใหญ่ ในขณะที่ <span> เป็นแท็กแบบ inline element ที่เหมาะสำหรับจัดกลุ่มองค์ประกอบขนาดเล็ก การใช้ CSS ร่วมกับ <div> และ <span> จะช่วยให้เราสามารถกำหนดสไตล์ให้กับองค์ประกอบที่ถูกจัดกลุ่มได้อย่างยืดหยุ่น และการใช้ <div> ในการจัดโครงสร้างหน้าเว็บจะช่วยให้เราสามารถแบ่งหน้าเว็บออกเป็นส่วนต่างๆ ที่ชัดเจนได้

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ HTML Entities ซึ่งเป็นวิธีการแสดงสัญลักษณ์พิเศษที่อาจไม่สามารถพิมพ์ได้โดยตรงบนคีย์บอร์ด